Aula 15 — Formulários no HTML (introdução)

Formulários permitem que o usuário envie informações para um site. Eles são usados para login, cadastro, contato, pesquisa e muito mais.

Nesta aula, vamos entender a estrutura básica de um formulário em HTML.

A tag <form>

Todo formulário começa com a tag <form>. Ela indica onde o formulário começa e termina.

 <form> </form> 

Dentro dela ficam os campos que o usuário preenche.

Campos de entrada com <input>

A tag <input> cria campos de entrada de dados.

Ela também é uma tag vazia.

 <input> 

O comportamento do <input> depende do atributo type.

Tipos comuns de <input>

• text — texto comum
• email — e-mail
• password — senha
• submit — envio do formulário

   
<input type="text"> 
<input type="email"> 
<input type="password"> 
<input type="submit" value="Enviar"> 

O código acima resultará na seguinte página sendo criada:

Rótulos com <label>

O <label> serve para identificar um campo. Ele melhora muito a acessibilidade.

   
    <label>Nome</label> 
    <input type="text"> 

O código acima resultará na seguinte página sendo criada:

O ideal é ligar o <label> ao campo usando o atributo for.

 <label for="nome">Nome</label> <input type="text" id="nome"> 

O valor presente no parâmetro "for", do campo label, precisa ser exatamente igual ao valor do parâmetro "id" do input. Isso promove o vínculo entre eles.

Exemplo completo de formulário simples

  <form> 
    <label for="email">E-mail</label> 
    <input type="email" id="email">
    <br /> <br />
    <label for="senha">Senha</label>
    <input type="password" id="senha">
    <br /> <br />
    <input type="submit" value="Entrar">
  </form>

O código acima resultará na seguinte página sendo criada:

Lembrando que a tag <br /> insere uma quebra de linha.

Formulários são estrutura, não validação

Nesta fase do curso, o foco é:

• Estrutura correta
• Semântica
• Acessibilidade

Validação e comportamento vêm depois, com HTML5 e JavaScript.

Na próxima aula, vamos aprender sobre campos modernos de formulário (HTML5) e validação nativa do navegador.