Формы

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

Для отправки формы на сервер используется кнопка 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.03.2020
Редакторы: Влад Мержевич
Как научиться разрабатывать сайты