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-форм.