„ <опция> ” се използва за дефиниране на опция, която потребителят може да избере от падащо меню или от списъците за избор в уеб формуляри. „ <опция> ” позволява на разработчиците да създадат набор от опции, от които потребителят може да избере всяка опция. Използва се в различни приложения като проучвания, сайтове за онлайн пазаруване, регистрационни формуляри и др.
Тази статия демонстрира маркера за опции в HTML заедно с практически примери:
- Какво представлява маркерът за опции и как да го използвам в HTML?
- Създаване на падащ списък
- Създаване на списък за автоматично попълване
Какво представлява маркерът за опции и как да го използвам в HTML?
Етикетът с опции може да се използва с „ <изберете> ' и ' ” етикети. В случай на „ ”, той създава списък с опции, които могат да бъдат автоматично довършвани от браузър. Нека разгледаме няколко примера за по-добро разбиране на връзката между „ <опция> ” етикет с „ <изберете> ' и ' ” тагове:
Пример 1: Създаване на падащ списък
„ <опция> ” се използва с „ <изберете> ”, за да създадете падащ списък на уеб страницата. „ <опция> ” създава всяка опция/елемент от списък в падащия списък. За по-добро разбиране нека следваме кодовия фрагмент по-долу:
< h2 > Програмни езици h2 >
< етикет за = 'прог-оръжие' > Изберете оръжие за програмиране: етикет >
< изберете документ за самоличност = 'прог-списъци' >
< опция стойност = '' > Изберете опция опция >
< опция стойност = 'c++' > C++ опция >
< опция стойност = '.net' > Dot Net опция >
< опция стойност = 'nodejs' > Възел js опция >
изберете >
В горния кодов фрагмент:
- Първо, „ <етикет> ” се използва за показване на данните и се присвоява с „ <изберете> ' таг, използвайки своя ' за ' атрибут.
- След това „ <изберете> ” се използва за създаване на среда за падащия списък.
- След това „ <опция> ” се използва за създаване на елементи от списък, които да бъдат поставени като елементи от падащ списък.
След като настроихме структурата на падащия списък, сега нека приложим някои основни стилове:
етикет {дисплей: блок;
margin-bottom: 5px;
}
изберете {
подложка: 5px;
радиус на границата: 5px;
ширина: 200px;
}
Обяснението на свойствата на CSS е описано по-долу:
- Първо изберете „ етикет ” и след това задайте стойностите на „block” и „5px” на CSS „ дисплей ' и ' margin-bottom ' Имоти.
- След това „ изберете ” е избран и предоставя стойностите на „5px”, „5px” и „200px” на CSS „ подплата ”, “ граница-радиус ' и ' ширина ” имоти, респ. Тези свойства се използват за подобряване на видимостта на потребителите.
След изпълнението на горните кодови фрагменти, уеб страницата изглежда така:
Горният резултат показва, че падащото меню е създадено с помощта на „ <опция> ” етикет с „ <изберете> ” таг.
Пример 2: Създаване на списък за автоматично попълване
„ <опция> ” се използва с „ ”, за да създадете списък за автоматично довършване. Използва се заедно с „ <вход> ”, който се запълва от наличните опции в списъка за автоматично попълване. Кодът за създаване на списък с автоматично попълване с помощта на HTML е показан в кодовия фрагмент по-долу:
< етикет за = 'прог-инструменти' > Или Тип инструмент за програмиране: етикет >< вход Тип = 'текст' документ за самоличност = 'прог-инструменти' списък = 'инструменти' >
< списък с данни документ за самоличност = 'инструменти' >
< опция стойност = 'C++' >
< опция стойност = 'Асамблея' >
< опция стойност = '.Net' >
< опция стойност = 'PHP' >
< опция стойност = 'Рубин' >
< опция стойност = 'Swift' >
< опция стойност = 'Възел js' >
< опция стойност = 'реагирай' >
< опция стойност = 'монго' >
< опция стойност = 'Java' >
< опция стойност = 'Python' >
списък с данни >
В горния кодов фрагмент:
- Първо добавете „ <етикет> ”, който показва текста заедно с HTML елемента.
- След това използвайте „ <вход> ”, който се попълва ръчно от потребителя или може да бъде попълнен автоматично от наличните опции в списъка за автоматично попълване.
- След това използвайте „ ” и задайте неговия „ документ за самоличност ” стойност на атрибута, равна на стойността на „ списък ' атрибут на ' <вход> ” таг.
- След това използвайте „ <опция> ” в тага „
След изпълнението на горния кодов фрагмент уеб страницата изглежда така:
Резултатът показва, че списъкът за автоматично попълване е създаден чрез използване на „ <опция> ” етикет с комбинация от „ ' и ' <вход> ” етикети.
Заключение
„ <опция> ” таг позволява на разработчика да създава опции за списъка с опции, от който потребителят може да избере всяка опция. Този етикет „