Лекция: Ступенька 50-ая.

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

Вот такую анкету вы предложите заполнить вашим посетителям:

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

Что мы уже знаем? Мы знаем, как форма вводится в документ:

Name — обязательный элемент, имя формы. Method — как будет обрабатываться наша форма. Action — путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса.

Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):

Type=text — мы указали, что имеем дело с полем для ввода текста. Name — имена элементов. Size — размер полей для ввода текста. Maxlength — максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value — значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля).

Пока что у нас с вами получилась такая форма:

Как видите, нам еще далеко до конечного результата.

Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:

Type — тип элемента, мы указали, что это кнопка отправки и кнопка сброса. Value — надписи на кнопках.

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

Начнем мы с «переключателей»:

Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ — ИЛИ. Или он — мужчина, или она — женщина, и то и другое выбрать не получится.

А теперь разберем код, который мы должны ввести в нашу форму:

Итак, «переключатели» вводятся в нашу форму при помощи знакомого вам тега <INPUT>, type для которого мы указываем radio (type=radio). Name — обратите внимание, что для «переключателей» имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) — должно быть обязательно разным.

Теперь поговорим о следующем незнакомом нам элементе формы, о «флажках»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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