HTML Select List Option

Введение

HTML-тег <option> используется для определения опций в выпадающем списке в HTML-форме. Он прикрепляется к тегу <select> и его вариантам, таким как <datalist> и <optgroup>. Этот тег помогает пользователям делать выбор из списка вариантов. В этом практическом занятии вы узнаете, как реализовать HTML-выпадающий список с использованием тега <option>.

Примечание: Вы можете практиковать программирование в index.html и изучить Как писать HTML в Visual Studio Code. Нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем можно обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Создайте элемент

Создайте HTML-файл с именем index.html в предпочитаемом текстовом редакторе.

Начните с создания базовой HTML-формы:

<form></form>

Создайте элемент и добавьте опции Внутри элемента <form> добавьте элемент <select>, который создаст выпадающий список. <form> <select> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> </form> Здесь мы добавили три тега <option> внутри тегов <select> с атрибутом value, установленным на "option1", "option2" и "option3". Добавьте подсказку Добавим подсказку. Внутри тега <select> добавьте следующий код: <select> <option value="" disabled selected>Select an option</option> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> Здесь мы добавили новый тег <option> с такими атрибутами: value="", который задает значение пустой строкой. disabled, который отключает возможность выбора этой опции. selected, который используется для указания значения по умолчанию для выпадающего списка. Текст внутри тега <option>, который действует как подсказка. Добавьте кнопку отправки Нам нужна кнопка отправки, чтобы отправить форму. Добавьте следующий код после тега <select>: <form> <select> <option value="" disabled selected>Select an option</option> <option value="option1">Option 1</option> <option value="option2">Option 2</option> <option value="option3">Option 3</option> </select> <br /><br /> <input type="submit" value="Submit" /> </form> Сохраните файл и запустите его в веб-браузере, чтобы увидеть работу выпадающего списка. Резюме В этом практическом занятии мы узнали, как использовать HTML-тег <option> для создания выпадающего списка. Мы начали с создания HTML-формы, затем добавили элемент <select>, добавили в него опции с атрибутом value и добавили подсказку. Наконец, мы добавили кнопку отправки для отправки формы. Тег <option> играет важную роль в создании динамических HTML-форм.