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