A evolução dos formulários em HTML 5

HTML 5 é a mais nova versão da linguagem de marcação de hipertexto utilizada para montagem de páginas web, ela ainda não é suportada por todos os navegadores disponíveis no mercado, o que é uma pena, mas é bom tomar conhecimento dessa evolução da HTML...

Por | @jonathanlamimkt Programação

HTML 5 é a mais nova versão da linguagem de marcação de hipertexto utilizada para montagem de páginas web, ela ainda não é suportada por todos os navegadores disponíveis no mercado, o que é uma pena, mas é bom tomar conhecimento dessa evolução da HTML, assim quando os navegadores começarem a dar suporte você já estará pronto para usufruir dos recursos da linguagem e aumentar a produtividade no seu trabalho. Agora que você já sabe um pouco sobre o que é HTML 5, vamos ao que interessa.

Nessa nova versão da HTML 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.

Vejamos algumas novidades da HTML 5 para uso nos formulários.

TIPOS DE CAMPO


Data e Hora
Esse campo abre um calendário para escolher a date e ainda é possível setar a hora.


Tempo
Campo utilizado para setar hora e minuto.


Semana
Abre um campo onde é possível selecionar ano e dia, e escolhendo o dia ele armazena o ano e a semana.


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.


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.


URL
Exibe um campo com validação para a inserção de URLs.


Email
Campo usado para inserir e fazer a validação de um endereço de e-mail.


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?


Pesquisa
Cria um campo para pesquisas.


Paleta de Cores
Cria uma paleta de cores, como as que podem ser criadas usando por exemplo a biblioteca JavaScript "jQuery UI".


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.


Autocomplete
Se esse atributo estiver como "on", então ele habilita um autocompletar para o campo.


Placeholder
Esse atributo é usado para auxiliar o usuário no preenchimento do campo, pois ele dá uma dica do que deve ser inserido.


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 origatoriamente 11 caracteres entre números e letras minúsculas.
[sourcecode]</pre>

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"]

Infelizmente não são todos os navegadores que possuem suporte à HTML 5, como eu já disse no início desse artigo, mas vale a pena conhecer a evolução da HTML e saber o que será possível futuramente na construção de páginas web usando HTML 5.

Para encerrarmos esse artigo, deixo um pequeno exemplo de formulário usando HTML 5 e web semântica. Forte abraço e até o próximo artigo.
Formulário com HTML 5</legend>
  • </li> </ul> </fieldset> </form>


É isto!

Mais sobre: html 5, html, formulários
Share Tweet
DESTAQUES
Mais compartilhados
Comentários