Curso de HTML / Usar textarea, select, option y button en formularios

Utiliza textarea para texto de varias líneas, select con option para una lista de elecciones y button para una acción explícita. Sus valores iniciales y sus comportamientos no se configuran del mismo modo. En un formulario conviene indicar siempre si un botón envía, reinicia o realiza otra acción programada.

Introducir varias líneas con textarea

textarea tiene apertura y cierre. Su valor inicial va entre ambas etiquetas, no en un atributo value:

<label for="message">Your message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>

rows y cols influyen en el tamaño inicial, mientras que CSS permite ajustarlo al espacio disponible. name da la clave para enviar el contenido. Si escribes una frase entre las etiquetas, pasa a ser un valor real que se puede enviar, no una simple ayuda.

Para sugerir una respuesta breve existe placeholder, que no sustituye a la etiqueta visible. La comparación entre ayuda y valor inicial permite probar esa diferencia. Elige textarea cuando una respuesta larga necesite espacio de edición, en lugar de forzar un input de una sola línea.

Mostrar opciones y enviar sus valores

En el siguiente selector se ve un nombre legible, pero se envía el valor de la opción:

<label for="topic">Topic</label>
<select id="topic" name="topic">
  <option value="order">Orders</option>
  <option value="delivery">Delivery</option>
  <option value="other">Other</option>
</select>

Si la persona elige Orders, la clave topic recibe order. El id conecta el control con el label; name nombra el dato. Conserva valores que el servidor pueda interpretar.

Sin una elección explícita, un selector sencillo suele comenzar con su primera opción. Si debe tomarse una decisión consciente, añade una primera opción de valor vacío y required al select. Si existe una opción predeterminada razonable, puede ser preferible ofrecerla en lugar de obligar a confirmar un marcador vacío.

Observar selección obligatoria y reinicio

Guarda el documento siguiente como controls.html en UTF-8. Incluye CSS para limitar la anchura de los controles y un botón de reinicio con finalidad comparativa.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form controls practice</title>
  <style>
    textarea, select { box-sizing: border-box; max-width: 100%; font: inherit; }
    textarea { width: 24rem; }
  </style>
</head>
<body>
  <h1>Practice contact controls</h1>
  <form id="controls-form" method="get">
    <p><label for="topic-choice">Topic</label>
      <select id="topic-choice" name="topic" required>
        <option value="">Choose a topic</option>
        <option value="order">Orders</option>
        <option value="delivery">Delivery</option>
      </select></p>
    <p><label for="message-text">Message</label>
      <textarea id="message-text" name="message" rows="4">Test question</textarea></p>
    <button type="submit">Inspect entered values</button>
    <button type="reset">Restore initial values</button>
  </form>
</body>
</html>

Intenta enviarlo sin cambiar “Choose a topic”: la selección obligatoria debe impedirlo. Escoge Delivery, modifica el mensaje y envía. El valor asociado al tema es delivery, no la etiqueta visible.

Vuelve a editar el formulario y usa “Restore initial values”. El selector regresa a la primera opción y el mensaje vuelve a “Test question”. Reiniciar no significa siempre vaciar: un control con valor inicial recupera ese valor. Para comparar el estado de partida, vuelve a abrir el archivo original.

Expresar el tipo de cada botón

En los formularios ordinarios del ejemplo, un botón sin un tipo apropiado puede actuar como envío. Evita esa ambigüedad utilizando type="submit", type="reset" o type="button" según el propósito.

<form method="get">
  <label for="note">Note</label>
  <textarea id="note" name="note" rows="4"></textarea>
  <button type="submit">Submit</button>
  <button type="reset">Reset entries</button>
</form>

Este fragmento vuelve a ilustrar envío y reinicio. type="button" evita un envío accidental, pero no inventa una acción personalizada: para hacer algo distinto necesita el comportamiento correspondiente, por ejemplo un script.

Un botón reset puede borrar el trabajo de una persona. En un formulario real, inclúyelo solo si tiene una utilidad clara y una ubicación que no se confunda con el envío. Revisa teclado, foco y etiquetas además del resultado visible.

Verificar valores sin atribuir un envío real al ejemplo

La práctica GET permite observar parámetros cuando se sirve desde un servidor y el navegador realiza la navegación. Un archivo local no equivale a un manejador que reciba o guarde mensajes. La inspección de formularios distingue la lista de valores, la petición y el resultado del servidor.

Las referencias de textarea, select y button de MDN permiten consultar los atributos específicos. Cambia una condición cada vez para saber si un fallo corresponde al valor inicial, a una restricción o al tipo de botón.