HTML5 - Tipos de dados e validadores
Conforme foi visto no post anterior, o HTML5 avançou bastante
nos recursos de formulários, facilitando muito a vida de quem precisa
desenvolver aplicações web baseadas em formulários. Neste aprofundarei um pouco
mais no assunto. Para facilitar os testes como os novos atributos, escrevi um
exemplo com parte todo o conteúdo tratado nesse Post.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css"/>
<title>html 5</title>
</head>
<body>
<form name="frmFormulario">
Sem foco: <input name="outro" /><br>
Com foco:<input name="login" autofocus/><br>
Placeholder:
<input name="place" placeholder="Eu uso placeholder"/><br>
Campo obrigatorio: <input name="obrigatorio" required /><br>
maxlength: <input name="max" maxlength="20"/><br>
CEP: <input name="CEP" required pattern="\d{5}-?\d{3}" />
<input type="submit" value="Enviar"/>
<input type="reset" value="Limpar"/>
</form>
</body>
</html>
Autofocos
Ao incluir em um campo de formulário o atributo autofocos, O
foco será colocado neste campo automaticamente ao carregar a página.
Com foco:<input name="login" autofocus/><br>
Placeholder text
Utilizado no campo com forma dinâmica de descrever a sua
funcionalidade.
Placeholder: <input name="place" placeholder="Eu uso placeholder"/><br>
Required
Torna o campo do formulário obrigatório, tornando impossível o
envio dados sem que este campo seja preenchido
Maxlength
Este atributo limita o campo a um determinado quantidade de
caracteres.
maxlength: <input name="max" maxlength="20"/><br>
Validação de formulários
Uma das tarefas mais chatas de se fazer em Javascript é validar
formulários. Infelizmente, é também uma das mais comuns. HTML5 facilita muito
nossa vida ao validar formulários, tornando automática boa parte do processo.
Em muitos casos, todo ele. Você já viu que pode tornar seus campos
"espertos" com os novos valores para o atributo type, que já incluem validação
para datas, emails, URLs e números. Vamos um pouco além.
pattern
O atributo pattern nos permite definir expressões regulares de validação, sem
Javascript.
Veja um exemplo de como validar CEP:
Para dar continuidade aos posts sobre HTML5, escolha um dos links abaixo:
- HTML5 Parte I - Doctype, Html, head, body
- HTML5 Parte II Atributo Type: tel, search, email, url, number, color
- HTML5 Parte III - Validadores: autofocos, placeholder, required, pattern etc.
- HTML5 Parte IV motores de Renderização, utilização de Modernizr e muito mais.
- HTML5 Parte V - details, summary, Drag and Drop e spellcheck
- HTML5 Parte VI - Audio, Video e Codec.
“Não há
gente mais disposta a criticar os que fazem alguma coisa, do que os que não
fazem nada”.
(Deslanche)
0 comentários:
Postar um comentário