<!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>