Итак, на нашу елку (html) мы можем повесить шарики и игрушки (объекты - картинки, музыка, фильмы и т.д.), можем приладить электрические гирлянды и другую мишуру (CSS), но также мы можем внедрить в нашу елку целый инородный механизм - скрипты - которые заставят нашу елочку плясать, петь, и делать, что нам угодно.
Скрипт - это некий механизм, программа, специальная программа для веб. Как объекты и CSS, скрипты не являются частью html, это другие технологии, которые мы привязываем к нашему документу при помощи специальных тэгов или их атрибутов. Скрипты (программы) бывают как простыми (выпадение нового окна без тулбаров и меню, выпадающее меню, кнопки "назад-вперед" и т.д), так и сложными (гостевая книга, счетчик, форум, голосование, чат и т.д.).
<head>
<title>Документ со скриптом</title>
</head>
<body>
<script type="text/javascript">
... код скрипта...
</script>
</body>
</html>
Однако, скрипт может быть вынесен и во внешний файл, из которого он будет подгружаться. А значит, надо указать путь к этому файлу, при помощи атрибута src:
<head>
<title>Документ со скриптом</title>
<script type="text/javascript" src="http://site.ru/put_k_sciptu/"></script>
</head>
<body>
<script type="text/javascript">
... код скрипта...
</script>
</body>
</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>
В этой главе мы начнем разговор о формах. Каждый из вас наверняка, как пользователь интернет, хоть раз да видел или заполнял какую-либо форму. Вот как она выглядит: 
Не пытайтесь нажимать на кнопки и ставить курсор на поля формы, это картинка :)
Все вы знаете, что формы создаются средствами html - это верно. Однако, это служит возникновению одного большого заблуждения: многие считают, что достаточно научится создавать формы средствами html, чтобы у них на сайте появилась, например, гостевая книга - это не верно.
Форма - это лишь каркас. При помощи html мы лишь определяем, что тут у нас будет поле формы, а вот тут у нас будет кнопка, а на кнопке будет такая надпись, и т.д. Однако, чтобы при нажатии на кнопку формы ваше сообщение добавилось в гостевую книгу нужна иная технология - нужна некая программа, скрипт, который мы должны привязать к нашей форме.
Подробнее о скриптах и с чем их едят вы можете почитать в разделе Программирование на нашем сайте. А мы же с вами будем учиться в нашем учебнике только тому, как размечать формы средствами html.
Формы вводятся в документ при помощи тега <form></form>:
</form>
</form>
</form>
Элементов формы не так уж много, это: кнопки, флажки, переключатели, поля и списки (выпадающий и прокручивающийся). Кроме того, в формы можно внедрять другие объекты.
Есть два варианта изучения форм: 1 - рассмотреть все элементы форм подряд, 2 - рассмотреть создание форм на конкретных примерах. Мы с вами пойдем по второму пути и начнем с такой вот формы:
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
<textarea name="comments"></textarea>
</form>
Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
Ваш комментарий:<br>
<textarea name="comments"></textarea>
</form>
Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea>
</form>
В нашу форму мы будем вводить два типа кнопок: кнопку отправки и кнопку сброса. Есть еще и третий тип кнопок, для которых спецификацией по умолчанию значение не определено. Какое событие происходит при нажатии на такую кнопку - определяет создатель формы при помощи какого-либо скрипта. Этот тип кнопки мы с вами рассматривать не будем, если вы увлечетесь программированием или кодингом серьезно - то, как я полагаю, вы сами разберетесь, что к чему с этим третьим типом кнопки. Для создания типичных форм - он вам не нужен.
Итак, кнопка для отправки информации (к вам на е-майл или к скрипту на обработку) создается при помощи уже знакомого вам тега <INPUT> и его атрибута type.
Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>
<input type=submit>
</form>
Кнопка сброса информации создается аналогично. Только для type мы вводим не значение submit, а reset:
Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>
<input type=submit> <input type=reset>
</form>
Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>
<input type=submit value="ОК"> <input type=reset value="Отмена">
</form>
Почему "лирическое отступление", может удивиться мой читатель, ведь вроде бы мы закончили разбираться с формой, которую хотели построить в этом уроке? Нет, не закончили. Мы забыли указать один жизненно важный атрибут, без которого форма не будет работать:
Ваше имя:<br>
<input type=text name=firstname value="введите ваше имя" size="40" maxlength="20"><br><br>
Ваш комментарий:<br>
<textarea rows=7 cols=40 name="comments">введите ваш комментарий</textarea><br><br>
<input type=submit value="ОК"> <input type=reset value="Отмена">
</form>
В этой главе мы будем разбираться с формой поиска, но мы не будем создавать ее с нуля, мы возьмем готовую форму и поучимся разбирать готовую форму для наших целей.
Форма у нас будет не простая. Форму поиска мы возьмем с Яндекса. Эта поисковая система позволяет вам делать поиск по вашему сайту через нее, но для этого нужно, чтобы ваш сайт был зарегистрирован в Яндексе, и поисковая система уже знала все, или почти все страницы вашего сайта.
Не обязательно на вашем сайте использовать форму от Яндекса, другие поисковики тоже вам дают возможность осуществлять поиск по вашему сайту через них, однако, мне милее Яндексовский поиск, если вы со мной не согласны, то потом можете зайти на сайты других поисковых систем и взять у них коды их форм. Если ваш хостер вам дает возможность устанавливать скрипты на вашем сайте, то вы можете скачать готовый скрипт с готовой формой и установить его, но мы сейчас с вами не разбираем процесс установки скрипта, а разбираем построение форм, опять же, именно поэтому форма от Яндекса как нельзя лучше подходит нам для нашего урока.
Вот так наша форма выглядит:
На первый взгляд тут всего два элемента формы (кнопка и строка для ввода текста), и форма кажется простой. Однако, все несколько сложнее, чем кажется. Посмотрите на код нашей формы:
<input type=text name="text" size=18 value="" maxlength=80>
<input type=submit value="искать">
<input type=hidden name="serverurl" value="http://narod.ru">
<input type=hidden name="server_name" value="Народные сайты">
</form>
</form>
Давайте разбираться дальше:
<input type=text name="text" size=18 value="" maxlength=80>
</form>
Что ж, опять ничего страшного и ничего незнакомого. Вам все должно быть понятно, поэтому перейдем к следующему элементу формы:
<input type=text name="text" size=18 value="" maxlength=80>
<input type=submit value="искать">
</form>
Вот видите! А вы боялись! А мы уже с вами половину формы разобрали :) Но продолжим:
В этой главе мы будем создавать форму посложнее - форму опроса. Допустим, вы ведущий популярного сайта о кино. Ваш спонсор предлагает вам разместить у вас на сайте опрос, чтобы выяснить, какие фильмы и актеров предпочитают люди, которые любят смотреть кино. В качестве приза - одному из заполнивших анкету достанется путешествие в выбранную им страну.
Вот такую анкету вы предложите заполнить вашим посетителям:
Что мы уже знаем? Мы знаем, как форма вводится в документ:
</form>
Что нам еще знакомо в этой форме? Поля для ввода текста (ФИО и е-майл):
<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>
Пока что у нас с вами получилась такая форма:
Какие элементы формы нам еще знакомы тут? Кнопка отправки информации и кнопка сброса:
<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>
Начнем мы с "переключателей":
А теперь разберем код, который мы должны ввести в нашу форму:
Мужчина<input type=radio name="sex" value="man">
Женщина<input type=radio name="sex" value="woman">
<br><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>
Если вы хотите, чтобы какой-то флажок или переключатель был выбран по умолчанию, то мы можем ввести в наш код для этого "флажка" или "переключателя" атрибут checked:
<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>
Когда мы разобрались с "переключателями" и "флажками", перейдем к следующему незнакомому нам элементу в нашей форме:
Ступенька 46-ая.
<html>
Атрибут type определяет тип содержимого (язык скрипта, в нашем примере указано, что будет использоваться Javascript).
<html>
<html>
<form>
Данные из формы могут быть отправлены на обработку к какому-либо скрипту (путь к которому надо, конечно же, указать):
Ступенька 48-ая. <form action="http://www.mysite.ru/cgi-bin/guestbook/">
Или на какой-либо почтовый сервер (к вам на е-майл):
<form action="mailto:vasya@mail.ru">
Как видите, пока что все просто и понятно.
Такое поле вводится при помощи тега <TEXTAREA></TEXTAREA>. <TEXTAREA> - создает элемент для многострочного ввода текста:
<form action="mailto:vasya@mail.ru">
Разберемся: name - как вы уже знаете, обязательный атрибут, поэтому мы его ввели (куда бы мы делись). Чтобы расположить элементы формы друг под другом, мы ввели уже знакомый вам тег <br>. Вообще, как располагаются элементы формы относительно друг друга вы можете определять уже при помощи знакомых вам тегов и атрибутов. Используйте их, не стесняйтесь. Хотите - можете расположить форму в таблице, где каждый элемент формы будет находится в отдельной ячейке. Хотите введите поясняющий текст с картинками (или без):
<form action="mailto:vasya@mail.ru">
Вот, что получим:
Но мы немного отвлеклись, а ведь мы еще не договорили о <TEXTAREA> и его атрибутах. Что мы можем с ним сделать? Указать высоту поля (rows = количество строк), указать ширину поля (cols = количество печатных символов в строке), ввести некий текст, который будет отображен в форме (<TEXTAREA>текст по умолчанию</TEXTAREA>).
<form action="mailto:vasya@mail.ru">
Результат:
Итак, часть работы по созданию нашей формы мы проделали, осталось ввести кнопки, а то не порядок, когда и нажать не на что :)
<form action="mailto:vasya@mail.ru">
Результат:
Как вы видите, для кнопок атрибут name не обязателен, поэтому мы его не вводим.
<form action="mailto:vasya@mail.ru">
Результат:
Стандартные надписи на копках мы можете заменить на свои при помощи уже знакомого вам атрибута value:
<form action="mailto:vasya@mail.ru">
Результат:
Лирическое отступление: многие читатели справшивают меня, а как изменить вид кнопок или полей, т.е., например, сделать кнопку оранжевого цвета. Отвечаю: при помощи CSS. Что это такое и с чем его едят мы с вами рассматривали. Поскольку CSS - технология не имеющая к HTML отношения, то в учебнике я не буду рассматривать конкретный код изменения цвета кнопок и полей формы, однако, вы можете найти учебник по CSS и освоить эту технологию, в том числе понять, а как же сделать кнопки оранжевыми :)
<form action="mailto:vasya@mail.ru" method=post>
Method - определяет метод отправки данных из формы (к скрипту или на почтовый сервер). Возможные значения: get или post. Подробнее о method и его значениях, о разнице между ними, мы поговорим в следующей главе. А сейчас просто укажем для нашей формы method=post, и закончим наш урок, имея на руках готовую форму, содержимое которой, после ее заполнения пользователем и нажатием на кнопку отправки (ОК), будет отослано вам на е-майл.
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
Не пугайтесь, конечно, как я и обещала, все немного сложнее, чем кажется на первый взгляд, но не так страшно, как вы подумали. Давайте начнем разбор формы:
Ступенька 50-ая. <form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
Этот элемент формы вам тоже знаком, type=text, а значит мы имеем дело со строкой для ввода текста. С ней тоже все в порядке, и все ее атрибуты вам знакомы: name - имя элемента (обязательно), size - размер (длинна поля), value - значение по умолчанию - не задано, но мы можем вписать что-нибудь свое для атрибута value, например, value="поиск по сайту", и последний атрибут maxlength - максимальное количество символов, которое сможет ввести ваш посетитель в поле для ввода текста.
<form name="web" method="get" action="http://www.yandex.ru:8081/yandsearch">
Ну, тут совсем все просто: type=submit - говорит нам, что это кнопка для отправки информации, при нажатии на которую информация уйдет на обработку к скрипту, и будет произведен поиск по заданным словам. Value - надпись на кнопке.
В этой анкете много для вас незнакомых элементов формы, но есть и уже знакомые вам. Давайте для начала создадим их, а затем я познакомлю вас с остальными.
<form name="anketa" method="post" action="http://mysite.ru/script">
Name - обязательный элемент, имя формы. Method - как будет обрабатываться наша форма. Action - путь к скрипту, который будет обрабатывать форму, или е-майл куда будут отправлены данные из формы. Т.к. у нас сайт популярный, серьезный, то я предполагаю, что мы, конечно же, установим скрипт для обработки опроса.
<form name="anketa" method="post" action="http://mysite.ru/script">
Type=text - мы указали, что имеем дело с полем для ввода текста. Name - имена элементов. Size - размер полей для ввода текста. Maxlength - максимальное количество символов, которое сможет ввести наш посетитель в поле для ввода текста. Value - значение (в поле для ввода е-майл оно = @, чтобы пользователю было яснее, конечно, затем пользователь введет свое значение для того поля).
Как видите, нам еще далеко до конечного результата.
<form name="anketa" method="post" action="http://mysite.ru/script">
Type - тип элемента, мы указали, что это кнопка отправки и кнопка сброса. Value - надписи на кнопках.
Больше знакомых нам элементов в данной форме нет. Поэтому приятный процесс вспоминания проденного ранее закончен, и начинается обучение.
Особенность данного элемента формы в том, что разные его значения взаимоисключающи. Т.е. он предоставляет пользователю выбор: ИЛИ - ИЛИ. Или он - мужчина, или она - женщина, и то и другое выбрать не получится.
<b>Вы:</b>
Итак, "переключатели" вводятся в нашу форму при помощи знакомого вам тега <INPUT>, type для которого мы указываем radio (type=radio). Name - обратите внимание, что для "переключателей" имя одинаковое, т.к. по сути это один элемент (что мы и подчеркиваем, задавая ему одно имя), зато value (значение) - должно быть обязательно разным.
Этот элемент тоже предоставляет пользователю выбор. Чем же он отличается от "переключателей". "Флажки" предоставляют пользователю выбор И - ИЛИ. Т.е. пользователь может отметить один из предложенных вариантов, а может одновременно выбрать несколько вариантов (допустим, ваш посетителю любит как боевики, так и документальные фильмы). "Переключатели" же, как вы должны помнить, дают возможность выбрать только что-то одно из предложенного (ИЛИ - ИЛИ).
<b>Какие фильмы вы любите смотреть?</b><br>
Итак, как мы видим, во всем виноват знакомый нам тег <INPUT>, только в этот раз его атрибут type принимает значение checkbox (type=checkbox). Name - обратите внимание, имя для каждого "флажка" мы задаем свое, уникальное, зато значение (value) - для всех "флажков" одинаковое.
<b>Какие фильмы вы любите смотреть?</b><br>
Как результат, в форме, предлагаемой посетителю будет уже отмечен пункт "приключенческие":
Конечно же, ваш посетитель сможет убрать эту пометку и выбрать потом свое.
Знакомьтесь, господа, это - выпадающий список. Этот весьма удобный элемент можно использовать не только в опросах для выбора чего-либо, очень часто его используют в качестве дополнительного меню на сайтах для быстрого перехода в какой-либо раздел-подраздел сайта.
Получим следующее:
Также мы можем изменить разметку выпадающего списка, разбив его пункты на несколько групп, при помощи тега <OPTGROUP></OPTGROUP>: