Формы

Для чего нужны формы?

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

Рассказать о формах в книге, посвящённой HTML, достаточно трудно. Причина простая: создать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В большинстве случаев такой "точкой" является программа, написанная на Perl или C. Такие программы, обрабатывающие данные из форм, называют CGI-скриптами (Common Gateway Interface — "общепринятый интерфейс шлюзов"). Написание CGI-скриптов требует знания языка программирования и возможностей операционной системы Unix.

Широкое распространение получил язык PHP, инструкции которого можно встраивать прямо в HTML-документы (сохраняя их в файлах с расширением .php).

Формы передают информацию обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных задаются латинскими буквами. Значения воспринимаются обработчиками как строки, даже если они содержат только цифры.

Как устроена форма

Форма открывается тегом <form> и закрывается тегом </form>. HTML-документ может содержать несколько форм, но они не должны вкладываться друг в друга. HTML-текст, включая теги, может размещаться внутри формы без ограничений.

Тег <form> может содержать три атрибута, один из которых обязателен:

action: Обязательный атрибут. Указывает, где находится обработчик формы.
method: Определяет метод передачи данных обработчику. Возможные значения: method="post" и method="get". По умолчанию используется method="get".
enctype: Определяет способ кодирования данных при передаче. По умолчанию используется enctype="application/x-www-form-urlencoded".

Простейшая форма

Чтобы отправить данные из формы, нужен управляющий элемент:

<input type="submit">

Этот тег создаёт кнопку с надписью "Submit". Нажатие на кнопку отправляет данные обработчику, указанному в атрибуте action.

Надпись на кнопке можно изменить с помощью атрибута value:

<input type="submit" value="Поехали!">

Вот простейшая форма (пример 11):

<html>
<head>
<title>Пример 11</title>
</head>
<body>
<h1>Простейшая форма</h1>
<form action="pr0008.html">
    <input type="submit" value="Назад, к главе 8...">
</form>
</body>
</html>

Как форма собирает данные

Элементы формы, такие как <input>, передают данные обработчику в виде пар "имя=значение". Для этого они используют атрибуты name и value.

type="text": Создаёт поле для ввода текста. Можно добавить атрибуты size (ширина в символах) и maxlength (максимальная длина ввода).
type="password": Создаёт поле для ввода пароля. Введённые символы отображаются звездочками.
type="radio": Создаёт радиокнопки. Для группы радиокнопок используется одинаковое значение атрибута name.
type="checkbox": Создаёт флажки. В отличие от радиокнопок, можно отметить несколько флажков одновременно.

Пример

Рассмотрим пример более сложной формы (пример 12):

<html>
<head>
<title>Пример 12</title>
</head>
<body>
<h1>Несколько более сложная форма</h1>
<form action="http://example.com/submit" method="post">
    <p>Имя: <input type="text" name="fn" size="40"><br>
    Фамилия: <input type="text" name="ln" size="40"><br>
    Пол: <input type="radio" name="gender" value="male" checked> Мужской
    <input type="radio" name="gender" value="female"> Женский<br>
    Возраст: <input type="text" name="age" size="5"> лет<br>
    <input type="submit" value="Отправить">
</form>
</body>
</html>

Как отправить форму почтой

HTML позволяет отправлять данные формы по электронной почте, используя атрибут action="mailto:[email]":

<form action="mailto:user@example.com" enctype="text/plain">
    <input type="text" name="name">
    <input type="submit" value="Отправить">
</form>

Однако эта функциональность зависит от браузера пользователя и его конфигурации.