Controles adicionales: <textarea>, <select>, <fieldset>

Ya sabés construir el formulario básico con <input> y <label>. Ahora sumás tres controles que amplían el vocabulario: texto multilínea, menú desplegable y agrupación semántica.

---

<textarea>: entrada de texto multilínea

<textarea> crea un campo que acepta múltiples líneas. Útil para comentarios, mensajes, descripciones largas.

<!-- textarea con su label -->
<label for="bio">Sobre mí</label>
<textarea id="bio" name="bio" rows="4"></textarea>

Tres diferencias clave respecto a <input type="text">:

1. No es void: <textarea> tiene etiqueta de apertura Y de cierre. A diferencia de <input>, no se auto-cierra.
2. El valor va entre las etiquetas, no en value: si el textarea debe tener texto prefijado, va entre <textarea> y </textarea>.
3. Es redimensionable por el usuario (por defecto en la mayoría de navegadores).

<!-- ❌ MAL: value no existe en textarea — el navegador lo ignora silenciosamente -->
<textarea name="comentario" value="Escribe aquí..."></textarea>

<!-- ✅ BIEN: el texto prefijado va entre las etiquetas -->
<textarea name="comentario">Escribe aquí...</textarea>

<!-- ✅ TAMBIÉN BIEN: vacío (sin valor prefijado) -->
<textarea name="comentario"></textarea>

Los atributos rows y cols controlan el tamaño visible (en caracteres), no el límite de texto. En la práctica, el tamaño se controla con CSS — eso es Bloque II.

---

<select> y <option>: menú desplegable

<select> crea un menú desplegable. Sus opciones son elementos <option> anidados.

<label for="pais">País</label>
<select id="pais" name="pais">
  <option value="argentina">Argentina</option>
  <option value="chile">Chile</option>
  <option value="mexico">México</option>
</select>

El atributo value en <option> vs el texto visible:

• El texto entre <option> y </option> es lo que el usuario ve en el dropdown.
• El atributo value es lo que se envía al servidor como dato.
• Si <option> no tiene value, se envía el texto visible — error frecuente cuando el texto tiene tildes, espacios o capitalización no deseada.

<!-- ❌ MAL: sin value, se envía el texto visible "Argentina" -->
<option>Argentina</option>

<!-- ✅ BIEN: el value controla exactamente qué se envía -->
<option value="argentina">Argentina</option>

El atributo selected marca una opción como seleccionada por defecto:

<option value="chile" selected>Chile</option>

Patrón común — una primera opción como instrucción con value="":

<select id="pais" name="pais">
  <option value="">-- Seleccioná un país --</option>
  <option value="argentina">Argentina</option>
  <option value="chile">Chile</option>
</select>

---

<fieldset> y <legend>: agrupación semántica

<fieldset> agrupa campos relacionados. <legend> es el título del grupo — va siempre como primer hijo del <fieldset>.

<fieldset>
  <legend>Datos de contacto</legend>

  <label for="nombre">Nombre</label>
  <input type="text" id="nombre" name="nombre">

  <label for="correo">Correo electrónico</label>
  <input type="email" id="correo" name="correo">
</fieldset>

Por qué importa más allá de lo visual: el <fieldset> genera un grupo de formulario en el árbol de accesibilidad. Los lectores de pantalla leen el texto del <legend> cuando el foco entra a cualquier control del grupo — el usuario escucha “Datos de contacto: Nombre — campo de texto” sin tener que explorar la página.

Sin CSS, el <fieldset> renderiza con un borde y el <legend> flota en ese borde. Ese es el estilo por defecto del navegador — en la práctica se resetea con CSS (Bloque II), pero en CAT-09 es suficiente para ver la agrupación.

Caso de uso clásico — grupo de radio buttons:

<fieldset>
  <legend>Método de pago</legend>

  <input type="radio" id="credito" name="pago" value="credito">
  <label for="credito">Tarjeta de crédito</label>

  <input type="radio" id="debito" name="pago" value="debito">
  <label for="debito">Tarjeta de débito</label>
</fieldset>

En el sandbox el formulario no se envía y la validación no se dispara, pero el check confirma que tu marcado es correcto; en un navegador real con servidor funcionaría.

---

Tu turno: armá el formulario de perfil con un <fieldset> “Información personal” que contenga un textarea para bio, un select de país con exactamente 3 opciones con sus value, y un <button type="submit">Guardar perfil</button>. Luego hacé clic en “Comprobar”.