Главная HTML Форма Элемент select

Элемент формы <select>

Элементы формы

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

Каждый пункт создаётся с помощью элемента <option>, который должен быть вложен в контейнер <select>. Если планируется отправлять данные списка на сервер, то требуется поместить <select> внутрь формы. Это также необходимо, когда к данным списка идёт обращение через скрипты.

Синтаксис: 
<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
</select>

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

1       
<select>
  <option>Пункт 1</option>
  <option>Пункт 2</option>
  <option>Пункт 3</option>
  <option>Пункт 2025-2035 (самый длинный текст)</option>
</select>

Атрибуты <select>

Атрибут Значение Описание

autofocus

autofocus

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

<select autofocus>...</select>

   

disabled disabled Отключает раскрывающийся список.

<select disabled>...</select>

form

="form_id"

 Связывает список с формой по её идентификатору. Такая связь необходима в случае, когда список располагается за пределами <form>. 

2

<form id="userform" action="test.php">
</form>

<select form="userform">
 <option selected="selected">Выберите цвет:</option>
 <option value="Красный">Красный</option>
 <option value="Зеленый">Зеленый</option>
 <option value="Синий">Синий</option>
</select>

<p><input type="submit" form="userform" value="Отправить"></p>

multiple multiple Указывает, что за один раз можно выбрать (через Ctrl или Shift) несколько вариантов. 
3

1) Список множественного выбора

Выберите один или несколько цветов:
<form action="test.php">
  <select multiple name="telo[]">
    <option>Красный</option>
    <option>Зеленый</option>
    <option>Синий</option>
    <option>Белый</option>
    <option>Чёрный</option>
  </select>
</form>

Выберите один или несколько цветов:

2) Раскрывающийся список (для сравнения)

(тот же список, но без multiple)
Можно выброть только один цвет.

Выберите цвет:

name ="имя" Имя элемента <select> для отправки на сервер или обращения через скрипты. 

4

<script>
function dataSelect(f) {
 n = f.zvet.selectedIndex
 if (n) alert("Выбран цвет: \n" + f.zvet.options[n].value)
}
</script>

<form action="test.php">
<select name="zvet">
 <option value="">Выберите цвет:</option>
 <option value="Красный">Красный</option>
 <option value="Зеленый">Зеленый</option>
 <option value="Синий">Синий</option>
</select>
<input type="button" value="OK" onClick="dataSelect(this.form)">
</form>

required

required

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

<select required>...</select>

5

<form action="test.php">
<p>Какое растение в списке вечнозелёное?</p>
<select required>
    <option value="">Выбрать:</option>
    <option value="1">Ольха</option>
    <option value="2">Берёза</option>
    <option value="3">Бузина</option>
    <option value="4">Тис</option>
</select> 
    <input type="submit" value="Отправить">
</form>
Какое растение в списке вечнозелёное?

size ="число" Задает количество одновременно видимых на экране элементов списка. Если количество элементов списка превышает установленное количество, появляется полоса прокрутки. Значение атрибута задается целым положительным числом.

Зависит от атрибута multiple. Если он присутствует, то размер списка равен количеству элементов. Когда атрибута multiple нет, то по умолчанию значение атрибута size равно 1.

6

<form action="test.php">
<select size="1">
 <option disabled value="">Выберите цвет:</option>
 <option>Красный</option>
 <option>Зеленый</option>
 <option>Синий</option>
 <option>Белый</option>
 <option>Чёрный</option>
</select>
<input type="submit" value="Отправить">        
</form>