HTML
select, option, optgroup, datalist y textarea
Cómo crear selecciones, sugerencias y campos multilínea con select, option, optgroup, datalist y textarea, incluyendo valores y accesibilidad.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
HTML
Cómo crear selecciones, sugerencias y campos multilínea con select, option, optgroup, datalist y textarea, incluyendo valores y accesibilidad.
<label for="country">País</label>
<select id="country" name="country">
<option value="co">Colombia</option>
<option value="mx">México</option>
<option value="es">España</option>
</select>El texto se muestra al usuario; value es el dato enviado.
Si se omite value, se utiliza el texto de option normalizado según las reglas del elemento.
<select name="size" required>
<option value="" selected disabled>
Selecciona una talla
</option>
<option value="small">Pequeña</option>
<option value="medium">Mediana</option>
</select>La primera opción representa ausencia. Debe existir también un label visible.
selected define el estado inicial; no necesitas usarlo si la primera opción ya es la selección predeterminada.
<option value="active">Activo</option>Puede usar:
selected.disabled.label en contextos específicos.value.Una option disabled puede mostrarse, pero no seleccionarse normalmente.
<select name="technology">
<optgroup label="Frontend">
<option value="react">React</option>
<option value="vue">Vue</option>
</optgroup>
<optgroup label="Backend">
<option value="node">Node.js</option>
</optgroup>
</select>Agrupa opciones relacionadas. El label del grupo no es seleccionable.
No anides optgroups.
<label for="skills">Tecnologías</label>
<select id="skills" name="skills" multiple size="6">
<option value="javascript">JavaScript</option>
<option value="typescript">TypeScript</option>
<option value="html">HTML</option>
</select>Permite varias selecciones y envía entradas repetidas con el mismo name.
La interacción con teclado y modificadores puede no ser evidente. Para pocas opciones, un grupo de checkboxes suele ser más comprensible.
<select size="5">...</select>Define cuántas filas se muestran aproximadamente. Con valor mayor que 1, el control se presenta como lista.
<label for="framework">Framework</label>
<input id="framework" name="framework" list="framework-options">
<datalist id="framework-options">
<option value="React"></option>
<option value="Vue"></option>
<option value="Svelte"></option>
</datalist>Ofrece sugerencias, pero el usuario puede escribir otro valor.
No uses datalist cuando el servidor acepta únicamente un conjunto cerrado sin validar después.
La interfaz, filtrado y anuncio varían entre navegadores y tecnologías de asistencia. Para una búsqueda compleja o gran catálogo puede ser necesario un combobox accesible probado, no un datalist asumido como solución universal.
<label for="message">Mensaje</label>
<textarea
id="message"
name="message"
rows="6"
maxlength="1000"
></textarea>Captura texto multilínea.
<textarea name="message">Texto inicial</textarea>No utiliza atributo value para el valor inicial en markup.
La indentación también puede entrar en el valor:
<textarea>
Texto
</textarea>puede comenzar con espacios. Coloca el texto deliberadamente.
<textarea rows="6" cols="40"></textarea>Sugieren dimensiones iniciales. CSS controla el tamaño final.
No confundir cols con maxlength.
<textarea wrap="soft"></textarea>
<textarea wrap="hard" cols="40"></textarea>soft: los saltos visuales no se añaden al valor enviado.hard: puede insertar saltos de línea según ancho al enviar.Utiliza hard solo cuando ese formato forma parte del contrato.
CSS puede permitir o impedir redimensionar. Evita bloquear resize si el usuario puede necesitar más espacio, salvo que exista una alternativa clara.
Cuando JavaScript cambia opciones, conserva:
No reemplaces un select nativo por un div estilizado sin implementar teclado, foco, selección y nombres.
<div>
<label for="project-type">Tipo de proyecto</label>
<select id="project-type" name="projectType" required>
<option value="">Selecciona una opción</option>
<option value="web-application">Aplicación web</option>
<option value="frontend">Desarrollo frontend</option>
<option value="mvp">MVP desde cero</option>
</select>
</div>
<div>
<label for="project-context">Contexto del proyecto</label>
<textarea
id="project-context"
name="context"
rows="8"
maxlength="2000"
></textarea>
</div>¿Por qué datalist no debería usarse como única validación de una lista cerrada?
Porque el usuario puede escribir un valor que no aparece en las sugerencias; el servidor debe validar el conjunto permitido.
Buttons y comportamiento de envío distingue acciones, submit, reset e imágenes.