No HTML5 os formulários ganharam recursos muito
interessantes e importantes para otimização do trabalho. Por exemplo, é
possível fazer validação de campos sem o uso de JavaScript, fazer validação
através de ER (expressões regulares) diretamente no código HTML entre muitas
outras.
Tipos de campo que o HTML 5 valida.
Data e Hora
Esse campo abre um calendário para escolher a date e
ainda é possível setar a hora.
<input
name="calendario" type="datetime"/>
Tempo
Campo utilizado para setar
hora e minuto.
<input name="hora" type="time"/>
Semana
Abre um campo onde é
possível selecionar ano e dia, e escolhendo o dia ele armazena o ano e a
semana.
<input
name="semana" type="week"/>
Números
Esse campo permite adicionar
somente números como valores, e ainda é possível limitar os valores mínimo e
máximo a serem inseridos, utilizando os atributos min e max.
<input name="numero" type="number"/>
<input name=”valuex” type=”number” value=”8.6” step=”0.3” min=”0”
max=”10” />
Range
Vamos modificar, no exemplo
acima, apenas o valor de type, mudando de “number” para “range”:
<input name=”valuex” type=”range” value=”8.6” step=”0.3” min=”0”
max=”10” />
Telefone
Esse campo permite adicionar
um número de telefone e ele fará a validação automaticamente, porém eu vejo um
problema, já que o formato dos números telefônicos não é um padrão mundial,
alguns países possuem mais dígitos do que os telefones aqui do Brasil por
exemplo, então essa validação é um pouco falha.
<input name="telefone" type="tel"/>
URL
Exibe um campo com validação
para a inserção de URLs.
<input name="site" type="url"/>
Email
Campo usado para inserir e
fazer a validação de um endereço de e-mail.
<input name="email" type="email"/>
Slider
Esse novo tipo de campo não
é como os outros, ele exibe uma régua onde é possível setar um valor. Essa
régua é parecida com a timeline de players de música. Os atributos min e max
limitam a faixa de valores, e o atributo step informa a progressão dos valores,
que no exemplo abaixo é para multiplos de 5, por exemplo 5, 10, 15?
<input name="satisfacao" type="range"
min="5" max="50" step="5"/>
Pesquisa
Cria um campo para
pesquisas.
<input name="pesquisar" type="search"/>
Paleta de Cores
Cria uma paleta de cores,
como as que podem ser criadas usando por exemplo a biblioteca JavaScript
"jQuery UI".
<input name="cores" type="color"/>
Veja abaixo alguns atributos
que possuem funções interessantes, tanto na validação dos campos quanto no
auxílio ao usuário e usabilidade da página web.
Autofocus
Se informado esse atributo
no campo, ele receberá o foco assim que a página for carregada no navegador.
<input name="pesquisar" type="search"
autofocus/>
Autocomplete
Se esse atributo estiver
como "on", então ele habilita um autocompletar para o campo.
<input name="pesquisar" type="search"
autocomplete="on"/>
Placeholder
Esse atributo é usado para
auxiliar o usuário no preenchimento do campo, pois ele dá uma dica do que deve
ser inserido.
Você já deve ter visto um
“placeholder”. Tradicionalmente, vínhamos fazendo isso:
<input name=”q” value=”Search here” onfocus=”if(this.value==’Search
here’)this.value=’’”>
HTML5 nos permite fazer isso
de maneira muito mais elegante:
<input name=”q” placeholder=”Search here”>
Ou
<input name="pesquisar" type="search" placeholder="Pesquisar"/>
Pattern
Esse atributo quando
especificando tem a função de fazer uma validação com base em uma expressão
regular. No exemplo abaixo ele aceita obrigatoriamente 11 caracteres entre
números e letras minúsculas.
<input
name="valor" type="number"
pattern="[0-9][a-z]{10}"/>[sourcecode]</pre>
Required
Para tornar um campo de
formulário obrigatório (seu valor precisa ser preenchido) basta, em HTML5,
incluir o atributo required:
<input name=”login” required>
<strong>Required</strong>
Informando o atributo no
campo, ele passará a ser de preenchimento obrigatório, não sendo executado o
submit do formulário enquanto ele não for preenchido.
[sourcecode type="html"]<input name="pesquisar"
type="search" required/>
Veja
Mais:
- Introdução ao HTML 5
- Estrutura de um documento html 5
- Layout em HTML5
- Criar Formulários em HTML5
- Criar Formulários em HTML5
- Elemento Áudio e Vídeo em HTML5
- Colocar áudio na página com HTML5
- Colocar vídeo na página com HTML5
- Validar CEP com HTML5 usando Pattern
- Como usar Placeholder no HTML5
- Formulário pronto com HTML5
- Atributo required no HTML5
- Elemento canvas em HTML5
