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.
¿Qué es el elemento de selección HTML?
En HTML, el elemento de selección es un elemento de formulario que crea una lista desplegable de opciones, desde la cual el usuario puede seleccionar una (o varias si está permitido). El elemento de selección generalmente se implementa dentro de los formularios HTML para recopilar los envíos de los usuarios y es mejor para seleccionar una opción entre muchas mientras se conserva el espacio en la página.
El elemento de selección HTML consiste en una apertura y un cierre
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
o una etiqueta de encabezado para este propósito) se recomienda para una buena accesibilidad. los
El siguiente es el
tenemos tres
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
discapacitado
Cuando se agrega a la
ver la pluma Seleccionar HTML: deshabilitado de Christina Perricone (@hubspot) en CódigoPen.
los discapacitado atributo también se puede poner dentro de un
ver la pluma Seleccionar HTML: atributo deshabilitado de Christina Perricone (@hubspot) en CódigoPen.
formulario
los formulario el atributo asocia un
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
Talla
Si tu
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
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
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
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.
ver la pluma Seleccionar HTML: formularios 1 de Christina Perricone (@hubspot) en CódigoPen.
También puede colocar un
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.