HTML5 Formularios

Prévia do material em texto

Elementos básicos de um Formulário 
 
TAG <FORM> 
 
Responsável pela delimitação da área de construção de um formulário, essa tag também 
apresenta dois parâmetros que merecem atenção. São eles: 
• ACTION: Informa ao servidor a página que deve ser carregada assim que o usuário 
clicar sobre o botão “enviar” contido no formulário. Geralmente são utilizadas 
outras tecnologias para trabalhar com estes dados, como ASP, CGI, PHP, etc. 
 
• METHOD: Parâmetro que define como as informações contidas no formulário 
devem ser enviadas ao servidor. Esses métodos podem ser os valores GET e POST, 
onde GET faz com que o conteúdo do formulário seja anexado ao endereço 
informado no parâmetro ACTION E POST (método mais utilizado) transmite toda a 
informação do formulário de modo invisível, não insere ao endereço, além de 
permitir uma quantidade maior de informações a ser passada de uma página para 
outra. O método GET é mais rápido que o método POST. 
Ex: <form action=”resultado.php ” method=”post”> 
 
TAG <INPUT/> 
 
Ela é responsável pela definição do tipo de entrada de dados que um determinado campo 
terá. Essas entradas podem ser de vários tipos, conforme detalhado abaixo: 
• TEXT: Aceita dados do tipo caractere. É o tipo mais utilizado. 
• PASSWORD: Igual ao TEXT, mas o usuário apenas vê asterisco em vez de 
caracteres. Ideal nos campos de senha. 
• DATE: Usado para inserir uma data sem fuso horário 
• E-MAIL: Usado para inserir um endereço de e-mail. 
• URL: Usado para inserir um URL (localizador uniforme de recurso) único. 
Utilizado para especificar endereços de sites. 
• NUMBER: Para entrada numérica. 
• COLOR: Usado para escolher a cor em um controle de cores. 
• CHECKBOX: Aceita campos do tipo Sim ou Não, Verdadeiro ou Falso. 
• RADIO: Mostra várias opções na forma de botões de rádio, mas aceita apenas uma 
delas como seleção. 
• FILE: Possibilita a um usuário carregar um arquivo junto com o formulário. 
• RANGE: Exibe uma régua onde é possível setar um valor. Os atributos min e max 
limitam a faixa de valores, e o atributo step informa a progressão dos valores. 
 
Observe as seguintes linhas que mostram o uso da tag <INPUT>: 
 
Nome: <input type="text" name="nome" id="cnome" size="50" maxlength="50" 
placeholder="Nome Completo" required/> 
 
Senha: <input type="password" name="senha" id="csenha" size="8" 
maxlength="8" placeholder="8 dígitos"/> 
 
 
Data Nascimento: <input type="date" name="datanasc" id="cdatanasc"/> 
 
E-mail: <input type="email" name="email" id="cemail" size="30" 
maxlength="30"/> 
 
Site: <input type="url" name="site" id="csite" size="40" maxlength="40"/> 
 
Nº de Filhos: <input type="number" name="filhos" id="cfilhos" min="0" 
max="30"/> 
 
Cor Preferida: <input type="color" name="cor" id="ccor"/> 
 
<input type="checkbox" name="inf" id="cinf" value="sim"/> Quero receber 
informações sobre este site por e-mail 
 
Sexo: <input type="radio" name="sexo" id="cfem" value="f"/> Feminino 
<input type="radio" name="sexo" id="cmasc" value="m"/> Masculino 
 
Foto: <input type="file" name="foto" id="cfoto" size="50"/> 
 
Como você avalia este site? 0 <input type="range" min="0" max="10" step="2" 
name="avaliacao" id="cavaliacao"> 10 
 
Além do atributo TYPE especificado na tag <INPUT>, outros atributos foram utilizados 
nos exemplos acima. Abaixo segue a finalidade de cada um deles 
 
Atributo Finalidade 
AUTOFOCUS Foca a entrada no elemento quando a página é carregada. 
AUTOFOCUS pode ser aplicado para entrada, seleção, área de 
texto e botão. 
ID Este atributo atribui um identificador a um elemento. Esse 
identificador deverá ser único no documento. 
MAXLENGTH O parâmetro MAXLENGTH indica a quantidade de caracteres 
aceitos em uma caixa de texto 
MIN e MAX Para permitir a entrada de valores numéricos, utilizamos INPUT 
com parâmetro TYPE=”number”. Nesse caso, os parâmetros MIN 
Atributo Finalidade 
e MAX definem os valores mínimo e máximo para caixas desse 
tipo. 
NAME É o nome da variável que irá armazenar o valor informado pelo 
usuário. 
PATTERN O atributo pattern especifica uma expressão regular usada para 
validar um campo de entrada. Ao usar um pattern, você deve 
especificar também um valor title para dar ao usuário uma 
descrição do padrão esperado. O exemplo abaixo é uma caixa de 
texto onde deve ser especificada a numeração de uma peça. A 
numeração segue um padrão, onde é composta de três letras 
maiúsculas seguidas de 4 dígitos. 
Peça: <input type="text" id="cpeça" name="peça" pattern="[A-
Z]{3}[0-9]{4}" title="A numeração de uma peça é composta de 
três letras maiúsculas seguidas de 4 dígitos/> 
PLACEHOLDER O parâmetro PLACEHOLDER configura um conteúdo informativo 
dentro de um objeto de formulário. Ao clicar sobre o objeto, o 
PLACEHOLDER desaparecerá. 
REQUIRED Um atributo boleano que significa que o elemento é obrigatório. O 
atributo required é útil para realizar a validação baseada no 
navegador sem usar JavaScript personalizado. 
 
 
 
CRIAÇÃO DE BOTÕES 
 
Ainda falando da tag <INPUT>, é por meio dele que também criamos os botões que 
permitem que apaguemos ou enviemos os dados do nosso formulário. 
Primeiro vamos ver como apagar os dados do formulário com o uso da tag 
<INPUT>.A linha a seguir mostra um exemplo de construção de um botão RESET. Esse 
botão tem a função de apagar todos os campos do formulário e com isso, restabelecer o 
valor padrão de cada campo. 
 
<input type ="reset" value="Limpar os dados"> 
 
Agora vamos ver como aplicar a tag <INPUT> no envio dos dados do nosso formulário. A 
linha a seguir mostra um exemplo de construção de um botão SUBMIT por meio da tag 
<INPUT>. Esse botão tem a função de enviar todos os campos do formulário. 
 
<input type="submit" value="Enviar os dados"> 
 
É possível criar botões gráficos usando image como tipo (type) do controle input, pode-se 
criar um botão submit representado pela imagem do local especificado usando-se src, como 
a seguir: 
 
<input type="image" src="figura.gif"> 
 
Além de criar botões do tipo submit, reset e image, também é possível criar botões 
simples de apertar, chamados push buttons, que executam scripts do lado cliente quando 
ativados. 
 
<input type="button" value="Verificar" onclick="verificarData()"> 
 
Este exemplo cria um botão que executa uma função de script chamada verificarData() 
quando clicado. O rótulo que aparece no botão é determinado pelo atributo value igual a 
Verificar. 
 
 
 TAG <SELECT> 
 
É responsável pela criação de uma lista suspensa. 
 
A tag <SELECT></SELECT> possui três atributos que são: 
• NAME: Nome da variável que receberá o conteúdo do campo. 
• SIZE: Número de elementos (as linhas) que devem ser exibidos. Este parâmetro é 
opcional. 
• MULTIPLE: Permite a seleção de mais de uma opção, ou seja, escolha múltipla. 
 
A tag <OPTION></OPTION> possui dois atributos que são: 
• SELECTED: Já deixa uma opção pré-selecionada. 
• VALUE: valor da opção selecionada; 
Obs: Utilize a tag<optgroup> seguida do atributo label, caso queira dividir os itens da lista 
suspensa em grupos. <optgroup label="Legenda"> opções da lista suspensa</optgroup> 
 
Observe as seguintes linhas que mostram o uso da tag <SELECT>: 
 
Qual é o seu hobby preferido?<select name="hobby" size=2 > 
 <option value="livros"> ler livros </option> 
 <option value="música"> ouvir música </option> 
<option value="esporte" selected> praticar esportes</option> 
 </select> 
 
A TAG <TEXTAREA> 
 
Esta tag cria um campo do tipo texto com várias linhas para inclusão. Ele possui três 
parâmetros que são: 
• NAME: Nome da variável que receberá o conteúdo do campo; 
• ROWS: Número de linhas que serão exibidas no formulário.• COLUMNS: Número de colunas que serão exibidas no formulário. 
Observe a seguinte linha que mostra o uso desta tag: 
 
<textarea name="observação" rows="5" cols="60"> </textarea> 
 
 
AGRUPANDO CONTROLES COM FIELDSET E LEGEND 
 
O elemento fieldset organiza os controles de um formulário em grupos que aparecem no 
navegador da Web. O elemento legend exibe uma legenda para o fieldset. Para criar um 
elemento fieldset, comece com a tag fieldset de abertura, seguida pelo elemento legend, 
como mostrado no código a seguir: 
<fieldset> 
<legend> Endereço </legend> 
<p>Logradouro: <input type="text" name="logradouro" id="clogradouro" size="50" 
maxlength="50" placeholder="Rua/Avenida/Travessa"/></p> 
<p>Número: <input type="number" name="numero" id="cnumero" min="1" 
max="99999"/> </p> 
</fieldset> 
 
A TAG <LABEL> 
 
A tag <LABEL> é utlizada em conjunto com elementos de formulário, propiciando uma 
maior facilidade de acesso a esses elementos. 
Para criar palavras relacionadas a objetos de formulário, utilizamos a tag LABEL com um 
ID. Para criar a relação entre objetos e LABEL, utilizamos o parâmetro FOR do objeto. 
 
<p><label for="cnome"> Nome: </label><input type="text" name="nome" id="cnome" 
size="50" maxlength="50" placeholder="Nome Completo" autofocus required/></p> 
 
 
A TAG <DATALIST> 
 
O elemento HTML Datalist (<datalist>) contém um conjunto de elementos <option> que 
representam as opções possíveis para o valor de outros controles. 
 
<p>Navegador Preferido: <input type="text" list="browsers" /> </p> 
<datalist id="browsers"> 
 <option value="Chrome"> 
 <option value="Firefox"> 
 <option value="Internet Explorer"> 
 <option value="Opera"> 
 <option value="Safari"> 
</datalist> 
 
 
Referências Bibliográficas 
 
FREEMAN, Eric; FREEMAN, Elisabeth. Use A Cabeça! HTML com CSS e XHTML. Alta 
Books, 2008. 
MARCONDES, Christian Alfim . Programando em HTML 4.0. 6.ed. rev. São Paulo: Érica, 1998 
RAMALHO, Jose Antonio Alves. HTML avançado. São Paulo: Makron Books, 1997 
VENETIANER, Tomas. HTML: desmistificando a linguagem da Internet. 2 rev. e ampl. São 
Paulo: Makron Books, 1997