Tipos de control

Tipos de <input>

Un mismo <input> se transforma según su type. Elegir el correcto no es un capricho: en el móvil, un type="email" saca el teclado con la @ a mano, y un type="number" saca el teclado numérico. El usuario lo agradece. Los más habituales:

<input type="text" />      <!-- texto de una línea -->
<input type="email" />     <!-- correo (teclado y validación adecuados) -->
<input type="password" />  <!-- oculta lo escrito -->
<input type="number" />    <!-- numérico, con min/max -->
<input type="checkbox" />  <!-- casilla independiente (sí/no) -->
<input type="radio" />     <!-- opción exclusiva dentro de un grupo -->

Casillas (checkbox): cada una vive su vida; son ese "acepto los términos" que se activa o no.

Radios (radio): forman un grupo cuando comparten el mismo name. Ahí está el truco: ese name compartido es lo que hace que elegir uno desmarque al resto. El usuario solo puede quedarse con una opción del grupo (como elegir plan de suscripción):

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

Texto largo: <textarea>

Para varias líneas (un comentario, una descripción) se usa <textarea>, que sí lleva etiqueta de cierre:

<label for="mensaje">Mensaje</label>
<textarea id="mensaje" name="mensaje" rows="4"></textarea>

Listas desplegables: <select> y <option>

<select> muestra una lista de opciones; cada opción es un <option>:

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

Botones: <button>

El atributo type del <button> cambia su comportamiento:

• type="submit" (valor por defecto dentro de un <form>): envía el formulario.
• type="button": un botón normal que no envía nada (lo controlas con JavaScript).

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

⚠️ TRAMPA CLÁSICA: un <button> sin type dentro de un <form> se comporta como submit. Por eso ese botón "Cancelar" que pusiste a veces te envía el formulario sin querer. Indica siempre el type y duermes tranquilo.