Validando formulário em HTML 5.

Veja um formulario simples usando alguns recursos do html 5 

<form action="#" method="post" id="form" name="form">
          
 <input type="text" id="nome" name="nome" autofocus="autofocus" maxlength="255" size="60" required="required" placeholder="Nome" value="" /><br>
                  
<input type="email" id="email" name="email" maxlength="100" size="60" required="required" placeholder="E-mail" value="" /><br>
                  
 <input type="text" id="assunto" name="assunto" maxlength="100" size="60" required="required" placeholder="Assunto" value="" /><br>

<input name="CEP" id="CEP" required pattern="\d{5}-?\d{3}" />
              
 <textarea id="msg" name="msg" cols="30" rows="10" maxlength="1000" required="required" placeholder="Descrição"></textarea><br>
              
                <button class="botaolaranja botao2" type="submit" id="enviar" name="enviar">Enviar</button>
          
 </form>


O formulario ficara assim:



Alguns atributos HTML 5 foram usados nesse formulario, abaixo vamos explicar quais e sua funcionalidade.

placeholder

Esse atributo exibirá o texto dentro do campo input como vemos no exemplo acima, isso torna nosso formulário muito mais elegante.

autofocus

Ao ser carregada a página, o focu do mouse será automaticamente direcionado ao campo respectivo. Isso economiza tempo comparada as outra soluções em javascript e tudo mais.

maxlength

Esse atributo já existia anteriormente porém a novidade e que esse atributo foi corrigido alguns problemas, agora podemos aplicar também em uma textarea podendo assim limitar a quantidade de caracteres.

 required

Required é uma função muito importante para a validação de um formulario,  essa função não permite que o formulario seja postado com o campo vazio. O campo em que este atributo estiver se tornara obrigatório.

  pattern

O atributo pattern nos permiti validar o campo de forma mais objetiva, por exemplo o campo cep usamos uma expressão regular e só permite o usuário preencher com 5 numeros, traço e 3 numeros no final.

type 

 O type é um atributo que define o tipo de campo que esta sendo criado, o html 5 trouxe muitas novidades como email, number, month, range, datetime por ai vai. Para saber mais sobre o atributo type e seus valores veja o post Novos campos input type html 5

Nenhum comentário:

Postar um comentário