“ <опция> » используется для определения параметра, который пользователь может выбрать из раскрывающегося меню или из списков выбора в веб-формах. “ <опция> » позволяет разработчикам создавать набор параметров, из которых пользователь может выбрать любой вариант. Он используется в различных приложениях, таких как опросы, сайты онлайн-покупок, регистрационные формы и т. д.
В этой статье демонстрируется тег option в HTML вместе с практическими примерами:
- Что такое тег option и как его использовать в HTML?
- Создание выпадающего списка
- Создание списка автозаполнения
Что такое тег option и как его использовать в HTML?
Тег option можно использовать с « <выбрать> ' и ' <список данных> ” теги. В случае « <список данных> », он создает список опций, которые могут быть автозаполнены браузером. Давайте рассмотрим пару примеров, чтобы лучше понять взаимосвязь между « <опция> » с тегом « <выбрать> ' и ' <список данных> » теги:
Пример 1: Создание выпадающего списка
“ <опция> » используется с тегом « <выбрать> », чтобы создать выпадающий список на веб-странице. “ <опция> ” создает каждую опцию/элемент списка в раскрывающемся списке. Для лучшего понимания давайте следуем приведенному ниже фрагменту кода:
< h2 > Языки программирования h2 >
< этикетка для '=' 'прог-оружие' > Выберите оружие для программирования: этикетка >
< выбирать идентификатор '=' 'прог-листы' >
< вариант ценить '=' '' > Выберите вариант вариант >
< вариант ценить '=' 'С++' > С++ вариант >
< вариант ценить '=' '.сеть' > Дот-нет вариант >
< вариант ценить '=' 'узлы' > узел js вариант >
выбирать >
В приведенном выше фрагменте кода:
- Во-первых, « <метка> » используется для отображения данных, и ему присваивается « <выбрать> », используя его « для атрибут.
- После этого « <выбрать> Тег используется для создания среды для выпадающего списка.
- Далее « <опция> Тег используется для создания элементов списка, которые будут помещены в раскрывающийся список.
После настройки структуры выпадающего списка, теперь давайте применим некоторые базовые стили:
этикетка {дисплей: блок;
нижняя граница: 5px;
}
выбирать {
отступ: 5px;
радиус границы: 5px;
ширина: 200 пикселей;
}
Объяснение свойств CSS описано ниже:
- Сначала выберите « этикетка », а затем установите значения «block» и «5px» в CSS « отображать ' и ' нижняя граница ' характеристики.
- Далее « выбирать » элемент выбран и предоставляет значения «5px», «5px» и «200px» для CSS « набивка », « радиус границы ' и ' ширина свойства соответственно. Эти свойства используются для улучшения видимости для пользователя.
После выполнения приведенных выше фрагментов кода веб-страница выглядит так:
Приведенный выше вывод показывает, что раскрывающийся список был создан с использованием « <опция> » с тегом « <выбрать> ' ярлык.
Пример 2: Создание списка автозаполнения
“ <опция> » используется с тегом « <список данных> », чтобы создать список автозаполнения. Используется вместе с « <ввод> », который заполняется опциями, доступными в списке автозаполнения. Код для создания списка автозаполнения с использованием HTML показан во фрагменте кода ниже:
< этикетка для '=' 'прог-инструменты' > Или тип Инструмент программирования: этикетка >< вход тип '=' 'текст' идентификатор '=' 'прог-инструменты' список '=' 'инструменты' >
< список данных идентификатор '=' 'инструменты' >
< вариант ценить '=' 'С++' >
< вариант ценить '=' 'Сборка' >
< вариант ценить '=' '.Сеть' >
< вариант ценить '=' 'ПХП' >
< вариант ценить '=' 'Рубин' >
< вариант ценить '=' 'Быстрый' >
< вариант ценить '=' 'Узел js' >
< вариант ценить '=' 'Реагировать' >
< вариант ценить '=' 'Монго' >
< вариант ценить '=' 'Джава' >
< вариант ценить '=' 'Питон' >
список данных >
В приведенном выше фрагменте кода:
- Сначала добавьте « <метка> », который отображает текст вместе с элементом HTML.
- Далее используйте « <ввод> », который заполняется пользователем вручную или может быть заполнен автоматически с помощью параметров, доступных в списке автозаполнения.
- После этого используйте « <список данных> » и установите его « идентификатор значение атрибута равно значению атрибута « список ” атрибут “ <ввод> ' ярлык.
- Далее используйте « <опция> » внутри тега «
После выполнения приведенного выше фрагмента кода веб-страница выглядит следующим образом:
Вывод показывает, что список автозаполнения создается с использованием « <опция> ” с комбинацией “ <список данных> ' и ' <ввод> ” теги.
Заключение
“ <опция> » позволяет разработчику создавать параметры для списка параметров, из которого пользователь может выбрать любой вариант. Этот тег «