Среда, 27 Февраля 2013 09:51

Элемент option

Written by 
Оцени эту запись
(2 Голоса)

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

 

Пример:

 

<select>

<option>HTML</option>

<option>CSS</option>

<option>JavaScript</option>

</select>

 

Результат:

 

 

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

 

Пример:

 

 

Дата рождения:

 

 

 

 

Элементы option внутри списка select могут быть сгруппированы при помощи элемента optgroup:

 

 

 

<p>Выберите город:</p>

 

<select>
<optgroup label="Украина">
<option>Киев</option>
<option>Львов</option>
<option>Одесса</option>
</optgroup>
<optgroup label="Россия">
<option>Москва</option>
<option>Санкт-Петербург</option>
</optgroup>
</select>

Выберите город:

 

 

Элемент option поддерживается всеми современными браузерами.

Элемент option должен иметь открывающий и закрывающий теги.

 

Атрибуты элемента option

 

Элементу option применимы все универсальные атрибуты и атрибуты событий. Кроме того, у элемента есть свои атрибуты:

 

disabled - делает элемент неактивным; значение атрибута - disabled

 

label - задает короткую метку для элемента

 

selected - указывает, что элемент(пункт списка) должен быть выделенным при загрузке страницы; значение атрибута - selected

 

value - задает значение атрибута, которое будет отослано на сервер при отправке формы

 

 

Стилизация элемента option

 

Элементы option, как и их родительский элемент select плохо поддаются оформлению при помощи CSS. Но можно задавать простые стили, вроде размера и цвета шрифта или цвета фона:

 

option {

background: magenta;

color: blue;

}

 

 

Результат:

 

 

 

 

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов