El '
Aquest article mostra l'etiqueta d'opció en HTML juntament amb exemples pràctics:
- Què és l'etiqueta d'opció i com utilitzar-la en HTML?
- Creació d'una llista desplegable
- Creació d'una llista d'autocompletar
Què és l'etiqueta d'opció i com utilitzar-la en HTML?
L'etiqueta d'opció es pot utilitzar amb el '
Exemple 1: creació d'una llista desplegable
El '
< h2 > Llenguatges de programació h2 >
< etiqueta per = 'arma progressiva' > Seleccioneu una arma de programació: etiqueta >
< seleccionar id = 'llistes de programes' >
< opció valor = '' > Seleccioneu una opció opció >
< opció valor = 'c++' > C++ opció >
< opció valor = '.net' > Dot Net opció >
< opció valor = 'nodejs' > Node js opció >
seleccionar >
Al fragment de codi anterior:
- En primer lloc, el '
' s'utilitza per mostrar les dades i s'assigna amb el ' 'etiqueta utilitzant el seu ' per ” atribut. - Després d'això, el '
” s'utilitza per crear un entorn per a la llista desplegable. - A continuació, el '
” s'utilitza per crear elements de la llista que es col·loquen com a elements de la llista desplegable.
Després de configurar l'estructura de la llista desplegable, ara apliquem un estil bàsic:
etiqueta {visualització: bloc;
marge inferior: 5px;
}
seleccionar {
farciment: 5px;
radi de la vora: 5px;
amplada: 200 píxels;
}
L'explicació de les propietats CSS es descriu a continuació:
- En primer lloc, seleccioneu ' etiqueta ” i després establiu els valors de “block” i “5px” al CSS “ visualització ' i ' marge inferior ” propietats.
- A continuació, el ' seleccionar ' està seleccionat i proporciona els valors de '5px', '5px' i '200px' al CSS ' farciment ”, “ frontera-radi ' i ' amplada ” propietats, respectivament. Aquestes propietats s'utilitzen per millorar la visibilitat dels usuaris.
Després de l'execució dels fragments de codi anteriors, la pàgina web té aquest aspecte:
La sortida anterior mostra que el desplegable s'ha creat utilitzant el '
Exemple 2: creació d'una llista d'autocompletar
El '
< entrada tipus = 'text' id = 'prog-eines' llista = 'eines' >
< llista de dades id = 'eines' >
< opció valor = 'C++' >
< opció valor = 'Muntatge' >
< opció valor = '.Net' >
< opció valor = 'PHP' >
< opció valor = 'Ruby' >
< opció valor = 'Ràpid' >
< opció valor = 'Node js' >
< opció valor = 'Reaccionar' >
< opció valor = 'Mongo' >
< opció valor = 'Java' >
< opció valor = 'Python' >
llista de dades >
Al fragment de codi anterior:
- Primer, afegiu el '
” que mostra el text juntament amb l'element HTML. - A continuació, utilitzeu '
” que l'usuari omple manualment o que es pot omplir automàticament mitjançant les opcions disponibles dins de la llista d'emplenament automàtic. - Després d'això, utilitzeu el ' ” etiqueta i defineix el seu “ id ' valor de l'atribut igual al valor de ' llista ' atribut de '
' etiqueta. - A continuació, utilitzeu el '
” dins de l'etiqueta “
Després de l'execució del fragment de codi anterior, la pàgina web apareix així:
La sortida mostra que la llista d'emplenament automàtic es crea utilitzant el '
Conclusió
El '