Tema 19 · Formularios

Select, Textarea, Datalist y Output

Aprende a construir selectores desplegables, áreas multilínea, sugerencias autocompletables con <datalist> y resultados de cálculo con <output>.

Atributos y Validación Nativa Audio y Video Nativo HTML5

Más Allá del Elemento <input>

Aunque <input> es el control más versátil, los formularios complejos requieren otros elementos nativos para áreas de texto extensas, listas desplegables y sugerencias inteligentes.

Elemento Función Atributos Clave
<textarea> Área de texto de varias líneas para comentarios, descripciones o mensajes de soporte. rows="4", cols="50", maxlength="500"
<select> Menú desplegable de opciones predeterminadas con <option>. multiple, size="3"
<optgroup> Agrupa opciones relacionadas dentro de un <select> bajo un encabezado en negrita. label="Categoría"
<datalist> Provee una lista de autocompletado nativa vinculada a un <input> mediante su atributo list. id="nombre-lista"
<output> Muestra el resultado visual de un cálculo o interacción en el formulario. for="input1 input2"

La Magia de <datalist>

A diferencia de un <select> (que obliga a elegir estrictamente entre una lista cerrada), un <datalist> permite al usuario escribir libremente cualquier texto o seleccionar una sugerencia que se filtra en vivo mientras escribe: 

<label for="navegador">Navegador favorito:</label>
<input list="navegadores" id="navegador" name="navegador">

<datalist id="navegadores">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Apple Safari">
  <option value="Microsoft Edge">
</datalist>

⚡ Controles Avanzados de Formulario

Escribe una letra en el campo de país para ver el autocompletado de datalist, o desplaza la barra para ver el valor actualizado en el elemento output:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Elementos Avanzados de Formulario</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-form { max-width: 520px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 22px; }
    .campo { margin-bottom: 14px; }
    label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 4px; color: #1e293b; }
    select, textarea, input[type="text"] {
      width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 6px;
    }
    textarea { resize: vertical; min-height: 70px; }
    .slider-box { display: flex; align-items: center; gap: 12px; }
    output { font-weight: bold; color: #0284c7; min-width: 40px; }
  </style>
</head>
<body>

  <div class="card-form">
    <h3 style="margin-top: 0; color: #0f172a;">Encuesta de Satisfacción</h3>

    <form oninput="resultado.value = barra.value">
      <!-- Selector agrupado con optgroup -->
      <div class="campo">
        <label for="curso-seleccion">Curso de Interés (Select con Optgroup):</label>
        <select id="curso-seleccion" name="curso">
          <optgroup label="Frontend">
            <option value="html5">HTML5 y Accesibilidad</option>
            <option value="css3">CSS3 y Grid/Flexbox</option>
            <option value="js">JavaScript ES6+</option>
          </optgroup>
          <optgroup label="Backend">
            <option value="php">PHP 8.3 Moderno</option>
            <option value="mysql">Bases de Datos MySQL</option>
          </optgroup>
        </select>
      </div>

      <!-- Autocompletado con Datalist -->
      <div class="campo">
        <label for="campo-pais">País de Residencia (Escribe para filtrar con Datalist):</label>
        <input list="lista-paises" id="campo-pais" name="pais" placeholder="Escribe 'Col' o 'Esp'...">
        <datalist id="lista-paises">
          <option value="Colombia">
          <option value="España">
          <option value="México">
          <option value="Argentina">
          <option value="Chile">
          <option value="Perú">
        </datalist>
      </div>

      <!-- Cálculo con Output en Vivo -->
      <div class="campo">
        <label for="barra">Nivel de Satisfacción (Output dinámico):</label>
        <div class="slider-box">
          <input type="range" id="barra" name="nivel" min="0" max="100" value="85" style="flex: 1;">
          <output name="resultado" for="barra">85</output> <span>/ 100</span>
        </div>
      </div>

      <!-- Área de Texto Multilínea -->
      <div class="campo">
        <label for="comentarios">Comentarios o Sugerencias (Textarea):</label>
        <textarea id="comentarios" name="comentarios" rows="3" placeholder="Escribe aquí tu opinión..."></textarea>
      </div>
    </form>
  </div>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de HTML5 y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno HTML/CSS/BS5 Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.