La etiqueta <select> en HTML se usa para crear una lista desplegable. La etiqueta <select> contiene la etiqueta <option> para mostrar la opción disponible de la lista desplegable.
Nota: La etiqueta <select> se usa en un formulario para recibir respuestas de los usuarios.
Sintaxis:
<select>
<option>
</option>
...
</select>
Atributos: Los atributos de la etiqueta <select> se enumeran a continuación:
- enfoque automático: el atributo de enfoque automático HTML <select> se usa para especificar que el menú desplegable debe enfocarse automáticamente cuando se carga la página. Es un tipo de atributo booleano.
- disabled: el atributo deshabilitado <select> se usa para especificar que el elemento de selección está deshabilitado. Una lista desplegable deshabilitada no se puede hacer clic y no se puede usar. Es un atributo booleano.
- formulario: El atributo de formulario HTML <select> se utiliza para especificar uno o más formularios a los que pertenece el elemento <select>.
- múltiple: El atributo múltiple HTML <select> es un atributo booleano. Especifica que el usuario puede seleccionar más de un valor que se presenta en el elemento <select>.
- nombre: El atributo de nombre HTML <select> se utiliza para especificar un nombre para la lista desplegable. Se utiliza para hacer referencia a los datos del formulario después de enviar el formulario o para hacer referencia al elemento en JavaScript.
- requerido: El atributo HTML <select> requerido es un atributo booleano que se usa para especificar que el usuario debe tener un valor seleccionado antes de enviar el formulario.
- tamaño: el atributo de tamaño HTML se utiliza para especificar el número de opciones visibles en una lista desplegable.
Ejemplo 1: En este ejemplo, simplemente creamos una lista desplegable en HTML.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GeeksforGeeks</h2> <select> <option value="By the way">BTW</option> <option value="Talk to you later">TTYL</option> <option value="To be honest">TBH</option> <option value=" I don’t know">IDK</option> </select> </body> </html>
Producción:
Etiqueta HTML <seleccionar>
Ejemplo 2: este ejemplo describe la etiqueta HTML <select> con una opción preseleccionada.
HTML
<!DOCTYPE html> <html> <head> <title>HTML select Tag</title> </head> <body style="text-align:center;"> <h1>GeeksforGeeks</h1> <h2>HTML select Tag</h2> <p>Select one option from drop-down list:</p> <select> <option value="GFG">GFG</option> <option value="OS">OS</option> <option value="DBMS">DBMS</option> <option value="Data Structure">Data Structure</option> </select> </body> </html>
Producción:
Etiqueta HTML <select> con opción preseleccionada
Ejemplo 3: En este ejemplo, estamos usando una etiqueta optgroup con la etiqueta <select>. La etiqueta optgroup se utiliza para mostrar opciones relacionadas en la lista desplegable.
HTML
<!DOCTYPE html> <html> <body> <h2>Welcome To GeeksforGeeks</h2> <label for="Brands">Choose a Brand:</label> <select name="Brands" id="Brands"> <optgroup label="Tech Brands"> <option value="Google">Google</option> <option value="Apple">Apple</option> </optgroup> <optgroup label="Automative Brands"> <option value="Tesla">Tesla</option> <option value="audi">Audi</option> </optgroup> <optgroup label="Entertainment Brand"> <option value="Disney">Disney</option> </optgroup> </select> </body> </html>
Producción:
Etiqueta HTML <select> con etiqueta <optgroup>
Navegadores compatibles:
- Google Chrome
- Borde 12 y superior
- explorador de Internet
- Borde de Microsoft
- Firefox 1 y superior
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por shubham_singh y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA