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

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

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

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

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

Атрибут <option>

Атрибут Значение Описание
disabled disabled Блокирует элемент списка для его выбора.

<option disabled>...</option>
label ="text" Атрибут предназначен для указания метки пункта списка, сокращённой по сравнению с текстом внутри <option>. Если атрибут label присутствует, то текст внутри <option> игнорируется и в списке выводится значение label.

<option label="текст">...</option>

Если атрибут <label>не указан, то его значением выступает содержимое элемента <option>.

1 
<form action="test.php">
Кто написал басню Ворона и Лисица?

 <select name="kto">
 <option label="Маршак" value="1">Маршак Самуил Яковлевич</option>
 <option label="Филатов" value="2">Филатов Леонид Алексеевич</option>
  <!-- label не указан -->
  <option value="3">Чуковский Корней Иванович</option>
 <option label="Крылов" value="4">Крылов Иван Андреевич</option>
 </select> <input type="submit" value="Отправить">
</form>

Кто написал басню Ворона и Лисица?
selected selected Заранее устанавливает определённый пункт списка выделенным. Если к элементу <select> добавлен атрибут multiple, то можно выделять более одного пункта списка.

<option selected>...</option>

Выберите цвет:    
<select>
 <option>Красный</option>
 <option>Зеленый</option>
 <option selected>Синий</option>
 <option>Белый</option>
 <option>Чёрный</option>
</select>

Выберите цвет:
value ="text" Значение пункта списка, которое будет отправлено на сервер или прочитано с помощью скриптов.

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

На сервер отправляется пара «имя=значение», где имя задаётся атрибутом name элемента <select>, а значение - атрибутом value выделенных пунктов списка. Значение может как совпадать с текстом пункта, так быть и самостоятельным. Также атрибут value применяется для получения значений данных через скрипты.

2 
<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>Выберите цвет:</option>
 <option value="Красный">Красный</option>
 <option value="Зеленый">Зеленый</option>
 <option value="Синий">Синий</option>
</select>
<input type="button" value="OK" onClick="dataSelect(this.form)">
</form>