quinta-feira, 25 de agosto de 2011

Validando campos com HTML5

Olá meus amigos tudo bem? Ando sempre na correria mas mesmo assim me viro para colocar algo interessante aqui no meu Blog...
Hoje já que tenho pouco tempo vou ensinar uma coisa simples mas MUITO útil que é a validação de campos com HTML5.


Deus obrigado por permitir a criação do HTML5 -> brisa


Uma coisa que sempre fazemos no desenvolvimento para WEB é validar formulários e já que  o HTML não faz isso nativamente somos obrigados a utilizar Javascript. Mas felizmente pensaram nisso e o HTML5 não passa mais por esse problema agora temos tipos de campos nos inputs mais apropriados, por exemplo: 
  • Tel -> Para telefone (sem formatação por não existir padrão)
  • Number -> Tipos númericos
  • Search-> Para pesquisas
  • email -> Para e-mails
  • url -> Links url


E a forma de monta-los é intuitiva com exceção certos casos por exemplo o número:
<input name="numero" type="number" step="1" min="1" max="10">

Nesse input acima do tipo numerico ele só aceita de 0 a 10 e passa de 1 em 1 

E já que o HTML5 vem com todas essas opções existe o required para colocar nos inputs isso significa que o campo é obrigatório por exemplo:<input name="nome" type="text" required>
Pronto, sem utilizar javascript já dizemos que o campo é obrigatório, para tornar isso mais legal que tal colocar um texto no input? Mas aquele texto informativo apenas, esse é o PLACEHOLDER e coloca-lo também é simples olha:

 
<input name="nome" type="text" placeholder="Digite seu nome" required>

Como diz um amigo meu: "Agora a vida faz sentido..."

rsrsrs

Espero ter ajudado nessa explicação relâmpago.

Obrigado!





3 comentários:

  1. Manu, saiu uma lagrima do meu olho agora. To muito emocionado...
    Gayzices a parte, muito bom, primeira funcionalidade legar que eu vi de html, valews!

    ResponderExcluir
  2. Ajuda? Preciso fazer um campo text só aceitar números. Só dá pra fazer isso com javascript? Obrigada!

    ResponderExcluir
  3. Tem o codigo acima senhorita
    "E a forma de monta-los é intuitiva com exceção certos casos por exemplo o número:
    input name="numero" type="number" step="1" min="1" max="10""

    ResponderExcluir