Formularios II: select, textarea, fieldset y validación nativa

Ya dominas los inputs de una línea. Hoy completas el arsenal: opciones múltiples, texto largo, grupos de campos y los atributos que convierten al navegador en tu primer validador. Al final podrás construir cualquier formulario que te pidan.

Elegir de una lista: select y radio

<label for="pais">País</label>
<select id="pais" name="pais">
<option value="">— Elige —</option>
<option value="co">Colombia</option>
<option value="mx">México</option>
<option value="ar">Argentina</option>
</select>

<fieldset>
<legend>Plan</legend>
<label><input type="radio" name="plan" value="gratis" checked> Gratis</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
</fieldset>

¿Cuándo cuál? select para listas largas (países); radio para 2-5 opciones visibles de un vistazo (planes, sí/no). Los radio del mismo grupo comparten el name — así el navegador sabe que elegir uno deselecciona el otro.

checkbox y textarea

<!-- checkbox: cada uno es independiente (varios pueden marcarse) -->
<label><input type="checkbox" name="temas" value="css"> CSS</label>
<label><input type="checkbox" name="temas" value="js"> JavaScript</label>

<!-- textarea: texto de varias líneas (nota: NO se autocierra) -->
<label for="mensaje">Tu mensaje</label>
<textarea id="mensaje" name="mensaje" rows="4" minlength="20"></textarea>

Validación nativa: el navegador de tu lado

Además del required que ya conoces:

autocomplete merece respeto: bien usado, el navegador llena el formulario por el usuario en un toque. Mal usado (o ausente), obligas a teclear todo en un celular. Detalle pequeño, conversión gigante.

<form>
<fieldset>
  <legend>¿Qué quieres aprender?</legend>
  <label><input type="checkbox" name="temas" value="css" checked> CSS</label>
  <label><input type="checkbox" name="temas" value="js"> JavaScript</label>
</fieldset>
<div>
  <label for="mensaje">¿Por qué? (mínimo 20 caracteres)</label>
  <textarea id="mensaje" name="mensaje" rows="3" minlength="20" required></textarea>
</div>
<button type="submit">Enviar</button>
</form>

body { font-family: system-ui; padding: 24px; color: #1e293b; }
fieldset { border: 1px solid #94a3b8; border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; max-width: 340px; }
legend { font-weight: 600; padding: 0 6px; }
fieldset label { display: block; margin: 4px 0; }
div { display: grid; gap: 4px; max-width: 340px; margin-bottom: 16px; }
div label { font-weight: 600; font-size: 14px; }
textarea { padding: 8px 12px; border: 1px solid #94a3b8; border-radius: 8px; font: inherit; }
button { background: #6D28D9; color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; }

Escribe menos de 20 caracteres en el mensaje y envía: el navegador te frena y explica cuántos faltan. Gratis.

Mini-reto

Amplía tu formulario de registro de la lección pasada: agrega un select de país, un grupo de radios "¿Cómo nos conociste?" (3 opciones, con fieldset) y un textarea de comentarios con minlength="10". Verifica que la validación nativa te frene cuando toca.

Qué sigue

Sales del texto plano: la próxima lección es multimedia — video, audio y las imágenes responsivas con picture y srcset.