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

_ Все эти действия невозможны без HTML-форм.

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

О Отсылает письмо (если это форма обратной связи на сайте).

П Помещает сообщение в базу данных (если это форум или система комментариев).

П Оформляет заказ (если это корзина online-магазина).

Результат работы программы может быть показан пользователю (на форуме появилось его сообщение; появилась надпись, что письмо успешно отправлено).

Вот пример типичной формы обратной связи на сайте:

<FORM NAME="feedback" ACTION="mail.php" METHOD="post">

<INPOT TYPE="text" MAXLENGTH="100" NAME="name"XBR>

E-mail:<BR>

•(INPUT TYPE="text" MAXLENGTH="100" NAME="email"XBR> . Сообщение<ВК>

<TEXTAREA COLS="30" ROWS="5" NAME="txt"X/TEXTAREAXBR>

<INPUT TYPE="Submit" УАШЕ="Отправить" NAME="ok"> <'/FORM>

В браузере эта форма выглядит так, как показано на рис. 1.10.

Обратите внимание, что код формы начинается и заканчивается тегами <formx/form>. На странице допускается размещение нескольких форм, но они не могут быть вложенными. Этот тег с помощью атрибутов определяет, как будет обрабатываться введенная пользователем информация.

D ACTION

Задает обработчик информации. Это может быть программа на РНР, Peri или другом языке. В данном примере для обработки информации из формы используется программа, которая находится в файле mail.php (причем этот файл должен лежать в том же каталоге, что и документ, который содержит данную форму).

г'

"1 METHOD

Задает метод HTTP, который будет использоваться для передачи данных из формы. Существуют два основных метода: get и post. Основное отличие в том, что при методе get данные из формы добавляются к URI в таком виде:

URL?name=value&name=value&naitie=value,

где name — имя поля (указывается в атрибуте name поля формы), а value — значение поля, т. е. введенная пользователем информация. Пример запроса get:

http://www.name.corn/feedback.phpPname^michael&txt^message

При методе post все данные помещаются в переменную среды HTTP и пересылаются в теле запроса.

При пересылке большого количества данных необходимо пользоваться методом post, потому, что длина URI ограничена.

Элемент <form> не влияет на отображение содержимого в браузере, он лишь объединяет все компоненты формы. Это нужно для того, чтобы браузер смог определить, какую информацию отсылать на сервер.

Элементы, которые позволяют осуществлять ввод информации, называются управляющими. К ним относятся <input>, <textarea>, <select> и др. Рассмотрим основные из них.

Является основным управляющим элементом. Имеет важный атрибут type, который определяет назначение элемента <input>. Атрибут туре может принимать следующие значения: text, password, checkbox, radio, submit, reset, hidden, image, button. Кратко рассмотрим все значения:

• text — создается стандартное текстовое поле, которое обычно используется для ввода имен, адреса, и другой короткой информации (именно такое поле есть в приведенном выше примере);

• password — создается текстовое поле для ввода пароля (от text отличается тем, что при вводе информации символы заменяются на звездочки (*), так что никто не сможет подсмотреть пароль на мониторе, но клавиатуру старайтесь закрывать или набирать быстро);

• checkbox — создается переключатель, который может иметь два значения (выбран/не выбран). Нужен для организации ответов с вариантами "да/нет";

• radio — создается переключатель как и в случае checkbox, но с помощью radio можно организовать выбор из нескольких вариантов. Для этого надо создать несколько элементов <input> с одинаковым атрибутом name, но разным атрибутом value. Например так:

<INPUT type="radio" NAME="radname" VALUE="first_variant"> <INPUT type="radio" NAME="radname" VALUE="second_variant"> <INPUT'type="radio" NAME="radname" VALUE="third_variant">

• reset — создается кнопка, нажатие на которую очищает всю ранее введенную в поля формы информацию. Ее использовать большого смысла не имеет, так что не стоит загромождать ею пользовательский интерфейс;

• hidden — создается поле, которое не отображается браузером. Его обычно используют для пересылки на сервер какой-нибудь служебной информации, необходимой для правильной работы программы-обработчика данных из формы;

• image — создается кнопка типа submit, но вместо обычной кнопки будет рисунок, который вы укажете через атрибут src;

• button — создается кнопка, действие на которую назначается с помощью скриптового языка (обычно это JavaScript). Это делается для предварительной проверки корректности введенной пользователем информации.

Кроме атрибута type элемент <input> имеет еще несколько атрибутов.

• MAXLENGTH

Определяет максимальное число символов, которое может ввести пользователь. Имеет смысл ограничивать число символов в полях для имени, фамилии и в прочих коротких полях.

• VALUE

Начальное значение поля. Обязательный атрибут для типа radio.

• SIZE

Задает ширину поля на экране. Если атрибут type имеет значения text или password, то эта ширина задается в символах, в любом другом случае — в пикселах.

Есть еще несколько управляющих элементов, которые широко используются при создании форм.

"Ч TEXTAREA

Создается текстовое поле из нескольких строк для ввода больших объемов текста (например, сообщений на форум). Обязателен закрывающий тег. Имеет следующие атрибуты:

• rows — определяет число отображаемых в браузере строк (фактически высоту элемента <textarea>). Является обязательным атрибутом;

• cobs — определяет ширину элемента <textarea> в символах. Тоже обязательный атрибут.

3 SELECT

Создает выпадающее меню из нескольких пунктов. Делается это так:

<SELECT size="8" name="menu">

<OPTION value="index">rnaBH&H</OPTION>

<OPTION value="product">npOHyKiWM</OPTION>

<OPTION value="contact">KoHTaKT</OPTION> </SELECT>

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

<SELECT>.

Если понадобится сделать возможным выбор одновременно нескольких пунктов, то в элементе <select> надо прописать ключевое слово multiple:

<SELECT multiple size="5" name="selector">

Вот и все, что вам совершенно необходимо знать о формах.

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