Первые шаги - Учебник по хтмл (html). Формы. Элементы формы. Форма опроса.

Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ).

Но давайте посмотрим код для этого элемента формы и разберемся в нем:

<b>Какие фильмы вы любите смотреть?</b><br> <input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes"> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br>

Итак, как мы видим, во всем виноват знакомый нам тег <INPUT>, только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name - обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) - для всех "флажков" одинаковое.

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

<b>Какие фильмы вы любите смотреть?</b><br> <input type=checkbox name="fiction" value="yes"> фантастику<br> <input type=checkbox name="thriller" value="yes"> боевики<br> <input type=checkbox name="adventure" value="yes" checked> приключенческие<br> <input type=checkbox name="melodrama" value="yes"> мелодрамы<br> <input type=checkbox name="documentary" value="yes"> документальные <br><br>

Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":

Какие фильмы вы любите смотреть? фантастику боевики приключенческие мелодрамы документальные

Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое.

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

В какую страну вы хотели бы поехать?

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

<b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option value="france">Франция <option value="USA">США <option value="england">Англия <option value="italy">Италия <option value="australia">Австралия </select> <br><br>

Итак, выпадающий список вводится при помощи тега <SELECT></SELECT>. Каждый пункт выпадающего списка вводится при помощи тега <OPTION>. Name - мы задаем только для тега <SELECT>, и оно относится ко всему списку. Value - мы задаем для каждого тега <OPTION> (пункта списка).

По умолчанию первый пункт в списке - так и отображается, первым, выбранным. Однако, мы можем при помощи атрибута selected для тега <OPTION> выбрать другой пункт по умолчанию:

<b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option value="france">Франция <option value="USA">США <option value="england">Англия <option value="italy" selected>Италия <option value="australia">Австралия </select> <br><br>

Получим следующее:

В какую страну вы хотели бы поехать?

Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега <OPTGROUP></OPTGROUP>:

<b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <OPTGROUP label="Европа"> <option value="italy">Италия <option value="france">Франция </OPTGROUP> <OPTGROUP label="Другие"> <option value="USA">США <option value="england">Англия <option value="australia">Австралия </OPTGROUP> </select> <br><br>

Результат (нажмите на список):

В какую страну вы хотели бы поехать?

Вот и все премудрости с выпадающем списком. А значит нам в этом уроке осталось разобрать последний незнакомый нам элемент нашей формы:

Из этих актеров вам больше нравится:

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

<b>Из этих актеров вам больше нравится:</b><br> <select name="actor"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br>

Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега <SELECT>, то выпадающий список превратится в прокручивающийся:

<b>Из этих актеров вам больше нравится:</b><br> <select name="actor" size="4"> <option value="gorez">Гордый Горец <option value="rembo">Недоделанный Рембо <option value="cowboy">Ковбой В Шляпе <option value="crybobby">Слезливый Бобби <option value="history">Историческая личность </select> <br><br>

Волшебство, да и только :)

Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 - в нашем списке четыре видимых строки.

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

Обсудить этот материал на форуме

<<< Ступенька 49-ая: Назад | Далее: В разработке >>>