Формы

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

Для отправки формы на сервер используется кнопка Submit, такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда форма отправляется на сервер, управление данными передаётся программе, заданной атрибутом action элемента <form>. Программа получает данные, введённые пользователем в форме, и дальше производит с ними некоторые манипуляции, которые заложены разработчиком. Как выглядит сама программа и что она делает в действительности мы не знаем и можем видеть только результат, который возвращает программа в виде html-документа.

Перед отправкой данных браузер подготавливает информацию в виде пары «имя=значение», где имя определяется атрибутом name элемента <input> или другим допустимым в форме, а значение введено пользователем или установлено в поле формы по умолчанию.

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

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

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

Пример 1. Форма

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Формы</title>
 </head>
 <body>
  <form action="search.php">
   <p><input type="search" name="q" placeholder="Поиск по сайту">
   <input type="submit" value="Найти"></p>
  </form>
 </body>
</html>

Часто бывает, что текущая страница написанная, допустим, на языке 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>

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 11.11.2015
Редакторы: Влад Мержевич
Курс по вёрстке сайта на CSS Grid