Пособие по HTML-формам

Формы HTML применяют для приема заказов, проведения опросов, регистрации пользователей и многого другого. Вы вряд ли вы найдете в Сети хотя бы один сайт без HTML-формы.

Содержание

Как работают HTML-формы?

С помощью HTML формируется пользовательский интерфейс формы. Обработка введенных данных и их отправка на сервер осуществляется с использованием языков программирования: PHP, ASP или Perl.

Приведенное ниже изображение иллюстрирует общую концепцию:

  1. Пользователь посещает веб-страницу, содержащую форму;
  2. Веб-браузер отображает HTML-форму;
  3. Пользователь заполняет форму и отправляет данные;
  4. Браузер отправляет данные формы на веб-сервер;
  5. Скрипт обрабатывает данные формы на веб-сервере;
  6. Страница ответа отправляется обратно в браузер.

Тег 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-файл и откройте его в браузере.

Посмотрите на форму в действии.

Данная публикация представляет собой перевод статьи «HTML Form Tutorial» , подготовленной дружной командой проекта Интернет-технологии.ру