Закрыть ... [X]

Как сделать выбранный select

Доброго здоровья всем моим читателям! Продолжаем постигать премудрости создания html форм для сайта и сегодня нашей задачей будет разобраться, как создавать html формы в виде выпадающего списка при select помощи тегов select и option, как сконструировать текстовое поле посредством тега textarea, а также поговорим о возможности расширения функциональности форм путем применения тегов fieldset, label и legend.

Html форма на сайте

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

Какое же практическое предназначение разнообразных форм? А нужны они для того, чтобы отправлять те или иные данные от пользователя на сервер (например, при установке формы обратной связи для сайта WordPress). К сожалению, средства языка гипертекстовой разметки не позволяют напрямую обрабатывать эти данные, поэтому с помощью html кода мы создаем лишь внешний вид формы, а данные отправляются на сервер обработчику, в качестве которого выступает специально созданный для этого файл php (например, при установке формы обратной связи был создан файл mail.php, который и является обработчиком), обычно выполненный в виде скрипта.

Тег select предназначен для создания выпадающего списка. Каждый элемент этого списка создается с помощью тега option, он должен быть вложен в контейнер, определяющийся тегом select.

<select><option>Выберите из списка</option> <option>Option</option> <option>Textarea</option> <option>Label</option> <option>Fieldset</option>< <option>Legend</option></select> Выберите из списка Option Textarea как сделать выбранный select Label Fieldset Legend

Однако, это общий случай, который на практике редко применяется, поскольку обычно необходим более широкий функционал формы выпадающего списка, который определяется атрибутами тегов select и option. То есть, если использовать выше приведенный пример, то из выпадающего списка можно выбрать только один элемент (строчку). Если прописать атрибут тега select multiple, то сразу появляется возможность множественного выбора:

<select multiple><option>Option</option> <option>Textarea</option> <option>Label</option> <option>Fieldset</option> <option>Legend</option></select> Option Textarea Label Fieldset Legend

Вы можете попробовать выбрать из данного списка сразу несколько строк, удерживая клавиши Ctrl и Shift. Еще один атрибут тега select - size, который устанавливает высоту выпадающего списка, то есть количество строк, которые будут отображаться. Надо сказать, что различные браузеры по-разному реагируют на этот атрибут. Например, Гугл Хром (здесь о том, как бесплатно скачать последнюю версию, установить и настроить) его совсем игнорирует, а Фаерфокс (тут о браузере Mozilla Firefox подробно) устанавливает высоту списка, равной его значению (при size=“1” будет отображаться 1 элемент).

Таким образом, если атрибут multiple присутствует, то будут отображаться все элементы (строки), которые имеются в наличии. При его отсутствии по умолчанию отображается только одна строка, остальные будут появляться только при использовании кнопки справа.

Атрибут required устанавливает, что обязательно необходимо сделать выбор перед отправкой данных обработчику. Если выбор из списка не сделан, то данные формы отправлены не будут.

<select required><option></option> <option value="1">Option</option> <option value="2">Textarea</option> <option value="3">Label</option> <option value="4">Fieldset</option> <option value="5">Legend</option></select> <input type="submit" value="Отправить"> Option Textarea Label Fieldset Legend

Остальные атрибуты тега select - accesskey, autofocus, disabled, form, name - применяются аналогично атрибутам с такими же названиями тега button, так что повторяться нет смысла. Теперь рассмотрим атрибуты тега option:

1. disabled - блокирует для выбора элемент выпадающего списка.

<select multiple><option>Option</option> <option disabled>Textarea</option> <option>Label</option> <option>Fieldset</option>< <option>Legend</option></select> Option Textarea Label Fieldset Legend

Как видно из примера, строчка Textarea неактивна и выбрать ее невозможно.

2. label - этот атрибут предназначен для сокращения текста внутри тега option. Если label присутствует, то выводится сокращенная строчка, тождественная значению этого атрибута.

<select multiple><option>Option</option> <option label="Textarea">Тег Textarea</option> <option>Тег Label</option> <option>Тег Fieldset</option>< <option>Тег Legend</option></select> Тег Option Тег Textarea Тег Label Тег Fieldset Тег Legend

3. selected - выделяет текущий пункт выпадающего списка. Если присутствует атрибут multiple, то есть возможность выделения более одного элемента.

<select><option>Выберите из списка</option> <option>Option</option> <option>Textarea</option> <option>Label</option> <option selected>Fieldset</option> <option>Legend</option></select> Выберите из списка Option Textarea Label Fieldset Legend
<select multiple> <option>Option</option> <option selected>Textarea</option> <option>Label</option> <option selected>Fieldset</option> <option>Legend</option></select> Option Textarea Label Fieldset Legend

4. value - этот атрибут определяет то значение из выпадающего списка, которое будет отправлено на сервер (обработчику вебформы). Собственно, обработчику отправляется пара: имя, которое задается атрибутом name тега select и значение value всех выделенных строк выпадающего списка.

<select name="список"> <option value="1">Option</option> <option value="2">Textarea</option> <option value="3">Label</option> <option value="4">Fieldset</option> <option value="5">Legend</option></select> <input type="button" value="OK"> Option Textarea Label Fieldset Legend

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

<select><optgroup label="Группа 1"> <option value="1">Option</option> <option value="2">Textarea</option> </optgroup><optgroup label="Группа 2"> <option value="3">Label</option> <option value="4">Fieldset</option> <option value="5">Legend</option></select> Option Textarea Label Fieldset Legend Option Textarea Label Fieldset Legend Не подписываться Все Ответы на мои комментарии


Поделись с друзьями



Рекомендуем посмотреть ещё:



Как сделать select с "памятью" выбранного ранее. Nulled Warez Scripts Анекдот что заводишься

Как сделать выбранный select Как сделать выбранный select Как сделать выбранный select Как сделать выбранный select Как сделать выбранный select Как сделать выбранный select

ШОКИРУЮЩИЕ НОВОСТИ