Artigos de Tecnologia e Negócios > Front-end

Formulário com form validation do HTML5

Alex Felipe
Alex Felipe

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:

Livro

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:

Livro Autor ISBN Valor Data da compra

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

Livro Autor ISBN Valor Data da compra
Cadastrar

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

Livro Autor ISBN Valor Data da compra
Cadastrar

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:

Livro Autor ISBN Valor Data da compra
Cadastrar

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

Livro Autor ISBN Valor Data da compra
Cadastrar

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!

`` ```

Leia também:

Artigos de Tecnologia e Negócios > Front-end

Cursos profissionais de Front-end é na Alura, comece agora!

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

Premium

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75
à vista R$900
Matricule-se

Premium Plus

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100
à vista R$1.200
Matricule-se

Max

  • 1112 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120
à vista R$1.440
Matricule-se
Procurando planos para empresas?
Acesso por 1 ano
Estude 24h/dia onde e quando quiser
Novos cursos toda semana