Dropdowns
Parte de la sección Fundamentals del Journey de HTML de Coddy — lección 43 de 60.
En HTML, un menú desplegable es una lista de elementos que aparece cuando un usuario hace clic o pasa el cursor sobre un elemento. Los menús desplegables se utilizan comúnmente para presentar una lista de opciones de forma compacta. Para crear un menú desplegable, se utiliza la etiqueta <select> junto con las etiquetas <option> para los elementos individuales.
Aquí está la sintaxis básica para crear un menú desplegable en HTML:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: La etiqueta que define el menú desplegable.
name: Un atributo que le da un nombre al menú desplegable, que se utiliza para identificar el valor seleccionado cuando se envía el formulario.
<option>: Una etiqueta que define un elemento en la lista desplegable.
value: Un atributo que especifica el valor asociado con la opción. Este valor se envía al servidor cuando se envía el formulario.
Option text: El texto visible que aparece en la lista desplegable para cada opción.
Aquí tienes un ejemplo de cómo crear un menú desplegable con tres opciones:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>En este ejemplo, tenemos un menú desplegable con el nombre "colors" y tres opciones: Rojo, Verde y Azul.
Desafío
FácilCrea un documento HTML que incluya un formulario con un menú desplegable. El formulario debe tener los siguientes elementos:
- Un menú desplegable con el nombre "fruits".
- El menú desplegable debe tener cuatro opciones con los siguientes valores y texto:
- Valor: "apple", Texto: "Apple"
- Valor: "banana", Texto: "Banana"
- Valor: "orange", Texto: "Orange"
- Valor: "grape", Texto: "Grape"
Hoja de referencia
Para crear un menú desplegable en HTML, utiliza la etiqueta <select> con etiquetas <option> para los elementos individuales:
<select name="dropdown">
<option value="value1">Option 1</option>
<option value="value2">Option 2</option>
<option value="value3">Option 3</option>
</select><select>: Define el menú desplegablename: Identifica el menú desplegable cuando se envía el formulario<option>: Define cada elemento del menú desplegablevalue: El valor enviado al servidor cuando se selecciona la opción- Texto de la opción: El texto visible que se muestra en el menú desplegable
Ejemplo de menú desplegable con opciones de color:
<select name="colors">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>Pruébalo tú mismo
<!DOCTYPE html>
<html>
<body>
<!-- Escribe código aquí -->
</body>
</html>
Ponte a pruebaEsta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Fundamentals
1Fundamentos de HTML
¿Qué es HTML?Estructura básica de HTMLEtiquetas y elementosAnidamiento y cierre de etiquetasComentarios en HTML4Tarjeta de receta
Descripción general del proyectoTítulo y descripción de la receta
IngredientesPasos2Texto y formato
EncabezadosPárrafosSaltos de líneaTexto en negrita y cursivaNegrita y cursiva de nuevoResumen - Formato9Formularios e Inputs Parte 2
Radio buttonsCheckboxesDropdownsBotonesBotones en formulariosRepaso - Formularios #1Repaso - Formularios #2