Noções de formulários

Clique na palavra Email ao lado de um campo de formulário bem feito e o cursor pula para dentro da caixa. Esse pequeno detalhe é o elemento label fazendo o trabalho dele.

O que um formulário faz

Caixas de busca, páginas de cadastro e telas de pagamento são todas formulários. Um elemento <form> agrupa os controles e, quando o visitante o envia, o navegador manda o name de cada controle junto com o valor dele para o endereço do atributo action do formulário. O atributo method diz como: get põe os dados no endereço, o que serve para buscas que você pode querer salvar nos favoritos, enquanto post os envia no corpo da requisição, o que serve para tudo o que altera dados, como um pedido. O HTML monta o formulário; um programa no servidor decide o que fazer com o que chega.

<form action="/subscribe" method="post">
  <label for="name">Name</label>
  <input id="name" name="name" type="text" autocomplete="name">

  <label for="email">Email</label>
  <input id="email" name="email" type="email" required autocomplete="email">

  <button type="submit">Subscribe</button>
</form>

Todo controle precisa de um label

O elemento <label> dá nome a um controle. Ligue os dois dando ao input um id e ao label um atributo for igual, ou colocando o input dentro do label. A ligação faz duas coisas. Os leitores de tela leem o label quando o campo recebe o foco, então o usuário ouve Email, editar texto em vez de só editar texto. E clicar no label põe o foco no campo ou marca a caixa de seleção, o que dá a todos, principalmente a quem usa celular, um alvo maior. Um placeholder (texto de dica cinza dentro da caixa) não é um label: ele some assim que você digita, muitas vezes tem pouco contraste, e algumas tecnologias assistivas o ignoram.

Tipos de input

O atributo type de <input> muda o controle. text é a caixa padrão de uma linha. email, tel e url parecem iguais, mas mostram o teclado certo no celular, e o navegador confere se um endereço de e-mail tem o formato certo. number aceita algarismos e pode ter min e max. password esconde o que você digita, date oferece um calendário, e checkbox e radio são caixas para marcar. Para textos mais longos, use <textarea>, e para escolher numa lista, <select> com elementos <option> dentro.

Como agrupar opções

Os botões de opção (radio) de uma mesma pergunta têm o mesmo name, e só um deles pode ser escolhido de cada vez. Envolva o grupo em <fieldset> e coloque a pergunta em <legend>. Assim o leitor de tela lê a pergunta junto com cada opção: Loaf size, Small, botão de opção, 1 de 2. Cada botão de opção continua tendo o seu próprio label.

Botões e verificações embutidas

Um <button> dentro de um formulário o envia por padrão; escrever type="submit" deixa isso claro, e type="button" cria um botão que não faz nada até o JavaScript lhe dar uma tarefa. Antes de enviar, o navegador pode verificar os campos por você. required barra o formulário se o campo estiver vazio, type="email" recusa texto sem @, e minlength, min e max definem limites. Essas verificações ajudam o visitante a corrigir erros cedo, mas rodam no navegador dele e podem ser contornadas, então o servidor precisa verificar os dados de novo. O atributo autocomplete, com valores como email ou name, permite que o navegador preencha dados salvos, o que poupa digitação para todos e ajuda especialmente pessoas com dificuldades motoras ou de memória.