anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Como criar formulários em HTML5 – parte 02 (final)

capa

Como vimos na primeira parte desse tutorial publicado aqui no mês passado, criar formulários no HTML 5 é uma tarefa relativamente descomplicada e que possui muitas vantagens sobre os métodos mais comuns empregados até hoje. No post anterior sobre esse assunto, demonstrei quais os elementos e atributos são necessários para criar um formulário e fiz uma breve definição de cada um deles. Agora, nesta segunda parte, veremos como implementá-los em nossa página HTML e como os elementos se comportarão nos diversos navegadores.

Para isso, vamos utilizar uma página de teste que envolve vários elementos e atributos que foram apresentados anteriormente, assim como suas funcionalidades. Trechos de códigos e resultados gerados serão apresentados de acordo com o navegador e seus resultados argumentados.

O formulário

A implementação do formulário foi o que mais diferiu entre os navegadores, cada elemento foi apresentado de uma forma. A princípio serão explicadas as  linhas de comando do formulário e em seguida os resultados obtidos. O interessante é não observar somente o código e como utilizá-lo, mas também conhecer o impacto relacionado a funcionalidade do site, quando testados em outros navegadores.

Código de implementação de um formulário:

código implementação

Atributos autofocus e required

Na linha 58 é apresentado um campo de texto (input) com duas propriedades importantes: uma delas é o autofocus que permite que o campo receba o foco assim que a página for carregada. Esse atributo funcionou apenas nos navegadores Google Chrome e Firefox, tanto o Opera quanto o navegador Internet Explorer não conseguiram apontar o foco da página para esse campo. Outra propriedade importante é o atributo required, que torna o preenchimento desse campo obrigatório. Caso o usuário se esqueça de preencher o campo assim que o formulário for enviado, ele interromperá o envio e emitirá uma mensagem ao usuário. Somente o navegador Internet Explorer é que não conseguiu implementar o atributo, os demais navegadores apresentaram o resultado esperado como demonstra a Figura 02.

Figura 02 - Teste realizado nos navegadores utilizando o atributo autofocus e o required:

Figura 02 – Teste realizado nos navegadores utilizando o atributo autofocus e o required.

Elemento e-mail

Na linha 62 é apresentado um campo de texto (input) com o atributo type e configurado com a palavra “e-mail”. Com essa simples configuração o HTML5 é capaz de verificar se o e-mail digitado é um e-mail válido. É possível observar através da figura 03 que o navegador Internet Explorer não aderiu ao atributo, já os demais navegadores funcionaram perfeitamente.

Figura 03 - Resultado gerado pelos navegadores do atributo e-mail.

Figura 03 – Resultado gerado pelos navegadores do atributo e-mail.

Elemento placeholder

Na linha 66 a caixa de texto (input) possui um atributo chamado de placeholder que atribui um valor inicial ao campo e assim que o campo receber o foco ou que digitar, esse conteúdo será apagado. Ao executar o código nos navegadores propostos foi possível verificar que o Internet Explorer não aderiu o atributo placeholder. Quanto ao Firefox e ao Google Chrome, ambos implementaram bem o atributo, uma vez que o valor só some do campo quando o usuário digita algo e não quando recebe o foco. Já o navegador Opera mantém o valor preenchido até receber o foco, assim que o recebe o conteúdo é apagado. É possível visualizar o resultado gerado através da figura 04:

 Figura 04 - Resultado apresentado por navegadores utilizando o atributo placeholder.

Figura 04 – Resultado apresentado por navegadores utilizando o atributo placeholder.

Elementos date e datetime-local

O HTML5 propõe campos específicos para o tipo data, que é o date e o datetime-local. Ambos possibilitam ao digitar a data um calendário facilitando a digitação. A diferença é que o datetime-local além da data também exibe um controle de hora. A implementação do código date pode ser analisado na linha 71 e o datetime-local na linha 75. Em relação à implementação do atributo, os navegadores Internet Explorer e o Firefox não conseguiram implementar, já os navegadores Google Chrome e o Opera implementaram e a utilização é perfeita, o resultado obtido poderá ser avaliado na figura 05.

Figura 05 - Resultado apresentado pelos navegadores na implementação dos atributos date e datetime-local.

Figura 05 – Resultado apresentado pelos navegadores na implementação dos atributos date e datetime-local.

Atributos number, ranger, min, max

O HTML5 oferece campos específicos para o tipo número, que é o number e o ranger. Ambos possibilitam que ao invés de digitar um número, o usuário utilize os controles do formulário, facilitando a digitação. A diferença é que o range é um controle deslizante. A implementação do código number pode ser analisado na linha 79 e do ranger na linha 83, o ranger possui atributos que definem o ponto inicial através do “min”, o ponto final através do “max”, o valor que virá selecionado através do value. Quanto ao funcionamento os navegadores Internet Explorer e o Firefox não conseguiram implementar tais funções, já o Google Chrome e o Opera implementaram de forma eficiente. É possível observar o resultado gerado nos navegadores na Figura 06.

Figura 06 - Resultado apresentado pelos navegadores em relação aos atributos ranger, number, min, max.

Figura 06 – Resultado apresentado pelos navegadores em relação aos atributos ranger, number, min, max.

Formulário criado

Pronto! Seu formulário em HTML5 está criado, com todas as facilidades, recursos e beleza que a nova versão pode trazer. Agora basta verificar o impacto para os usuários que ainda estão com seus navegadores desatualizados e implantar o HTML5 para desfrutar da facilidade e praticidade que ele pode proporcionar. Se desejar, clique AQUI para ver uma página de teste online que criei, a fim de demonstrar as funcionalidades aqui descritas.

Espero que tenham gostado, não se esqueçam de compartilhar as maravilhas do HTML5 com seus amigos! E ao final da página, comente ou dê sugestões para os próximos posts!

Próximo

Postado por

Postagem Relacionada

Aprenda como criar uma semântica de tabela em HTML5
Como sabemos, uma das grandes mudanças no HTML5 é a semântica. Agora delimitamos claramente para o