Регистрация Войти
Войти через VK




Поиск по сайту



PHP Поиск



Список - <select>

Предназначен для создания списка предложенных пунктов, из которого пользователь может выбрать один или несколько. Ограничивается тегами <select>…</select>.

Атрибуты тега <select>
autofocus
Автоматическое получение фокуса при загрузке страницы. Значение можно задать тремя способами:
<select autofocus>...</select>
<select autofocus="">...</select>
<select autofocus="autofocus">...</select>
disabled
Блокирует выбор из списка. Значение можно задать тремя способами:
<select disabled>...</select>
<select disabled="">...</select>
<select disabled="disabled">...</select>
multiple
Позволяет выбрать несколько пунктов списка одновременно. Следует обратить внимание, что при множественном выборе в потоке данных от одной формы может присутствовать несколько переменных с одним и тем же именем. Ваша программа обработки должна предусматривать подобные ситуации и корректно их обрабатывать.
name
Имя списка. Обязательный атрибут.
required
Обязательно должен быть выбран пункт с непустым значением. Если это не выполнено, то браузер выведет сообщение, а форма на сервер отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может (не работает в IE и Safari).
size
Вертикальный размер окна списка. Если атрибут опущен или его значение равно 1, выводится всплывающий список пунктов. Если указано число больше 1, то пункты списка выводятся в окне с полосой прокрутки. Если значение атрибута больше, чем фактическое количество пунктов списка, то добавляются пустые пункты. При их выборе пользователем возвращаются пустые поля.

Для тега <select> также доступны общие атрибуты и атрибуты обработки событий.

Пункт списка <option>

Каждый пункт списка ограничивается тегами <option>...</option>. Закрывающий тег необязателен.

Атрибуты тега <option>
disabled
Блокирует выбор пункта списка.
label
Метка пункта списка. Если указан атрибут label, то в списке выводится его значение вместо текста внутри тега <option> (в Firefox не работает).
selected
Пункт списка, выбранный по умолчанию.
value
Значение, передаваемое сценарию в случае выбора пользователем определенного пункта. Если этот атрибут отсутствует, то в сценарий будет отослан текст, расположенный сразу после тега <option>.

Любые теги,помещенные внутри тега option, будут проигнорированы.

Для тега <option> также доступны общие атрибуты и атрибуты обработки событий.

Пример выпадающего списка
<form>
    <select name="s1">
        <option value="tea">Чай</option>
        <option value="coffee">Кофе</option>
        <option value="milk">Молоко</option>
        <option value="ham">Ветчина</option>
        <option value="cheese">Сыр</option>
    </select>
</form>

РЕЗУЛЬТАТ:

Пример списка с множественным выбором
<form>
    <select name="s2" size="5" multiple>
        <option value ="tea">Чай</option>
        <option value ="coffee" selected>Кофе</option>
        <option value ="milk">Молоко</option>
        <option value ="ham">Ветчина</option>
        <option value ="cheese">Сыр</option>
    </select>
</form>

РЕЗУЛЬТАТ:

Группа пунктов списка <optgroup>

Контейнер <optgroup>...</optgroup> позволяет группировать пункты списка. В этом случае названия каждой группы будут выделены жирным, а некоторые браузеры еще добавляют отступы, так что пользователю при выборе необходимого пункта ориентироваться гораздо проще.

Для тега <optgroup> доступны общие атрибуты и атрибуты обработки событий.

Пример группировки пунктов списка
<form>
    <select name="s3" size="10">
        <optgroup label="HTML">
            <option value="h3">HTML3.2</option>
            <option value="h4">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

РЕЗУЛЬТАТ:

Более того, для дополнительной наглядности каждую группу с помощью CSS можно раскрасить в свой цвет.

Пример выделения цветом групп пунктов списка
<form>
    <select name="s4" size="10">
        <optgroup label="HTML" style="background-color: rgba(0, 132, 0, 0.5)">
            <option value="h3">HTML3.2</option>
            <option value="h4">HTML4.0</option>
            <option value="h5">HTML5</option>
        </optgroup>
        <optgroup label="CSS" style="background-color: rgba(255, 132, 0, 0.5)">
            <option value="css1">CSS1</option>
            <option value="css2">CSS2</option>
            <option value="css3">CSS3</option>
        </optgroup>
        <option value="js">JavaScript</option>
        <option value="dhtml">DHTML</option>
    </select>
</form>

РЕЗУЛЬТАТ:


.

Популярное:


Содержание:


Новое за неделю



Сейчас на сайте: 1253