Игорь Квинт - HTML, XHTML и CSS на 100% Страница 22
Игорь Квинт - HTML, XHTML и CSS на 100% читать онлайн бесплатно
Рассмотрим пример из листинга 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 логически объединяет поля таблицы, сами же поля создаются с помощью других элементов, которые мы и рассмотрим дальше.
6.2. Создание полей формы
Теперь приступим к самому интересному – к созданию полей для форм. Полей, из которых можно составить форму, очень много, поэтому надо внимательно следить за выбором поля для представления конкретной информации. Говоря о каждом из видов, мы будем рассматривать, в каких случаях его можно использовать. Ведь есть поля с похожими функциями, разница будет только в удобстве применения конкретного поля в конкретной ситуации.
Общие атрибуты элемента INPUT
Большинство полей для формы создается с помощью элемента INPUT. Атрибуты элемента отличаются в зависимости от поля, для создания которого используется этот элемент. Тем не менее есть атрибуты, которые можно, а некоторые даже нужно применять вне зависимости от типа поля.
Начнем с главного атрибута, который, собственно, и задает поле, – с атрибута type. Он принимает значение, указывающее на тип поля. В табл. 6.1 описано, какое значение может принимать атрибут и какому полю оно соответствует. Дальше мы подробно рассмотрим каждый тип поля и атрибуты, которые могут применяться вместе с ним.
Таблица 6.1. Значения атрибута typeВ таблице поля описаны кратко, подробно мы их рассмотрим позже, но теперь у вас есть некоторое представление о возможностях элемента INPUT.
Следующий атрибут, который мы рассмотрим, является обязательным и называется name. Его значение задает уникальное имя поля. Введенная пользователем информация будет передаваться обработчику в качестве значения переменной с именем поля. Этот атрибут имеет значение для программистов, поэтому имя должно быть логичным.
Иногда бывает нужно запретить пользователю изменение данных поля, например, чтобы он не смог поменять уже введенную информацию. Чтобы запретить изменение данных, в любое поле можно добавить атрибут disabled. При этом поле не просто нельзя будет поменять, его невозможно даже взять в фокус.
Атрибут value задает значение, которое будет передано обработчику. По сути, он определяет данные, введенные в поле. Для текстовых полей с помощью этого атрибута можно установить значение по умолчанию. Введя в поле значение по умолчанию, можно пояснить пользователю, какие данные и в каком формате вы хотите здесь видеть. Это как образец: гораздо удобнее заполнять форму, видя перед собой пример.
Жалоба
Напишите нам, и мы в срочном порядке примем меры.
