HTML 5 – Novos componentes
2012
Neste artigo vamos analisar alguns dos vários componentes introduzidos pelo HTML 5. Posso afirmar que há grandes novidades para a criação dos nossos formulários. Agora temos novos componentes, atributos,várias mudanças semânticas e também adição de dois tipos de form actions (update e delete).
Obs: para a grande maioria dos exemplos abaixoutilizei a última versão do navegador Opera.
Componentes fora do formulário
Anteriormente, nossos componentes tinham que estar obrigatoriamente contidos dentro das tags do nosso formulário para que pudessem ser submetidos para o servidor.
Agora, isto não é mais necessário!
Podemos ter nossos componentes em qualquer lugar da página apenas informando a qual formulário ele pertence. Observe o trecho abaixo:
<form id=myForm> <input type=text> ... </form> <textarea form=myForm></textarea>
Podemos observar que a área de texto (textarea) não está dentro da nossa tag form, ela está fora dela e através do atributo form indicamos a qual formulário o componente pertence.
Novos componentes
Com a nova versão do HTML novos componentes foram introduzidos, tornando ainda mais prazeroso trabalhar com a linguagem.
Chega de ter que recorrer à biblioteca de terceiros (JQuery UI e outras) para ter que usar um calendário ou uma slide bar.
Agora temos a possibilidade de usar os próprios recursos nativos sem ter que necessitar de biblioteca de terceiros para suprir a falta de componentes.
Vale lembrar que a especificação não define como cada navegador ou dispositivo apresentará cada componente. Portanto, podemos ter diferentes aparências para um mesmo componente dependendo do fabricante ou dispositivo.
<body> <input type=email> </body>
Viram como é fácil a sua utilização?
A tag acima diz ao browser não submeter o formulário se o usuário não entrar com um formato válido de e-mail (claro que não é checado se o e-mail existe!). Mas, a especificação não define como será exibida a mensagem de erro para o usuário.
Além disso, é importante consultar as regras de validação no site da W3C.
Caso as regras de validação não atendam a sua necessidade, fique tranquilo! É possível customizá-la, o que faremos em artigos mais adiante.
Podemos visualizar como o Chrome e o Opera se comportam quando entramos com um e-mail com formato incorreto:
Data, hora, mês e semana
<body> <input type=datetime> <input type=date> <input type=time> <input type=month> <input type=week> </body>
As tags acima são auto-explicativas e tornam a tarefa de trabalhar com datas/horas muito mais fácil, sem necessitar de bibliotecas de terceiros.
Obseve abaixo o efeito no navegador Opera:
Podemos ver que o navegador forneceu nativamente um calendário, facilitando bastante o nosso trabalho.
Number
<body> <input type=number> </body>
Permite somente a entrada de valores numéricos. Veja abaixo o efeito gerado por esta tag:
Range
<body> <input type=range> </body>
O componente range é um dos meus favoritos e permite que o usuário selecione através de um slider valores dentro de aguns limites possíveis. Observe o efeito nos nossos amigos Chrome e Opera:
Posteriormente, faremos um exemplo mais elaborado utilizando os novos atribuos max, min e step =)
Search
<body> <input type=search> </body>
Especifica um campo de busca. Com a ajuda do navegador, pode ser fornecido ao usuário um histórico das páginas visitadas recentemente. A diferença entre este campo e um campo de texto é apenas semântica.
Tel
<body> <input type=tel> </body>
Esta tag espera um telephone como entrada, porém, não há nenhuma validação especial definida pela especificação. Mas, com o HTML5 podemos adicionar aos nossos componentes regras de validação.
Assim como a tag search, a diferença é apenas semântica. Alguns dispositivos podem facilitar a vida do usuário apenas exibindo o teclado numérico quando o foco estiver neste campo.
Color
<body> <input type=color> </body>
Permite que os usuários entrem com uma cor válida. Podemos ver abaixo que o Opera exibe uma paleta de cores com algumas opções:
Para concluir, vale lembrar que muitos navegadores não possuem suporte à estas tags e que muita coisa ainda está por vir, mas, vimos o quanto o HTML 5 facilitará a nossa vida =) No próximo artigo irei abordar alguns novos atributos para que possamos fazer alguns exemplos mais elaborados. Até a próxima!
Consulte a série de artigos sobre HTML5: http://robsonramos.com/index.php/category/html-5/
Comment