Campos e rótulos: o formulário de contato · HTML do zero

O formulário

<form action="https://formulario.exemplo/contato" method="post">
  <label for="nome">Nome completo</label>
  <input type="text" id="nome" name="nome" />

  <button type="submit">Enviar mensagem</button>
</form>

action; para onde os dados vão
method; post para enviar dados, get para busca
<button type="submit">; envia

`label`: o par que não pode faltar

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

O for do label aponta para o id do campo. É esse par que cria o vínculo - estar ao lado na tela não liga nada.

O que se ganha:

O leitor de tela anuncia "Nome completo, campo de texto" em vez de só "campo de texto".
Clicar no rótulo põe o cursor no campo. No celular, isso transforma um alvo de 16 pixels de altura num alvo de 40: e é a diferença entre acertar e errar com o polegar.

O placeholder tem lugar: como exemplo, ao lado do rótulo, nunca no lugar dele.

<label for="email">E-mail</label>
<input type="email" id="email" name="email" placeholder="[email protected]" />

`id` e `name` são coisas diferentes

Atributo	Serve para
`id`	ligar o rótulo ao campo, e ser único na página
`name`	ser a chave do dado quando o formulário envia

Sem name, o campo não é enviado. É um erro que passa despercebido: o formulário parece funcionar, e o dado simplesmente não chega.

Os tipos de `input`

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

<label for="email">E-mail</label>
<input type="email" id="email" name="email" />

<label for="telefone">Telefone com WhatsApp</label>
<input type="tel" id="telefone" name="telefone" />

<label for="prazo">Prazo desejado</label>
<input type="date" id="prazo" name="prazo" />

<label for="orcamento">Orçamento aproximado</label>
<input type="number" id="orcamento" name="orcamento" min="0" step="100" />

O type faz duas coisas: muda a validação do navegador e muda o teclado que o celular abre.

`type`	Teclado no celular
`text`	comum
`email`	comum, com `@` visível
`tel`	numérico de discagem
`number`	numérico com setas
`date`	seletor de data

Escolher entre opções

Num formulário de contato, um <select> de assunto poupa uma frase de quem escreve e organiza a sua caixa de entrada:

<label for="assunto">Assunto</label>
<select id="assunto" name="assunto">
  <option value="">Selecione</option>
  <option value="projeto">Um projeto</option>
  <option value="vaga">Uma vaga</option>
  <option value="duvida">Uma dúvida técnica</option>
  <option value="outro">Outro</option>
</select>

Rádio; uma escolha entre poucas:

<fieldset>
  <legend>Como prefere que eu responda?</legend>

  <input type="radio" id="por-email" name="retorno" value="email" />
  <label for="por-email">Por e-mail</label>

  <input type="radio" id="por-whatsapp" name="retorno" value="whatsapp" />
  <label for="por-whatsapp">Por WhatsApp</label>
</fieldset>

Repare: os dois rádios têm o mesmo name. É isso que os faz um grupo, em que só um pode estar marcado. id diferente, name igual.

O <fieldset> com <legend> é o que diz qual é a pergunta. Sem ele, o leitor de tela anuncia "Por e-mail, botão de rádio": e a pessoa não sabe por e-mail o quê.

Caixa de marcar; cada uma independente:

<input type="checkbox" id="copia" name="copia" value="sim" />
<label for="copia">Quero receber uma cópia desta mensagem</label>

Texto longo

O campo principal do formulário de contato:

<label for="mensagem">Mensagem</label>
<textarea id="mensagem" name="mensagem" rows="6"></textarea>

<textarea> abre e fecha, e o valor inicial vai entre as tags: não num atributo value.

O formulário de contato completo

<h2>Envie uma mensagem</h2>
<p>Conte rapidamente do que você precisa. Eu respondo pessoalmente.</p>

<form action="https://formulario.exemplo/contato" method="post">
  <fieldset>
    <legend>Quem está falando</legend>

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

    <label for="email">E-mail</label>
    <input
      type="email"
      id="email"
      name="email"
      autocomplete="email"
      placeholder="[email protected]"
    />
  </fieldset>

  <fieldset>
    <legend>Sobre o que</legend>

    <label for="assunto">Assunto</label>
    <select id="assunto" name="assunto">
      <option value="">Selecione</option>
      <option value="projeto">Um projeto</option>
      <option value="vaga">Uma vaga</option>
      <option value="duvida">Uma dúvida técnica</option>
    </select>

    <label for="mensagem">Mensagem</label>
    <textarea id="mensagem" name="mensagem" rows="6"></textarea>
  </fieldset>

  <button type="submit">Enviar mensagem</button>
</form>

Três campos obrigatórios e um opcional. Todo campo a mais é gente a menos enviando: cada pergunta que você faz antes de conhecer a pessoa é um motivo para ela desistir e fechar a aba.

O plano B honesto

Enquanto não houver servidor, o formulário fica na página como estrutura - você vai estilizá-lo no curso de CSS - e ao lado dele fica o caminho que funciona hoje:

<h2>Canais diretos</h2>
<dl>
  <dt>E-mail</dt>
  <dd><a href="mailto:[email protected]">[email protected]</a></dd>

  <dt>WhatsApp</dt>
  <dd><a href="https://wa.me/5597999998888">(97) 99999-8888</a></dd>

  <dt>Onde estou</dt>
  <dd>Benjamin Constant - AM, tríplice fronteira</dd>

  <dt>Tempo de resposta</dt>
  <dd>Até dois dias úteis</dd>
</dl>

No portfólio

A página contato.html fica pronta de estrutura:

<h1> "Vamos construir algo juntos" e um parágrafo de abertura;
o <h2> "Canais diretos" com a <dl> de e-mail, WhatsApp, localização e tempo de resposta;
o <h2> "Envie uma mensagem" com o <form>;
todo campo com id, name e um <label for> apontando para ele;
<fieldset> e <legend> em cada grupo;
um <button type="submit"> com texto que diz o que acontece - "Enviar mensagem", não "Enviar".

E no index.html, a seção final: um <h2> com uma pergunta ("Tem um problema que merece atenção?"), um parágrafo e um link para contato.html.

Exercícios

Monte o formulário de contato do seu portfólio com nome, e-mail, assunto e mensagem, cada campo com o seu <label>.
Adicione um <fieldset> com <legend> para agrupar os campos de quem está falando.
Escreva a <dl> de canais diretos, incluindo o tempo de resposta que você consegue cumprir de verdade.
Confira, campo a campo: todo campo tem id, name e um <label for> apontando para ele?
Abra o formulário no celular e toque em cada rótulo, não no campo. O cursor foi para o campo certo?
Conte quantos campos o seu formulário tem. Para cada um, responda: "se eu tirar este, perco a mensagem?" Tire os que sobrarem.

Referências

Seu primeiro formulário - MDN - do zero ao formulário completo
Como estruturar um formulário - MDN - fieldset, legend e agrupamento
HTML Forms - W3Schools - todos os tipos de campo, com editor