Форум сайтостроителей

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

Создание формы

Форма создаётся с помощью элемента <form>, внутри которого могут быть любые необходимые элементы, и характеризуется следующими необязательными параметрами:

Сама форма не отображается на веб-странице, видны только её элементы.

Допускается использовать несколько форм на странице, но они не должны вкладываться одна в другую (пример 1).

Пример 1. Ошибочное использование форм

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input name="a"> <input type="submit"></p>
   <form action="handler.php">
    <p><input name="b"> <input type="submit"></p>
   </form>
  </form>
 </body>
</html>

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента <input> или любого другого элемента, допустимого в форме, а значение введено пользователем или установлено в поле формы по умолчанию. После того, как пользователь щёлкнет по кнопке, происходит вызов обработчика формы, который получает введённую в форме информацию, а дальше делает с ней то, что предполагает разработчик. В качестве обработчика формы обычно выступает программа, заданная атрибутом action элемента <form>. Программа может быть написана на любом серверном языке вроде PHP, Python, C# и др.

Часто бывает, что текущая страница, написанная, допустим, на PHP, сама является обработчиком формы, в таком случае атрибут action можно вообще опустить. В простейшем случае <form> не содержит никаких атрибутов и представлен в примере 2.

Пример 2. Простая форма

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form>
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

В качестве значения атрибута action можно указать также адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа, установленная по умолчанию. В целях безопасности в браузере задано, что отправить незаметно информацию, введённую в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype со значением text/plain внутри <form> (пример 3).

Пример 3. Отправка формы по почте

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="mailto:vlad@htmlbook.ru" enctype="text/plain">
   <p><input name="a"> <input type="submit"></p>
  </form>
 </body>
</html>

Браузеры откроют программу, сопоставленную с почтой, при этом Internet Explorer выведет предупреждение (рис. 1).

Предупреждение Internet Explorer

Рис. 1. Предупреждение Internet Explorer

Отправка формы

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action элемента <form>, как показано в примере 4.

Пример 4. Отправка данных формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Данные формы</title>
 </head>
 <body>
  <form action="handler.php">
   <p><input name="login"> <input type="password" name="pass"></p>
   <p><input type="submit"></p>
  </form>
 </body>
</html>

В этом примере данные формы, обозначенные атрибутом name (login и password), будут переданы в файл по адресу handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST. Для задания метода в <form> применяется атрибут method, а его значениями выступают ключевые слова, соответственно, get и post. Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

Табл. 1. Различия между методами GET и POST
GET POST
Ограничение на объём 4 Кб Ограничения задаются сервером.
Передаваемые данные Видны сразу всем. Видны только при просмотре через расширения браузера или другими методами.
Кэширование Страницы с разными запросами считаются различными, их можно кэшировать как отдельные документы. Страница всегда одна.
Закладки Страницу с запросом можно добавить в закладки браузера и обратиться к ней позже. Страницы с разными запросами имеют один адрес, запрос повторить нельзя.

Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно GET.

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами ?q=node/add и ?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

Данные для поисковых систем и поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target элемента <form>. Популярные значения — _blank для открытия формы в новом окне или вкладке; имя фрейма, которое задаётся атрибутом name элемента <iframe> (пример 5).

Пример 5. Открытие формы во фрейме

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Использование фрейма</title>
 </head>
 <body>
  <p><iframe name="area" width="500" height="200"></iframe></p>
  <form action="handler.php" target="area">
   <p><input placeholder="Введите текст" name="text"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area.

Элементы формы традиционно располагаются внутри <form>, тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, поскольку сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 6).

Пример 6. Связывание формы с полями

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Форма</title>
 </head>
 <body>
  <form id="auth" action="handler.php" method="post"></form>
  <p>...</p>
  <p><input name="login" form="auth">
  <input type="password" name="pass" form="auth"></p>
  <p><input type="submit" form="auth"></p> 
 </body>
</html>

В этом примере элемент <form> однозначно отождествляется через идентификатор auth, а к полям, которые следует отправить с помощью формы, добавляется form="auth". При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются внутри <form>, их можно перенести и в кнопки отправки формы (<button> и <input type="submit">). Для этого применяется набор атрибутов formaction, formmethod, formenctype и formtarget, которые являются аналогами соответствующих атрибутов без приставки form. В примере 7 показано использование этих атрибутов.

Пример 7. Отправка формы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Отправка формы</title>
 </head>
 <body>
  <form>
   <p><input placeholder="Ваше имя" name="user"></p>
   <p><input type="submit" value="Отправить" 
    formaction="handler.php" formmethod="post"></p>
  </form>
 </body>
</html>