Форма предназначена для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Для отправки формы на сервер используется кнопка 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>