El '
Este artículo demuestra la etiqueta de opción en HTML junto con ejemplos prácticos:
- ¿Qué es la etiqueta de opción y cómo usarla en HTML?
- Creación de una lista desplegable
- Creación de lista de autocompletar
¿Qué es la etiqueta de opción y cómo usarla en HTML?
La etiqueta de opción se puede utilizar con el '
Ejemplo 1: creación de una lista desplegable
El '
< h2 > Lenguajes de programación h2 >
< etiqueta para = 'arma progresiva' > Seleccione un arma de programación: etiqueta >
< seleccionar identificación = 'listas de programas' >
< opción valor = '' > Seleccione una opción opción >
< opción valor = 'c++' > C++ opción >
< opción valor = '.neto' > Punto net opción >
< opción valor = 'nodejs' > Nodo js opción >
seleccionar >
En el fragmento de código anterior:
- Primero el '
La etiqueta 'se utiliza para mostrar los datos y se asigna con el' etiqueta ” usando su “ para ' atributo. - Después de eso, el “
La etiqueta ” se utiliza para crear un entorno para la lista desplegable. - A continuación, el “
La etiqueta ” se utiliza para crear elementos de lista que se colocarán como elementos de lista desplegable.
Después de configurar la estructura de la lista desplegable, ahora apliquemos algunos estilos básicos:
etiqueta {bloqueo de pantalla;
margen inferior: 5px;
}
seleccionar {
relleno: 5px;
borde-radio: 5px;
ancho: 200px;
}
La explicación de las propiedades CSS se describe a continuación:
- Primero, seleccione el “ etiqueta ” y luego establezca los valores de “bloque” y “5px” en el CSS “ mostrar ' y ' margen inferior ' propiedades.
- A continuación, el “ seleccionar El elemento ” está seleccionado y proporciona los valores de “5px”, “5px” y “200px” al CSS “ relleno ”, “ borde-radio ' y ' ancho ” propiedades, respectivamente. Estas propiedades se utilizan para mejorar la visibilidad del usuario.
Después de la ejecución de los fragmentos de código anteriores, la página web se ve así:
El resultado anterior muestra que el menú desplegable se ha creado utilizando el '
Ejemplo 2: creación de una lista de autocompletar
El '
< aporte tipo = 'texto' identificación = 'prog-herramientas' lista = 'herramientas' >
< lista de datos identificación = 'herramientas' >
< opción valor = 'C++' >
< opción valor = 'Asamblea' >
< opción valor = '.Neto' >
< opción valor = 'PHP' >
< opción valor = 'Rubí' >
< opción valor = 'Rápido' >
< opción valor = 'Nodo js' >
< opción valor = 'Reaccionar' >
< opción valor = 'Mongo' >
< opción valor = 'Java' >
< opción valor = 'Pitón' >
lista de datos >
En el fragmento de código anterior:
- Primero, agregue el '
” etiqueta que muestra el texto junto con el elemento HTML. - A continuación, utilice el '
” etiqueta que el usuario completa manualmente o puede completarse automáticamente mediante las opciones disponibles dentro de la lista de autocompletar. - Después de eso, utilice el “
etiqueta ' y establezca su ' identificación ” valor del atributo igual al valor del “ lista ” atributo de la “ ' etiqueta. - A continuación, utilice el '
” dentro de la etiqueta “ ” para crear un elemento para la lista de autocompletar.
Después de la ejecución del fragmento de código anterior, la página web aparece así:
El resultado muestra que la lista de autocompletar se crea utilizando el '
Conclusión
El '