http://ruseller.com/lessons.php?id=592&rub=28 http://mif.vspu.ru/books/js/les11.html Формы В этой главе мы будем создавать форму посложнее - форму опроса. Допустим, вы ведущий популярного сайта о кино. Ваш спонсор предлагает вам разместить у вас на сайте опрос, чтобы выяснить, какие фильмы и актеров предпочитают люди, которые любят смотреть кино. В качестве приза - одному из заполнивших анкету достанется путешествие в выбранную им страну. Вот такую анкету вы предложите заполнить вашим посетителям: Ф.И.О. Вы: Мужчина Женщина Какие фильмы вы любите смотреть? фантастику боевики приключенческие мелодрамы документальные Из этих актеров вам больше нравится: Гордый Горец Недоделанный Рембо Ковбой В Шляпе Слезливый Бобби В какую страну вы хотели бы поехать? Ваш е-майл: @ Отправить анкету Отмена В этой анкете много для вас незнакомых элементов формы, но есть и уже знакомые вам. Давайте для начала создадим их, а затем я познакомлю вас с остальными. Что мы уже знаем? Мы знаем, как форма вводится в документ: <form name="anketa" method="post" action="http://mysite.ru/script"> </form> Name - обязательный элемент, имя формы. Method - как будет обрабатываться наша форма. Action путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса. Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл): <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 - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля). Пока что у нас с вами получилась такая форма: Ф.И.О. Ваш е-майл: @ Как видите, нам еще далеко до конечного результата. Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса: <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> Type - тип элемента, мы указали, что это кнопка отправки и кнопка сброса. Value - надписи на кнопках. Ф.И.О. Ваш е-майл: @ Отправить анкету Отмена Больше знакомых нам элементов в данной форме нет. Поэтому приятный процесс вспоминания проденного ранее закончен, и начинается обучение. Начнем мы с "переключателей": Вы: Мужчина Женщина Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ - ИЛИ. Или он - мужчина, или она - женщина, и то и другое выбрать не получится. А теперь разберем код, который мы должны ввести в нашу форму: <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 (значение) - должно быть обязательно разным. Теперь поговорим о следующем незнакомом нам элементе формы, о "флажках": Какие фильмы вы любите смотреть? фантастику боевики приключенческие мелодрамы документальные Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ). Но давайте посмотрим код для этого элемента формы и разберемся в нем: <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 <option <option <option <option value="france">Франция value="USA">США value="england">Англия value="italy">Италия value="australia">Австралия </select> <br><br> Итак, выпадающий список вводится при помощи тега <SELECT></SELECT>. Каждый пункт выпадающего списка вводится при помощи тега <OPTION>. Name - мы задаем только для тега <SELECT>, и оно относится ко всему списку. Value - мы задаем для каждого тега <OPTION> (пункта списка). По умолчанию первый пункт в списке - так и отображается, первым, выбранным. Однако, мы можем при помощи атрибута selected для тега <OPTION> выбрать другой пункт по умолчанию: <b>В какую страну вы хотели бы поехать?</b><br> <select name="country"> <option <option <option <option <option value="france">Франция value="USA">США value="england">Англия value="italy" selected>Италия 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 <option <option <option <option value="gorez">Гордый Горец value="rembo">Недоделанный Рембо value="cowboy">Ковбой В Шляпе value="crybobby">Слезливый Бобби value="history">Историческая личность </select> <br><br> Вот так, это выпадающий список, но стоит лишь добавить атрибут size для тега <SELECT>, то выпадающий список превратится в прокручивающийся: <b>Из этих актеров вам больше нравится:</b><br> <select name="actor" size="4"> <option <option <option <option <option value="gorez">Гордый Горец value="rembo">Недоделанный Рембо value="cowboy">Ковбой В Шляпе value="crybobby">Слезливый Бобби value="history">Историческая личность </select> <br><br> Волшебство, да и только :) Атрибут size определяет число строк в прокручивающемся списке, видимых в один момент времени. Size=4 - в нашем списке четыре видимых строки. Вот мы и разобрали все незнакомые вам элементы нашей формы, можете смело добавить их в код вашей формы, посмотреть, что же получилось в итоге, и точно ли получилось, а затем переходить к следующему уроку, где мы проведем последний наш разговор о формах. Объекты, скрипты и другие средства, чтобы оживить наш документ. Скрипт - это некий механизм, программа, специальная программа для веб. Как объекты и CSS, скрипты не являются частью html, это другие технологии, которые мы привязываем к нашему документу при помощи специальных тэгов или их атрибутов. Скрипты (программы) бывают как простыми (выпадение нового окна без тулбаров и меню, выпадающее меню, кнопки "назад-вперед" и т.д), так и сложными (гостевая книга, счетчик, форум, голосование, чат и т.д.). Подробнее о скриптах, где их взять, как с ними обращаться, где найти учебную литературу по скриптам, и все остальное расскажет вам разделПрограммирование на нашем сайте. Моя же задача в рамках данного учебника научить вас некоторым способам внедрения скриптов в наш htmlдокумент. Итак, как и в случае с CSS код скрипта может внедряться непосредственно в код вашего htmlдокумента при помощи специального тэга SCRIPT: <html> <head> <title>Документ со скриптом</title> </head> <body> <script type="text/javascript"> ... код скрипта... </script> </body> </html> Атрибут type определяет тип содержимого (язык скрипта, в нашем примере указано, что будет использоваться Javascript). Однако, скрипт может быть вынесен и во внешний файл, из которого он будет подгружаться. А значит, надо указать путь к этому файлу, при помощи атрибута src: <html> <head> <title>Документ со скриптом</title> <script type="text/javascript" src="http://site.ru/put_k_sciptu/"></script> </head> <body> <script type="text/javascript"> ... код скрипта... </script> </body> </html> Вы, наверное, уже обратили внимание, что из тела документа я не убрала html-код для внедрения скрипта. Это не ошибка, это может быть часть скрипта, без которой он не будет работать. Или же это может быть еще один скрипт, который мы внедрили в наш документ (т.е. в итоге получили два скрипта на один html-документ). Кроме того, для внедрения скрипта в наш html-документ, мы можем использовать специальные атрибуты, которые могут употребляться почти со всеми тэгами. <html> <head> <title>Документ со скриптом</title> </head> <body> <a name="ist"></a> <a href="ist2.html#ist" onclick='open("big.html", "displayWindow1", "width=780, height=540, status=no, toolbar=no, menubar=no");'><img src="small.gif"></a> </body> </html> Итак, полужирным шрифтом в нашем примере выделен код скрипта, который отвечает за открытие нового окна определенных размеров без меню и тулбара при нажатии на ссылку, в которую, собственно, наш скрипт и внедрен. Скрипт внедрен в тэг <A> при помощи специального атрибута onclick - указывающего, что при одиночном нажатии на ссылку (или объект, или кнопку) - произойдет какое-то событие, какое именно, зависит от скрипта, который мы внедрили в наш документ, в нашем случае это открытие нового окна. Кроме атрибута onclick существет еще много специальных атрибутов, каких именно и с какими тэгами они употребляются вам расскажет спецификация по HTML. О скриптах и программировании вы узнаете в разделе Программирование. А о других возможностях html - на следующей ступеньке :)