O formulário, input e label

O elemento <form>

É aqui que começa a conversa com o seu usuário. Toda vez que alguém se cadastra, faz login ou te manda uma mensagem por um formulário de contato, os dados passam por um <form>. É o canal pelo qual o seu app recebe informação do mundo lá fora.

Todos os controles (caixas de texto, caixas de seleção, botões) ficam agrupados dentro dele:

<form>
  <!-- aqui vão os controles -->
</form>

O controle mais básico: <input>

<input> é uma tag sem fechamento que, conforme seu atributo type, se transforma em diferentes controles (uma caixa de texto, uma caixa de seleção, etc.). É o camaleão do formulário.

O atributo name é a chave com a qual o dado viaja. ⚠️ PEGADINHA CLÁSSICA: se você esquecer o name, o campo aparece, o usuário preenche... e nada é enviado. Como falar sem ninguém ouvindo.

<input type="text" name="cidade" />

O par <label> + <input>: chave da acessibilidade

Um campo sem rótulo é uma prova sem enunciado: o usuário não sabe o que digitar e um leitor de tela não sabe como anunciar o controle. A solução é <label>.

A forma mais robusta de uni-los é por referência: o atributo for do <label> aponta para o id do <input>. ⚠️ PEGADINHA CLÁSSICA: eles devem coincidir exatamente (um for="email" precisa de um id="email", não de id="mail"):

<label for="email">Endereço de e-mail</label>
<input type="email" id="email" name="email" />

Isso traz três vantagens concretas:

• Acessibilidade: os leitores de tela leem "Endereço de e-mail" ao focar o campo.
• Usabilidade: ao clicar no texto do <label>, o foco salta para o controle (muito útil em caixas de seleção e radios, que são pequenos).
• Clareza semântica: fica explícito qual rótulo descreve qual controle.

Regra de ouro: todo controle de formulário deve ter um <label> associado. Se você usar for/id, garanta que os valores sejam idênticos e únicos na página.

Também existe a variante envolvente (<label>texto <input /></label>), mas for/id é mais explícita e é validada com maior confiabilidade. Pegue carinho por essa dupla: você vai vê-la em todos os formulários do planeta.