Пособие по HTML-формам
Формы HTML применяют для приема заказов, проведения опросов, регистрации пользователей и многого другого. Вы вряд ли вы найдете в Сети хотя бы один сайт без HTML-формы.
Как работают HTML-формы?
С помощью HTML формируется пользовательский интерфейс формы. Обработка введенных данных и их отправка на сервер осуществляется с использованием языков программирования: PHP, ASP или Perl.
Приведенное ниже изображение иллюстрирует общую концепцию:
- Пользователь посещает веб-страницу, содержащую форму;
- Веб-браузер отображает HTML-форму;
- Пользователь заполняет форму и отправляет данные;
- Браузер отправляет данные формы на веб-сервер;
- Скрипт обрабатывает данные формы на веб-сервере;
- Страница ответа отправляется обратно в браузер.
Тег HTML-формы
Все элементы ввода HTML формы должны быть заключены в открывающийся и закрывающийся теги <form> следующим образом:
<form>
Элементы ввода...
</form>
Ниже перечислены атрибуты тега формы:
action=”Ссылка на скрипт процессора формы”
Атрибут action указывает на скрипт на стороне сервера, который обрабатывает данные формы. Как правило, это будет скрипт (PHP, ASP, Perl) или программа CGI.
method =get|post (либо GET, либо POST)
Если вы используете метод GET, значения полей формы передаются как часть URL-адреса. Если вы используете POST, информация отправляется на сервер как часть тела данных, и не будет отображаться в адресной строке браузера. Если вы не укажете метод, по умолчанию будет использован GET.
Предположим, что ваша страница обработчика формы - это Perl скрипт с именем formmail.pl. HTML-код формы будет следующим:
<form action="cgi-bin/formmail.pl" method="post">
................................
.....your input items here .....
................................
</form>Элементы ввода формы
В форме регистрации для сайта HTML могут быть различные типы элементов ввода: чек-бокс, радио-боксы, простые текстовые поля и т.д.
Давайте рассмотрим, как создаются элементы ввода формы.
Однострочное текстовое поле
Однострочное текстовое поле может использоваться для получения имени, адреса электронной почты, номера телефона и т.д.
Ниже приведен код, с помощью которого создается простое текстовое поле:
<input type="text" name="FirstName" />type=”text”
атрибут «type» сообщает браузеру, что должно быть создано однострочное текстовое поле.
Name = "FirstName"
задает название поля. name используется для идентификации поля на стороне сервера.
Существует еще несколько атрибутов, которые можно использовать для текстового поля:
value=”значение по умолчанию”
Текст, который вы задаете в атрибуте value, будет отображаться в текстовом поле по умолчанию.
Пример:
<input TYPE="text" name="FirstName" value="Введите, пожалуйста, свое имя" />maxlength=”максимальное количество символов”
Задает максимальное количество символов, которое пользователь может ввести в текстовое поле.
Давайте расширим предыдущую HTML-форму несколькими текстовыми полями:
<form action="cgi-bin/formmail.pl" method="post">
<p>
Name: <input type="text" name="FirstName" value="" size="25" maxlength="50" />
</p>
<p>
Email: <input type="text" name="Email" value="" size="25" maxlength="50" />
</p>
</form>В этой форме есть два поля для получения от посетителя имени и адреса электронной почты. Теги <p> должны разбить элементы ввода на две строки.
Кнопка отправки
После ввода данных в HTML элементы формы пользователь нажимает кнопку их отправки на сервер. Вы можете добавить ее в форму с помощью значения ‘submit’:
<input type="submit" name="submit" value="Отправить" />name="submit"
В форме может быть больше одной кнопки Submit. На стороне сервера нажатая кнопка может быть идентифицирована с помощью значения атрибута name.
value="Отправить"
Строка, заданная в атрибуте "value", отображается как метка кнопки отправки.
Давайте соберем все вместе:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head >
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<title >Form Page: sampleform</title>
</head>
<body>
<h1>Sample form page</h1>
<form id='sampleform' method='post' action='' >
<p>
Name: <input type='text' name='Name' />
</p>
<p>
Email: <input type='text' name='Email' />
</p>
<p>
<input type='submit' name='Submit' value='Submit' />
</p>
</form>
</body>
</html>Скопируйте этот код в HTML-файл и откройте его в браузере.
Посмотрите на форму в действии.