Формы select

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



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

<p>Сколько времени в день вы лежите на диване?</p>
<p>
<select name="slip" size="3" multiple>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>более 8</option>
</select>
</p>

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

<option> - Тэг который определяет уже конкретный вариант выбора из выпадающего списка. Вообще эти формы select можно сравнить с обычными списками которые создаются в html, где тэг <ul> открывает сам список, а в тэги <li> заносятся элементы которые будут входить в этот список.

name="slip" - Мы знаем что данные из форм отправляются в обработчик, поэтому у этой формы select должно быть своё имя, которое и указывается в атрибуде "name"

size="3" - Это не обязательный атрибут, в отличии от формы type="text", он здесь влияет не на ширину, а на то, сколько элементов будет изначально видно в этом выпадающем списке, в нашем случае будет видно сразу три элемента списка.

multiple - Это атрибут который позволяет выбирать сразу несколько элементов из выпадающего списка, в переводе с английского "multiple" означает множественный. Так что формы select позволяют нам регулировать количество показываемых пунктов в списке и реализовывать возможность множественного выбора.

Еще есть в этой разновидности форм, есть нечто подобное атрибуту checked который мы проходили в прошлых уроках, он делает уже изначально выбранным какой нибудь конкретный пункт из выпадающего списка. Например если мы хотим чтобы в нашей форме в начале был сразу выбран пункт 8, то прямо в теге option прописываем следующее:

<option selected>8</option>

Так же у формы select вы можете применять параметры value, это делается в тех случаях, когда вы не хотите чтобы в обработчик отправилось имя выбранного пользователем пункта, а в место него полетело бы в обработчик его значение, реализуется это так:

<option value="seven">8</option>

В этом случае заместо цифры 8, в обработчик полетит значение "seven". Но для вас этот атрибут будет полезен только в том случае, если вы будете дальше изучать PHP и java-script c jquery.
Если Вам понравился этот урок, то следующая статья про html textarea, будет для вас не менее интересной.

Комментариев нет:

Отправить комментарий