- •От автора
- •0. Самые начальные сведения Гипертекст? html?
- •Что понадобится для освоения html?
- •Необходимое отступление о редакторах html
- •1. Простейший документ в сети Документ такой красивый – интересно, что внутри
- •Обязательные теги
- •2. Абзац!
- •Непарные метки
- •Комментарии
- •Форматирование шрифта
- •Физические стили
- •Логические стили
- •3. Целые списки из абзацев, или как нам организовать текст
- •Вложенные списки
- •4. In the Outside. Гиперсвязи Связывание
- •Изображения в html-документе
- •5. Бантики в заголовках или как "я раскрашу целый свет..." Цветовая гамма Вашего документа
- •Что в хедере тебе моем..?
- •6. Страсти по табулированию
- •Внутренняя жизнь таблиц
- •"Мы с Тамарой ходим парой" или параллельные тексты
- •Полные чисел таблицы
- •Ячейка, которая требует большего
- •Играем во вложенность
- •7. Сплошной формАлизм
- •Анатомия формы
- •Форменные кнопки
- •Начинаем собирать данные
- •Форму – почтой
- •8. Единственный практический вопрос
- •Правила хорошего тона при разработке html-документов
- •Используйте продуманную иерархию заголовков
- •Следите за вложенностью меток
- •... И затащить на него посетителей
- •Оглавление
- •65 Руководство Web-дизайнера
Анатомия формы
Форма начинается с тега <FORM> и заканчивается тегом </FORM>. HTML-документ может содержать в себе столько форм, сколько необходимо, единственное условие – формы не должны находиться одна внутри другой. Любой HTML-текст, включая всевозможные теги, может размещаться внутри форм без ограничений, лишь бы не нарушалась вложенность инструкций.
Тег <FORM> имеет три атрибута. Обязательный атрибут ACTION определяет URL программы-обработчика данной формы. Обычно это программа в каталоге /cgi-bin на том же сервере, с которого поступила страница с формой, но иногда происходит переадресация на сервер, находящийся совсем в другом месте. Например форма запроса на поиск файла через службу Archie может размещаться в Москве (мы обычно пользуемся сервером астрономического института им. Штернберга Московского университета – www.sai.msu.su), но сама заполненная форма будет переслана на исполнение в США в Рутгеровский университет или в одну из европейских служб поиска и результат поиска наша программа-клиент получит уже оттуда.
Атрибут METHOD определяет, с помощью какого метода протокола передачи гипертекстов данные из формы будут переданы на обработку. Допустимые значения: METHOD=POST и METHOD=GET. Если значение атрибута не установлено, по умолчанию предполагается METHOD=GET. Разница между двумя методами заключается в следующем. Пусть форма создала несколько пар "имя – значение", например Name=Иванов, Age=23, Sex=male и теперь должна передать это на сервер www.opros.city.ru (адрес сервера – вымышленный). В методе GET фактически по каналу связи идет обращение к серверу вида
http://www.opros.city.ru?Name=Иванов&Age=23&Sex=male
а в методе POST к самому адресу сервера добавляется "хвост" в столько строк, сколько пар "имя – значение" определено в форме
http://www.opros.city.ru
Name=Иванов
Age=23
Sex=male
Понятно, что вторым методом можно пересылать значительно большие объемы информации, да и обработка запроса в системе Unix упрощается.
Наконец атрибут ENCTYPE определяет способ кодирования данных при передаче. Этот атрибут обычно имеет смысл опустить, при этом система генерирует его стандартное значение ENCTYPE=application/x-www-form-urlencoded, что бы это ни значило. Ну а факультативный атрибут NAME задает имя формы; иногда обработчику необходимо знать, из какой именно формы поступил запрос.
Форменные кнопки
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления, своего рода кнопка, по "нажатию" на которую и запускается весь процесс. Создать такой орган управления очень просто:
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit, при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]", например:
<INPUT TYPE=submit VALUE="Поехали!">
При опросе читателей, проводимых журналом dz-online, передача информации на сервер инициировалась нажатием на кнопку с характерной надписью "ПЛИ!".
Теперь мы знаем достаточно для того, чтобы написать простейшую форму, которая, впрочем, не будет собирать никаких данных.
<HTML> <HEAD>
<TITLE>Пример 11</TITLE>
</HEAD><BODY>
<H1>Примитивнейшая форма </H1>
<FORM ACTION="primitiv.html"> <!--Это начало формы-->
<INPUT TYPE=submit VALUE="Вернись, я все прощу...">
</FORM> <!--Это конец формы-->
</BODY>
</HTML>
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя]:
<INPUT TYPE=submit NAME=button VALUE="Поехали!">
При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!.
В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь. На уже упоминавшемся сервере анекдотов в конце страницы имеются две кнопки с названиями "Вот так!" и "Как там?". При нажатии на первую из них сервер получит от Вас список номеров анекдотов, которые Вам больше всего понравились из сегодняшней подборки, и эта информация будет использована при расчете рейтингов анекдотов дня, месяца и года. При нажатии на вторую Вы получите (для сегодняшней подборки) табличку, показывающую, сколько голосов получено каждым из анекдотов на текущую минуту (и, кстати, сможете сравнить свое мнение с мнением "сетевой общественности" – мое почему-то никогда не совпадало ;-))