Книга: HTML, XHTML и CSS на 100%

6.1. Элемент FORM

6.1. Элемент FORM

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

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

Главным для рассматриваемого элемента является атрибут action, указывающий обработчик данных для формы. Обработчик – это файл, в котором описано, что нужно делать с данными формы. Создать этот файл – дело программиста, однако переменные, которые будут туда передаваться (их имена и возможные значения), зависят от тех, кто описывает форму. Сам обработчик может быть написан на любом языке, например это может быть файл test.php, как в примере из листинга 6.1. Если значение атрибута action не будет указано, то страница перезагрузится, а все элементы формы примут значения, заданные по умолчанию, то есть в этом случае форма окажется абсолютно бесполезной. В качестве значения данного атрибута надо указать URL-путь к файлу-обработчику на сервере.

Рассмотрим пример из листинга 6.1. Файл обработки находится по адресу test. php, именно ему и будут переданы все данные, введенные в форму.

Листинг 6.1. Атрибут action элемента FORM

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php">

</form>

</body>

</html>

Сам файл test.php может делать с данными что угодно, например занести их в базу или отправить вам по почте. В общем, в том, что касается обработки данных, возможностей много, а реализуются они очень просто: дайте команду вашему программисту. Никаких усилий с вашей стороны.

Что же делать, если программиста нет, а получить данные от пользователя нужно? Можно сделать так, чтобы заполненная посетителем форма приходила вам на почту. Для этого надо в качестве значения атрибута action указать электронный адрес, на который должна приходить форма, начав с ключевого слова mailto. Для корректной обработки данных в этом случае необходимо указать значение атрибута enctype="text/plain".

В листинге 6.2 приведен пример того, как можно отправить данные по электронной почте. При отправке формы откроется почтовый клиент, установленный на компьютере пользователя, и появится предложение отправить данные формы в письме.

Листинг 6.2. Отправка данных формы по почте

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="mailto:[email protected]" enctype="text/plain">

</form>

</body>

</html>

В письме будет отправлен текстовый файл, в котором названиям полей формы будут присвоены значения, которые ввел посетитель. Иначе говоря, вам придет текст такого вида:

название_поля=значение_введенное_посетителем

Вообще атрибут enctype используют для указания MIME-типа данных, отправляемых вместе с формой. Использовать этот атрибут обязательно только в случае отправки файла через форму, тогда значение атрибута должно быть multipart/ form-data.

В листинге 6.3 показан вариант задания атрибута enctype, когда через форму будет отправляться файл.

Листинг 6.3. Атрибут enctype элемента FORM

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data">

</form>

</body>

</html>

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

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

Существуют два основных метода: GET и POST. Рассмотрим применение каждого из них.

• GET – это наиболее распространенный метод, который применяется для получения данных с сервера. В методе GET данные на сервер передаются через адресную строку браузера. Он же вызывается, когда вы вводите адрес сайта в адресной строке или щелкаете кнопкой мыши на ссылке. В этом методе при формировании запроса к серверу все переменные и их значения формируют последовательность вида www.mytestserver.ru/form.php?var1=1&var2=2. Иными словами, имена и значения переменных присоединяются к адресу сервера после знака? и разделяются знаком &.

Этот метод нужно использовать, если вы не передаете больших объемов информации. Если же вместе с формой вы хотите переслать на сервер файл, этот метод не подойдет.

• POST – применяется для отправки данных на сервер. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, поскольку они содержатся в теле сообщения. Именно поэтому метод POST подходит для отправки больших объемов информации.

В листинге 6.4 для отправки формы выбран метод POST, потому что вместе с формой нужно передать файлы.

Листинг 6.4. Атрибут method элемента FORM

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="post">

</form>

</body>

</html>

Форма готова для передачи файлов и больших объемов информации.

Теперь, чтобы позволить программисту управлять формой, надо задать ее имя. Для этого нужно использовать атрибут name. С его помощью можно указать уникальное имя формы, которое будет использоваться для доступа к элементам формы через сценарии.

В листинге 6.5 показан пример задания имени формы. Теперь открыт доступ к форме через сценарии.

Листинг 6.5. Атрибут name элемента FORM

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="get" name="test">

</form>

</body>

</html>

Было задано логичное и понятное имя для формы.

Совет

Старайтесь делать логичными имена форм и всех полей. Учтите, что программисту, который будет писать вам обработчик, придется использовать их многократно. Согласуйте с программистом правила создания имен, что сэкономит и ваше, и его время.

Вот мы добрались до единственного атрибута, который не заинтересует программистов, зато пригодится нам. Это атрибут target. Именно он указывает на то, в каком окне выводить результат обработки формы. Над этим стоит задуматься, потому что не всегда будет удобно выводить результат обработки формы в то же окно, где была сама форма.

Рассмотрим значения параметра target.

• _blank – загружает страницу в новое окно браузера.

• _self – загружает страницу в текущее окно.

• _parent – загружает страницу во фрейм-родитель. Если фреймов нет, то работает как _self.

• _top – отменяет все фреймы и загружает страницу в полном окне браузера. Если фреймов нет, то работает как _self.

В листинге 6.6 представлен пример кода, который после обработки страницы будет загружать результат в новом окне браузера.

Листинг 6.6. Атрибут target элемента FORM

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action="test.php" enctype="multipart/form-data" method="get" name="test" target="_blank">

</form>

</body>

</html>

Открывать результаты в новом окне удобно, например, когда создается форма для поиска.

С элементом FORM мы разобрались: рассмотрели его основные атрибуты. Большинство атрибутов отвечают за параметры обработки формы и за ее общие настройки.

Кстати, если вы пробовали вывести код любого листинга из представленных выше и посмотреть, как он выглядит в браузере, то наверняка удивились, что увидели только белую страницу. Как говорилось выше, элемент FORM логически объединяет поля таблицы, сами же поля создаются с помощью других элементов, которые мы и рассмотрим дальше.

Оглавление книги

Оглавление статьи/книги
Похожие страницы

Генерация: 0.393. Запросов К БД/Cache: 2 / 0
поделиться
Вверх Вниз