<select> en HTML5El elemento <select> en HTML5 se utiliza para crear un menú desplegable que permite a los usuarios seleccionar una opción de una lista predefinida. Este elemento es fundamental en la creación de formularios interactivos y amigables para el usuario.
Atributos principales del elemento <select>:
autofocus: Este atributo booleano indica que el control debe recibir el foco tan pronto como la página haya sido cargada. Solo puede haber un único elemento en un documento con este atributo especificado.
<select autofocus>disabled: Como atributo booleano, indica que el control está inactivo, lo que significa que el usuario no puede interactuar con él. Un elemento de formulario desactivado no se envía con el formulario.
<select disabled>form: Este atributo se utiliza para asociar el control <select> con un formulario en particular. Su valor debe ser el id del formulario con el que se debe asociar.
<form id="myForm"></form>
<select form="myForm">multiple: Este atributo booleano permite seleccionar múltiples opciones dentro del menú desplegable. Sin él, solo se puede seleccionar una opción.
<select multiple>name: Especifica el nombre del control. Este valor se envía al servidor con los datos del formulario.
<select name="options">required: Indica que el control debe ser rellenado antes de que se pueda enviar el formulario.
<select required>size: Define el número de opciones que deben ser visibles a la vez. Funciona tanto con menús desplegables simples como con menús que permiten múltiples selecciones.
<select size="4"><select> en HTML5 con ejemplosA continuación, se presentan ejemplos sencillos de cómo usar el elemento <select> en HTML5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Desplegable Simple</title>
</head>
<body>
<form>
<label for="frutas">Elige una fruta:</label>
<select id="frutas" name="fruta">
<option value="manzana">Manzana</option>
<option value="platano">Plátano</option>
<option value="cereza">Cereza</option>
</select>
<input type="submit" value="Enviar">
</form>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú de Selección Múltiple</title>
</head>
<body>
<form>
<label for="vehiculos">Selecciona tus vehículos favoritos:</label>
<select id="vehiculos" name="vehiculos" multiple size="4">
<option value="carro">Carro</option>
<option value="moto">Moto</option>
<option value="bicicleta">Bicicleta</option>
<option value="avion">Avión</option>
</select>
<input type="submit" value="Enviar">
</form>
</body>
</html><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Menú Deshabilitado</title>
</head>
<body>
<form>
<label for="colores">Elige un color:</label>
<select id="colores" name="colores" disabled>
<option value="rojo">Rojo</option>
<option value="verde">Verde</option>
<option value="azul">Azul</option>
</select>
<input type="submit" value="Enviar">
</form>
</body>
</html>Estos ejemplos ilustran el uso básico del elemento <select> en HTML5, destacando cómo se pueden aplicar diferentes atributos para modificar su comportamiento y funcionalidad en un formulario web.