Curso Web Design | Como criar formulários em HTML5 – parte 02 (final)

---

Como criar formulários em HTML5 – parte 02 (final) Posted: 14 Nov 2013 03:53 AM PST 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: 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. 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. 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. 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. 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. 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!

You are subscribed to email updates from Blog do Curso Web Design - Microcamp SP To stop receiving these emails, you may unsubscribe now.	Email delivery powered by Google
Google Inc., 20 West Kinzie, Chicago IL USA 60610