Выпадающий список html форма – Элементы HTML форм — выпадающий список (теги select, option, optgroup), текстовое поле (textarea), а также применение label, fieldset и legend | Создание сайтов и заработок в сети

Тег HTML пункт списка

Тег <option> в HTML определяет пункт списка <select> — выпадающего списка или списка с выбором нескольких значений, а также списка вариантов для поля <input> со списком предопределенных вариантов <datalist>.

Тег <option> должен быть расположен внутри HTML тегов <select> или <datalist>.

Выбранным значением, передаваемым при отправке формы, считается содержимое атрибута value выбранного элемента option, если такой атрибут использован, либо содержимое тега, если атрибут value не указан.

Если HTML тег <option> используется как пункт списка <select>, выбранным пунктом по умолчанию будет считаться первый <option> в HTML коде, либо тег с атрибутом selected.

В обязательном для заполнения списке select (списке с атрибутом required), для корректной работы проверки на заполнение, первому либо выбранному по умолчанию пункту option необходимо задать атрибут value=»» (пустое значение атрибута value).

Несколько пунктов <option> можно объединять в группы с помощью тега <optgroup>.

Подробно о создании форм описано в статье: Все про формы и поля в HTML. Создание и работа с формами.

Синтаксис

Вариант 1:

<option>текст</option>

Вариант 2 (только для использования в datalist):

<option value="текст">

Примеры использования пункта списка <option> в HTML коде

Тег <option> может выступать в роли пункта списка, либо предопределенного варианта для поля формы.

Тег <option> как пункт выпадающего списка select

ЕвразияАвстралияСеверная АмерикаЮжная АмерикаАфрикаАнтарктида

HTML код выпадающего списка с пунктами option

<select name="continent_1">
<option value="1">Евразия</option>
<option value="2">Австралия</option>
<option value="3">Северная Америка</option>
<option value="4">Южная Америка</option>
<option value="5">Африка</option>
 <option value="6">Антарктида</option>
</select>

Тег <option> в <datalist> как предопределенный вариант для поля input

Подходящие предопределенные варианты выводятся на экран в момент ввода. Попробуйте ввести «Америка» в поле ниже.

HTML код примера использования option в datalist

<input list="continents" name="continent_2" type="text">
<datalist>
<option value="Евразия">
<option value="Австралия">
<option value="Северная Америка">
<option value="Южная Америка">
<option value="Африка">
<option value="Антарктида">
</datalist>

Поддержка браузерами

Атрибуты тега option

Тег <option> также поддерживает глобальные HTML атрибуты.

Тег — раскрывающийся список

Поддержка браузерами

Описание

HTML тег <select> используется для создания раскрывающегося (выпадающего) списка, который появляется при щелчке мышью по элементу формы и позволяет посетителю сайта выбрать один из предопределенных вариантов.

Элемент <select> может содержать два и более тегов <option>, определяющих доступные варианты выбора в раскрывающемся списке. Текст первого дочернего элемента <option> будет изначально отображаться в выпадающем списке, то есть будет являться значением по умолчанию для списка. Изменить или задать значение по умолчанию для <select> можно прописав атрибут selected к нужному варианту:

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="vw">VW</option>
  <option selected="" value="audi">Audi</option>
</select>

Ширина раскрывающегося списка будет определяться самым длинным текстом, указанным в теге

Атрибуты

autofocus:

Указывает, что элемент должен автоматически получить фокус при загрузке веб-страницы. Возможные значения логического атрибута autofocus:

<select autofocus>
<select autofocus="autofocus">
<select autofocus="">

Пример »

Примечание: атрибут autofocus не поддерживается в IE9 и более ранних версиях, и в Firefox.

disabled:

Указывает, что элемент неактивен, то есть пользователь не сможет взаимодействовать с элементом. Возможные значения логического атрибута disabled:

<select disabled>
<select disabled="disabled">
<select disabled="">

Пример »

form:

Определяет форму с которой связан элемент. В качестве значения атрибута выступает идентификатор элемента <form>. Этот атрибут позволяет размещать элемент <select> в произвольном месте документа, а не только в качестве потомка элемента <form>.

Примечание: атрибут form не поддерживается в Firefox.

multiple:

Указывает, что за один раз можно выбрать несколько вариантов. Выбор нескольких вариантов различается в зависимости от операционной системы:

• Windows: удерживайте нажатой клавишу CTRL для выбора нескольких вариантов.
• Mac: удерживайте нажатой клавишу CMD для выбора нескольких вариантов.

Возможные значения логического атрибута multiple:

<select multiple>
<select multiple="multiple">
<select multiple="">

Пример »

Примечание: из-за различных способов выбора нескольких элементов и дополнительного уведомления пользователей о доступности выбора нескольких вариантов, рекомендуется вместо раскрывающегося списка использовать флажки.

name:

Определяет имя для раскрывающегося списка. Оно может быть использовано для доступа к данным формы после ее отправки или для ссылки на элемент в JavaScript.

size:

Указывает количество видимых вариантов в раскрывающимся списке. Если значение атрибута size больше 1, но меньше общего количества вариантов списка, то браузер автоматически добавит полосу прокрутки, чтобы указать, что есть еще варианты для просмотра. Пример »

Тег <select> так же поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Нет.

Пример

 
<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select> 

Результат данного примера в окне браузера:

Поле со списком | Учебные курсы

Поле со списком, называемое ещё ниспадающее меню, один из гибких и удобных элементов формы. В зависимости от настроек в списке можно выбирать одно или несколько значений. Преимущество списка в его компактности и универсальности, список может занимать одну или несколько строк, в нём можно выбирать одно или несколько значений. Поле со списком создаётся следующим образом.

<select>
 <option>Пункт 1</option>
 <option>Пункт 2</option> 
</select> 

Элемент <select> выступает контейнером для пунктов списка и определяет его вид — будет ли это раскрывающийся список или же список с одним или множественным выбором. Вид зависит от использования атрибута size элемента <select>, который устанавливает высоту списка; ширина списка при этом определяется автоматически исходя из длины текста внутри <option>. Ниже представлен список множественного выбора, в котором пункты выделяются с помощью клавиши Ctrl и Shift, и раскрывающийся список.

Поскольку список формируется двумя элементами <select> и <option>, соответственно, у каждого этого элемента свои атрибуты. В табл. 1 перечислены атрибуты элемента <select>.

Кроме того, есть ряд правил:

• <select> нельзя вкладывать внутрь ссылок;
• <select> нельзя вкладывать внутрь кнопок <button>;
• внутри <select> должен быть хотя бы один элемент <option>.

Атрибуты элемента <option> перечислены в табл. 2.

Надо понимать, что если вам требуется выделить сразу несколько пунктов списка через атрибут selected, то для <select> следует добавить атрибут multiple, иначе это всё работать не будет.

Создание списка показано в примере 1.

Пример 1. Использование списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <select name="day">
    <option value="mon">Понедельник</option>
    <option value="tue">Вторник</option>
    <option value="wed" selected>Среда</option>
    <option value="thu">Четверг</option>
    <option value="fri">Пятница</option>
    <option value="sat">Суббота</option>
    <option value="sun">Воскресенье</option>
   </select>
  </form> 
 </body>
</html>

Результат данного примера показан на рис. 1. Автоматический выделен третий пункт с помощью атрибута selected, поэтому список выходит за края области просмотра браузера.

Рис. 1. Вид списка

Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам, чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется элемент <optgroup>. Он представляет собой контейнер, внутри которого располагаются элементы <option>, объединённые в одну группу. Особенностью <optgroup> является то, что он не выделяется как обычный элемент списка, выводится жирным начертанием, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного положения. Для добавления заголовка группы используется атрибут label, как показано в примере 2.

Пример 2. Группирование элементов списка

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
 </head>
 <body>
  <form>
   <p><select name="food">
    <optgroup label="Русская кухня">
     <option value="r1">Закуска Барская</option>
     <option value="r2">Раки, фаршированные по-царски</option>
     <option value="r3">Биточки в горшочке</option>
    </optgroup>
    <optgroup label="Украинская кухня">
     <option value="u1">Галушки славянские</option>
     <option value="u2">Пампушки украинские</option>
     <option value="u3">Жаркое по-харьковски</option>
    </optgroup>
   </select></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера показан на рис. 2.

Рис. 2. Группированный список

Перейти к заданиям

HTML формы

Элементы формы такие как: текстовые поля, флажки, переключатели, кнопки и т.д., прописываются в контейнере <form>...</form>. Чаще всего элементы формы создаются при помощи тега <input>. При помощи атрибута type указывается тип элемента.

Рассмотрим следующий код:

<form>
    <p><label>Введите логин:</label> <input type="text"></p>
    <p><label>Введите пароль:</label> <input type="password"></p>
    <p><button>Войти</button></p>
</form>

В браузере получим примерно такую форму:

Здесь:

• тег <form> – является контейнером для элементов формы, в нем также можно использовать теги для разметки страницы;
• тег <label>– создает метку для элемента формы;
• тег <input> – создает элемент формы, при помощи атрибута type указывается какой именно элемент нужно отобразить:
  • <input type="text"> – создает текстовое поле;
  • <input type="password"> – создает поле для ввода пароля. Данный тег не требует закрывающего тега;
• тег <button> – создает кнопку.

Текстовая область

При помощи тега <textarea> мы можем создать текстовую область, в которой пользователь сможет вводить длинные сообщения:

<form>
    <p><label>Введите ваше сообщение:</label></p>
    <p><textarea></textarea></p>
    <p><button>Отправить</button></p>
</form>

В браузере получим:

Выпадающий список

Тег <select> создает на странице список, каждое значение из списка прописывается между тегами <option>...<option>:

<select>
    <option>Значение 1</option>
    <option>Значение 2</option>
    <option>Значение 3</option>
</select>

В данном примере вы можете выбрать только одно значение из списка:

Чтобы была возможность выбрать несколько значений из списка, то используйте атрибут multiple с таким же значением: <select multiple="multiple">:

Флажки и переключатели

Чтобы создать на странице флажки, необходимо создать поле с типом checkbox: <input type="checkbox">:

<form>
    <p><label><input type="checkbox">Значение один</label></p>
    <p><label><input type="checkbox">Значение два</label></p>
    <p><label><input type="checkbox">Значение три</label></p>
</form>

Необязательно эти поля прописывать между тегами <label>...</label>.

Чтобы создать на странице переключатели, необходимо создать поле с типом radio, и указать атрибут name с каким-нибудь значением: <input type="radio" name="rad">.

<form>
    <p><label><input type="radio" name="rad">Значение один</label></p>
    <p><label><input type="radio" name="rad">Значение два</label></p>
    <p><label><input type="radio" name="rad">Значение три</label></p>
</form>

Обратите внимание, что значение атрибута nameв группе переключателей должно быть одинаковым, иначе переключатели будут работать как флажки, т.е. можно будет выбрать сразу все.

Если вы хотите по умолчанию сделать выбранным один из пунктов, то используйте атрибут checked с таким же значением: <input type="radio" name="rad" checked="checked">. Для флажков соответственно можно указать этот атрибут у нескольких пунктов сразу.

Поле для выбора файла

Используйте тип поля file, для возможности выбора файла с компьютера: <input type="file">:

<form>
    <p><input type="file"></p>
    <p><button>Отправить</button></p>
</form>

Вид в окне браузера:

Другие варианты кнопок

• <input type="button" value="Название для кнопки"> – обычная кнопка.
• <input type="image" src="Путь к картинке"> – кнопка в виде картинки. Через атрибут src указываем путь к картинке.
• <input type="submit" value="Название для кнопки"> – кнопка для отправки данных формы.
• <input type="reset" value="Название для кнопки"> – кнопка для очистки формы от введенный в нее данных.

Эти же значения атрибута type, кроме значения image, можно применить к кнопке, созданной при помощи тега <button></button>. В отличие от кнопок, созданных через тег <input>, эту кнопку можно размещать вне контейнера <form>...</form>, это не будет считаться ошибкой. Также внутри этой кнопки можно размещать другие строчные теги.

Видео к уроку