Formulário com form validation do HTML5

(Last Updated On: 9 de março de 2016)

Estou desenvolvendo um sistema web que armazenará todos os livros que comprei para poder realizar consultas e verificar se já tenho um livro ou não. Porém, preciso criar um formulário de cadastro em HTML para enviar esses livros para o servidor.
Para fazer um formulário precisamos utilizar a tag form:

<form> 

</form>

Já indicamos que estamos criando um formulário, agora vamos adicionar os campos necessários para fazer o cadastro de um livro!
Preciso do nome do livro, nome do autor, data da compra, valor e ISBN. Mas como adicionamos esses campos no HTML? Para adicionar campos de texto, podemos utilizar a tag input

<form> 
    <input/>
</form>

Verificando nosso primeiro resultado:


Ótimo, criamos o primeiro campo!
Mas tem alguma coisa muito estranha nesse campo...esse campo refere-se a que? Que informação ele vai guardar? É o nome do livro? Nome do autor?
Não dá pra saber que tipo de informação precisamos enviar! Para indicar a que se refere o campo, utilizamos a tag label:

<form> 
    <label>Livro</label>
    <input/>
</form>

Veja nosso primeiro campo:



Já está ficando melhor! Então agora vamos adicionar os demais campos também!

<form> 
    <label>Livro</label>
    <input/>
    <label>Autor</label>
    <input/>
    <label>Valor</label>
    <input/>
    <label>Data da compra</label>
    <input/>
</form>

Já podemos preencher nosso formulário:











Ótimo!
Temos todos os campos que precisamos, mas ainda tem alguma coisa que está faltando: eu preciso enviar esses dados para o servidor. Mas quando eu vou enviar para o servidor? Que tal utilizarmos um elemento que ao clicarmos nele os dados são enviados?
Um botão seria apropriado para isso! Usaremos então a tag button:

<form> 
    <label>Livro</label>
    <input/>
    <label>Autor</label>
    <input/>
    <label>Valor</label>
    <input/>
    <label>Data da compra</label>
    <input/>
    <button>Cadastrar</button>
</form>

Agora podemos até clicar no botão do formulário:













Maravilha! Criamos o nosso formulário, vamos preenchê-lo e verificar se está funcionando como o esperado:













Opa, calma aí!
No sistema que estou desenvolvendo o valor precisar ser apenas um número e a data precisa utilizar o formato dia/mês/ano...mas como podemos fazer com que o campo nos informe que precisa ser preenchido dessa forma? A partir do HTML5 as tags input podem ser validadas através de um recurso chamado form validation. Cada input já permite por padrão a validação de dados e, no nosso caso, validaremos os campos de Valor e Data da compra.
Vamos adicionar esses validadores nos nossos inputs adicionando o parâmetro type:

<label>Livro</label>
<input type="text" value="HTML5 e CSS3"/>
<label>Autor</label>
<input type="text" value="Lucas Mazza"/>
<label>ISBN</label>
<input type="text" value="978-85-66250-05-3"/>
<label>Valor</label>
<input type="number" />
<label>Data da compra</label>
<input type="date" />

Teste os campos de Valor e Data da compra e veja o resultado:













Além de validar nossos dados, o form validation fornece uma outra grande vantagem para os usuários de smartphones: quando você acessa, por exemplo, o campo Valor, ao invés de abrir um teclado de texto comum, abrirá um teclado de números facilitando a vida do usuário na hora de digitar um valor:

Por fim, vamos adicionar um container para o nosso formulário utilizando a tag fieldset e usaremos a tag legend do fieldset para descrever a que o formulário se refere:

<fieldset>
    <legend>Formulário de cadastro de livros</legend>
    <form> 
        <label>Livro</label>
        <input type="text" value="HTML5 e CSS3"/>
        <label>Autor</label>
        <input type="text" value="Lucas Mazza"/>
        <label>ISBN</label>
        <input type="text" value="978-85-66250-05-3"/>
        <label>Valor</label>
        <input type="number" />
        <label>Data da compra</label>
        <input type="date" />
        <button>Cadastrar</button>
    </form>
</fieldset>

Veja o resultado final do nosso formulário:

Formulário de cadastro de livros












Vimos que para criarmos formulário em HTML precisamos utilizar a tag form que indica a criação de um formulário. Vimos também que podemos utilizar a tag input para indicar os campos que queremos no nosso formulário. Além disso, vimos também que podemos utilizar alguns validadores nos nossos inputs a partir do HTML5, como por exemplo, validar data e números. Por fim, vimos como podemos adicionar um container no nosso formulário para descrever o seu objetivo utilizando a tag fieldset

E aí, gostou do formulário? Quer aprender mais sobre HTML e as novidades do HTML5?
No Alura, temos um curso para quem está começando agora com HTML e Front End e outros cursos com que abordam muitos assuntos sobre HTML, CSS e Javascript permitindo que você aprenda de vez e domine o Front End!

Fique por dentro

Content Editor at Alura and Software Developer

  • Tharles Amaro

    Excelente post! Realmente muito simples de entender.

    • Tharles, muito obrigado! Fico feliz que tenha gostado 🙂

  • Luiz Gustavo

    Muito bom o post, porém eu acrescentaria um for nesses labels indicando para qual input cada um se refere, aumentando a acessibilidade. Mas enfim, parabéns cara excelente texto!

    • Obrigado pelo comentário Luiz! Ótima sugestão, eu estou pensando em falar sobre isso em um futuro post sobre como pegar os dados desse mesmo formulário em um servidor, o que acha?

      • Luiz Gustavo

        Fica show Alex, ansioso pela leitura! Abraços

  • Gracyane

    Não funciona no Mozilla?

    • Olá Gracyane, o validation de data infelizmente não funciona para o Firefox, da uma olhada nesse site http://www.wufoo.com/html5/types/4-date.html

      • Gracyane

        Então vejo que não vale a pena utilizá-lo em aplicações reais. O Firefox é um dos navegadores mais utilizados…e eu particularmente deixei de utilizar o Chrome pois ele consume muito do processamento da minha máquina e já vi muitas pessoas reclamando disso.

        Obrigada pela dica do site.

Próximo ArtigoUsando a pasta do Tomcat pelo Eclipse