Tipos de controle

Tipos de <input>

Um mesmo <input> se transforma conforme o seu type. Escolher o certo não é firula: no celular, um type="email" abre o teclado com o @ à mão, e um type="number" abre o teclado numérico. O usuário agradece. Os mais comuns:

<input type="text" />      <!-- texto de uma linha -->
<input type="email" />     <!-- e-mail (teclado e validação adequados) -->
<input type="password" />  <!-- oculta o que é digitado -->
<input type="number" />    <!-- numérico, com min/max -->
<input type="checkbox" />  <!-- caixa de seleção independente (sim/não) -->
<input type="radio" />     <!-- opção exclusiva dentro de um grupo -->

Caixas de seleção (checkbox): cada uma vive a sua vida; são aquele "aceito os termos" que liga ou desliga.

Radios (radio): formam um grupo quando compartilham o mesmo name. Aí está o pulo do gato: esse name compartilhado é o que faz escolher um desmarcar os outros. O usuário só pode ficar com uma opção do grupo (como escolher um plano de assinatura):

<input type="radio" name="plan" id="plan-free" value="free" />
<label for="plan-free">Grátis</label>
<input type="radio" name="plan" id="plan-pro" value="pro" />
<label for="plan-pro">Pro</label>

Texto longo: <textarea>

Para várias linhas (um comentário, uma descrição) usa-se <textarea>, que sim leva tag de fechamento:

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

Listas suspensas: <select> e <option>

<select> mostra uma lista de opções; cada opção é um <option>:

<label for="pais">País</label>
<select id="pais" name="pais">
  <option value="es">Espanha</option>
  <option value="mx">México</option>
  <option value="ar">Argentina</option>
</select>

Botões: <button>

O atributo type do <button> muda seu comportamento:

• type="submit" (valor padrão dentro de um <form>): envia o formulário.
• type="button": um botão normal que não envia nada (você o controla com JavaScript).

<button type="submit">Enviar</button>
<button type="button">Cancelar</button>

⚠️ PEGADINHA CLÁSSICA: um <button> sem type dentro de um <form> se comporta como submit. É por isso que aquele botão "Cancelar" que você colocou às vezes envia o formulário sem querer. Indique sempre o type e durma tranquilo.