Строение
HTML: Формы (Создание опроса)
Тема в разделе "Веб-программирование", создана пользователем CLASSIK, 3 дек 2009.
  1. CLASSIK

    CLASSIK Новичок

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

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



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

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


    HTML:
    <form name="anketa" method="post" action="http://mysite.ru/script">
    </form>

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

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


    HTML:
    <form name="anketa" method="post" action="http://mysite.ru/script">
    
    <b>Ф.И.О.</b><br>
    <input type=text name="fio" size=37 maxlength=100><br><br>
    
    <b>Ваш е-майл:</b><br>
    <input type=text name="email" size=37 maxlength=80 value="@">
    
    </form>
    Type=text - мы указали, что имеем дело с полем для ввода текста. Name - имена элементов. Size - размер полей для ввода текста. Maxlength - максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля).

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

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


    HTML:
    <form name="anketa" method="post" action="http://mysite.ru/script">
    
    <b>Ф.И.О.</b><br>
    <input type=text name="fio" size=37 maxlength=100><br><br>
    
    <b>Ваш е-майл:</b><br>
    <input type=text name="email" size=37 maxlength=80 value="@"><br><br>
    
    <input type=submit value="Отправить анкету"><input type=reset value="Отмена">
    
    </form>
    Больше знакомых нам элементов в данной форме нет. Поэтому приятный процесс вспоминания проденного ранее закончен, и начинается обучение.

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

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

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


    HTML:
    <b>Вы:</b> 
    Мужчина<input type=radio name="sex" value="man"> 
    Женщина<input type=radio name="sex" value="woman">
    <br><br>

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

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

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

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


    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:


    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" checked> приключенческие<br>
    <input type=checkbox name="melodrama" value="yes"> мелодрамы<br>
    <input type=checkbox name="documentary" value="yes"> документальные 
    <br><br>
    
    Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":

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

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

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



    HTML:
    <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> выбрать другой пункт по умолчанию:


    HTML:
    <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>:


    HTML:
    <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>

    Вот и все премудрости с выпадающем списком.

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


    HTML:
    <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>, то выпадающий список превратится в прокручивающийся:


    HTML:
    <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 - в нашем списке четыре видимых строки.

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