¿Qué es el elemento de selección HTML? [+ How to Make One]

Si ejecuta un sitio web comercial, probablemente querrá recopilar las respuestas de los visitantes a través de formularios. Los formularios son una excelente manera de recopilar comentarios, información de pedidos, información personal o cualquier otro tipo de datos que sus visitantes puedan proporcionar.

Los formularios son tan útiles que HTML incluso tiene una colección de elementos especiales para recopilar respuestas en el front-end. Por lo tanto, si está creando un sitio desde cero o diseñando una página de comentarios personalizada, puede crear formularios según sus especificaciones exactas.

Un elemento de formulario que encontrará a menudo es el elemento de «selección» de HTML, que agrega un campo de formulario desplegable a una página. Es muy probable que haya encontrado un elemento seleccionado en un sitio web recientemente: son intuitivos, accesibles y un elemento básico del diseño de formularios. En esta publicación, le mostraremos cómo hacer uno en HTML.

El elemento de selección HTML consiste en una apertura y un cierre etiqueta. Anidado en esta etiqueta hay al menos uno etiqueta, que representa una opción en el menú desplegable. Así es como se ve un elemento de selección en HTML:

ver la pluma Ejemplo de selección de HTML de Christina Perricone (@hubspot) en CódigoPen.

Como puede ver, este código crea un menú desplegable HTML simple. De forma predeterminada, la primera opción del menú aparece seleccionada y al hacer clic en el elemento se muestran todas las opciones. Repasemos cada parte de este ejemplo de código con más detalle.

Primero, tenemos un elemento que contiene texto para introducir el elemento seleccionado. Mientras que la la etiqueta no es técnicamente necesaria (podría usar fácilmente una

o una etiqueta de encabezado para este propósito) se recomienda para una buena accesibilidad. los El elemento le dice a las tecnologías de asistencia que el texto del interior debe asociarse con el menú desplegable de procedimiento. contiene un atributo, porcuyo valor debe ser el identificación de los asociados elemento.

El siguiente es el elemento en sí, cuya etiqueta de apertura contiene dos atributos. Primero el nombre El atributo nombra el elemento desplegable, que es necesario para recopilar envíos. Cuando la respuesta del formulario del usuario se envía al servidor de recopilación, el valor de nombre se emparejará con la respuesta que el usuario seleccione. En segundo lugar, el atributo id dentro empareja el elemento de selección con el elemento de etiqueta anterior.

tenemos tres etiquetas anidadas en el etiqueta, una para cada elemento de la lista. Cada tiene un valor atributo, que especifica el valor enviado al servidor de recopilación cuando se envía el formulario. Por ejemplo, si eliges “Azul” de la lista anterior, la página enviará el valor “camisas=azul” (recuerda que camisas es el nombre del elemento seleccionado).

Atributos de selección de HTML

El elemento seleccionado acepta Atributos globales HTML, y también tiene varios atributos propios para cambiar su funcionamiento. Estos atributos son:

autocompletar

los atributo de autocompletar habilita la función de autocompletar de un navegador para seleccionar una opción del menú desplegable para el usuario.

enfoque automático

Si el enfoque automático atributo está incluido en un etiqueta, el navegador del usuario se centrará automáticamente en el elemento seleccionado al cargar la página.

discapacitado

Cuando se agrega a la etiqueta, la discapacitado El atributo desactiva todo el menú desplegable. El usuario no puede interactuar con él ni seleccionar una respuesta.

ver la pluma Seleccionar HTML: deshabilitado de Christina Perricone (@hubspot) en CódigoPen.

los discapacitado atributo también se puede poner dentro de un etiqueta para desactivar un elemento en el menú desplegable.

ver la pluma Seleccionar HTML: atributo deshabilitado de Christina Perricone (@hubspot) en CódigoPen.

formulario

los formulario el atributo asocia un etiqueta con un elemento en la página. Este atributo es útil para colocar un etiqueta fuera de un en el HTML. el valor de la formulario atributo es el identificación de la forma a la que pertenece.

múltiple

De forma predeterminada, el elemento de selección solo permite seleccionar una opción. los múltiple El atributo permite al usuario seleccionar varios elementos. También muestra todas las opciones en una lista desplazable en lugar de un menú desplegable.

Para seleccionar varios elementos, haga clic en sus elementos mientras mantiene presionado el control o cambio en Windows, o la mando o cambio clave en macOS.

ver la pluma Seleccionar HTML: atributo múltiple de Christina Perricone (@hubspot) en CódigoPen.

Tenga en cuenta que esta opción de interfaz puede no ser la más intuitiva para todos los usuarios y tiene un costo de interacción relativamente alto (ya que los usuarios deben hacer clic mientras mantienen presionada una tecla para elegir varias respuestas). Una mejor alternativa sería utilizar casillas de verificación para permitir que los usuarios seleccionen uno o varios elementos de una lista.

nombre

Como se mencionó, el nombre El atributo asigna al menú desplegable un nombre que se envía al servidor al enviar el formulario. Si no incluye este atributo, las respuestas de los usuarios no se enviarán al servidor.

requerido

Cuando el requerido atributo está incluido en los usuarios deben seleccionar una respuesta de la lista desplegable antes de enviar el formulario.

Talla

Si tu permite múltiples respuestas, la Talla El atributo establece cuántas filas de respuestas son visibles sin desplazarse. Aquí, he configurado tres filas para que se muestren.

ver la pluma Seleccionar HTML: atributo de tamaño de Christina Perricone (@hubspot) en CódigoPen.

Otros trucos de selección de HTML

Más allá de los atributos, aquí hay algunas otras formas en que puede personalizar sus menús desplegables de formas que probablemente haya visto antes.

Cambiar la opción predeterminada de selección de HTML

selecciona automáticamente la primera anidado en su interior. Si desea establecer un elemento diferente como la opción predeterminada, agregue el seleccionado atribuir a lo deseado etiqueta. A continuación, hice de la segunda opción la respuesta predeterminada.

ver la pluma Seleccionar HTML: atributo seleccionado de Christina Perricone (@hubspot) en CódigoPen.

Agregar texto de marcador de posición a la selección de HTML

Un marcador de posición evita que se seleccione un elemento de la lista de forma predeterminada; en su lugar, puede hacer que el texto de la pantalla sea un aviso, como «Elija uno…», etc.

Para agregar un marcador de posición, escriba el texto del marcador de posición como un y agregue tanto el discapacitado y seleccionado atribuye a este elemento.

ver la pluma Seleccionar HTML: marcador de posición de Christina Perricone (@hubspot) en CódigoPen.

Agrupar elementos de selección HTML

También puede separar los elementos de respuesta en grupos, lo que resulta útil para menús desplegables particularmente grandes. Nido (grupo de opciones) etiquetas dentro de su principal etiqueta, una para cada grupo. Asignar un etiqueta atribuye a cada uno para el nombre del grupo. Entonces, nido etiquetas dentro de su etiquetas

ver la pluma HTML Seleccionar: grupos de Christina Perricone (@hubspot) en CódigoPen.

Cómo usar HTML Select en un formulario

El elemento de selección está diseñado para usarse dentro de un elemento de formulario HTML, lo que permite a los usuarios ingresar y enviar respuestas en el front-end de su sitio. etiquetas anidadas dentro del se incluyen en el formulario y las respuestas se envían cuando el usuario hace clic en el botón Enviar. Así es como se ve un formulario HTML que contiene un elemento de envío:

ver la pluma Seleccionar HTML: formularios 1 de Christina Perricone (@hubspot) en CódigoPen.

También puede colocar un elemento fuera de un etiqueta y asócielo con ese formulario usando el formulario atributo, así:

ver la pluma Seleccionar HTML: formularios 2 de Christina Perricone (@hubspot) en CódigoPen.

HTML Select: una solución fácil para los menús desplegables

Cuando desee presentar opciones como un menú desplegable, use seleccionar: maneja todas las funciones necesarias para usted y puede personalizarlas con atributos simples. Este elemento también ahorra espacio en sus formularios, lo que lo hace ideal para listas largas (p. ej., «¿En qué país vive?»). Lo mejor de todo es que es fácil de usar, por lo que puede comenzar a recopilar respuestas en minutos.