Взаимодействие с пользователем. HTML-формы и элементы управления

Форма (веб-форма, анг. form) — гипертекстовый контейнер, позволяющий установить обратную связь между посетителем веб-страницы и веб-приложением. Получение данных от пользователя осуществляется через типовые элементы управления (анг. controls): текстовые поля, кнопки, чекбоксы и т.п., размещаемых в теге form.

Задания к работе

1. Создать форму регистрации пользователя, позволяющую передать на сервер (метод GET) следующие данные:
   • Имя пользователя (обязат.)
   • Логин (обязат.)
   • Пароль и подтверждение пароля (обязат.)
   • Адрес электронной почты (обязат.)
   • Пол (не обязат.)
   • Дата рождения (не обязат.)
   • Страна и город (не обязат.)
2. Написать javascript, выполняющий проверку правильности заполнения полей регистрации перед отправкой на сервер.
3. Написать серверный php-скрипт, принимающий регистрационные данные и отображающий их на веб-странице.
4. Изменить метод отправки данных из формы на POST, внести соответствующие изменения в скрипты и сравнить результаты выполнения.
5. Создать форму загрузки от 1-го до 5-ти файлов на сервер и написать php-скрипт, принимающий эти файлы. Скрипт должен выводить сообщение об успешной загрузке или об ошибке в случае неудачи.

Методические указания

Тег form

Для передачи пользовательских данных из веб-страницы на сервер используются т.н. веб-формы. Веб-форма (или просто форма) — это контейнер, создаваемый с помощью парного HTML-тега <form>, в котором размещаются элементы управления (поля формы) и другие теги разметки. Для отправки данных из формы обычно используется кнопка submit (<input type="submit" />). Сброс введенных данных из полей формы выполняется по нажатию кнопки reset (<input type="reset" />).

Отправка html-формы осуществляется по нажатию кнопки submit, но перед этим браузер преобразует содержимое формы в пары «имя=значение», где имя определяется атрибутом name элемента управления из формы, а значение — его атрибутом value (введенные пользователем или заданные по умолчанию данные). Сформированные параметры запроса (см. CGI) передаются на сервер по методу, указанному в атрибуте method, серверному приложению, заданному в атрибуте action.

Основные атрибуты тега form:

• action — адрес (URI) серверного приложения, принимающего данные.
• method — задает метод передачи данных (см. методы протокола HTTP). Если этот атрибут не указан, то используется GET.
• enctype — способ кодирования данных.
• accept-charset — задает кодировки, которые могут быть использованы.
• autocomplete — включает автозаполнение полей.

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

По умолчанию, форма не отображается на странице, но это можно изменить с помощью CSS.

Элементы управления

Типовой графический интерфейс пользователя в стиле WIMP предполагает наличие типовых же элементов управления (анг. controls): кнопок, чекбоксов, радиокнопок, селекторов, полей ввода и т.п. Язык HTML представляет специальные теги, описывающие большинство из них.

Основные элементы управления задаются значением атрибута type тега <input />. Так описываются радиокнопки, однострочные текстовые поля и поля ввода паролей, чекбоксы (флажки), обычные кнопки, кнопки отправки/сброса, а также скрытые данные. Общий синтакис этого тега можно представить в следующем виде:

<input type="тип_элемента" name="имя" [прочие атрибуты] />

Пример HTML-кода формы, использующей тег <input /> приведен в листинге 1, а внешний вид работающего примера — на рис.1.

Листинг 1. Элементы управления input

<form action="/example.php" method="GET" target="_blank">
<table style="width: 300px;">
<tr>
<td>Логин:</td>
<td width="100"><input type="text" name="username" size=12 /></td>
</tr>
<tr>
<td>Пароль:</td>
<td><input type="password" name="passwd" size=12 /></td>
</tr>
<tr>
<td>Пол: </td>
<td><input name="sex" type="radio" value="male"> муж.
<input name="sex" type="radio" value="female" /> жен.</td>
</tr>
<tr>
<td>Эл.адрес:</td>
<td><input type="text" name="email" size=12 value="e@mail" /></td>
</tr>
<tr>
<tr>
<td>Подписка на новости:</td>
<td><input type="checkbox" name="subscribe" value="1" checked /></td>
</tr>
<tr>
<td><input name="invisible" type="hidden" value="hiddendata" /></td>
<td><input type="submit" value="ОК" /> <input type="reset" value="Сброс" /></td>
</tr>
</table>
</form>

Для создания формы загрузки файлов на сервер используется тег <input /> со значением file атрибута type:

<input type="file" name="uploaded_file" />

Этот элемент отображает на веб-странице кнопку, по нажатию на которую открывается окно файлового менеджера. Имя выбранного пользователем файла отображается в связанном текстовом поле. Отправка файла выполняется методом POST, при этом для формы потребуется явным образом задать тип содержимого (enctype="multipart/form-data"), чтобы при передаче данных не выполнялась их перекодировка в шестнадцатиричные значения символов ASCII. В ином случае сервер получит «битый» файл.

HTML-код простой формы загрузки файла приведен в листинге 2, а ее внешний вид — на рис. 2.

Листинг 2. Форма загрузки файла

<form name="upload" action="/example.php" method="POST" enctype="multipart/form-data">
<p>Укажите файл для загрузки:<br />
<input type="file" name="filename" /></p>
<input type="submit" value="OK" />
</form> 

Помимо тега <input />, язык HTML представляет и другие теги элементов управления, таких как, например, многострочные текстовые поля (<textarea>) и списки (<select>). На рис. 3 приведен пример, иллюстрирующий использование этих элементов для создания простой формы обратной связи. Её HTML-код — в листинге 3. Обратите внимание, что в этом случае для позиционирования элементов использована стилевая разметка.

Листинг 3. HTML-код формы обратной связи

<form method="POST" name="feedback" action="/example.php" style="width: 576px; margin: 0 auto; padding: 0; font-style: normal; text-align: left; border: solid 1px silver; background-color: #EEE;">
<div style="padding: 6px 2px;"> <!-- begin wrapper -->
<div style="clear: both;">
<span style="width: 250px; float: left;">
Ваше имя: <input type="text" name="username" size=16 />
</span>
<span style="width: 250px; float: right; text-align:right;">
Эл.почта: <input type="text" name="email" size=16 />
</span>
</div>
<div style="clear: both;">
Укажите степень важности вопроса:
<select name="priority" style="width: 250px; float: right;">
<option>Обычный</option>
<option>Важный</option>
<option>Критичный</option>
<option>Риторический</option>
</select>
</div>
<textarea name="message" rows=5 cols=30 style="clear: both; width: 560px;" placeholder="Ваш вопрос..."></textarea>
<div style="text-align: right;">
<input type="submit" value="Отправить" /> <input type="reset" value="Очистить" />
</div>
</div> <!-- end wrapper -->
</form>

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

Листинг 4. Формирование массива из полей формы

<form ...>
...
<input name="color[]" type="checkbox" value="red" /> Red
<input name="color[]" type="checkbox" value="green" /> Green
<input name="color[]" type="checkbox" value="blue" /> Blue
...
</form>

С полным описанием веб-форм и элементов управления, определенных в спецификации HTML5 можно ознакомиться по адресу http://www.w3.org/TR/html5/forms.html.

Веб-формы и JavaScript

По умолчанию, браузер не выполняет какую-либо проверку введенных (или не введенных) пользователем данных и передает их «как есть». Это означает, что серверное приложение должно проверять, соответствуют ли полученные им данные ожидаемым и, в случае ошибки, запрашивать их повторно. Частично уменьшить нагрузку на сервер и снизить трафик можно путем проверки полей формы на клиентской стороне, до отправки на сервер. Это реализуется с помощью javascript примерно так, как в листинге 5.

Листинг 5. Проверка правильности ввода данных в поля формы.

<html>
<head>
<meta charset="utf-8" />
<title>Проверка ввода</title>
<script type="text/javascript">
function checkIt(){
var t0=document.getElementById('first').value;
var t1=document.getElementById('second').value;
if (t0 == "" || t0 == "Имя") {
alert("Вы не указали свое имя!"); return false;
}
if (t1 == "") {
alert("Вы не ввели необходимую информацию!");
return false;
}
return true;
</script>
</head>
<body>
<form method='get' action='/example.php'>
<input id="first" type="text" size=60px value='Имя' />
<br>
<textarea id="second" rows=4 cols=60></textarea>
<br>
<input type='submit' onClick="if (!checkIt()){return false;}" value="ОК" />
</form>
</body>
</html>

Больше примеров обработки форм с помощью JavaScript приведено в теме «Объекты JavaScript».

Обработка данных на сервере

Данные веб-формы передаются на сервер обработчику, указанному в атрибуте action. В качестве такого обработчика может выступать веб-приложение, написанное на любом поддерживаемом веб-сервером языке программирования. Рассмотрим несколько примеров обработки форм с помощью php-скриптов. Сразу отметим, что для этих целей в PHP предусмотрены несколько суперглобальных массивов ($_GET, $_POST, $_FILES), куда загружаются имена и значения полученных параметров. Имена параметров (значения атрибутов name) используются как ключи элементов соответствующего массива, содержащих их фактические значения (value).

Приведем несколько примеров использования массива $_GET (обработка $_POST выполняется аналогично).

Листинг 6. Вывод списка всех параметров, полученных методом GET

<?php
if ($_GET) {
foreach ($_GET as $k=>$v) echo "$k=$v<br>";
}
?>

Для формы из листинга 1 этот скрипт выведет нечто такое:

username=User
passwd=verysecure
sex=male
email=e@mail
subscribe=1
invisible=hiddendata

Листинг 7. Получение значения конкретного элемента массива $_GET

<?php
$user = "anonymous";
// isset — проверить, установлена ли переменная
// strip_tags — удалить все HTML-теги из полученной строки
if (isset($_GET["username"])) $user = strip_tags($_GET["username"]); echo $user; ?>

Приведенных примеров достаточно, чтобы понять, что вся работа с массивом $_GET (или $_POST) аналогична использованию обычных массивов и переменных в PHP.

Информация о файлах, переданных на сервер, сохраняется в массиве $_FILES. Работа с ним несколько отличается от обработки $_GET или $_POST, поскольку $_FILES - двумерный. Т.е. каждый его элемент сам является массивом, содержащим ряд свойств загруженного файла. Содержимое массива $_FILES для некоторого файла может выглядеть примерно так (получено 2 файла):

// Вывод команды print_r($FILES) Array (
[file1] => Array (
[name] => asoiu.gif // исходное имя файла [type] => image/gif // тип содержимого
[tmp_name] => /tmp/phpQJBpgA // временное имя в каталоге tmp
[error] => 0 // код ошибки (0 - если нет ошибок)
[size] => 34081 // размер в байтах
)
[file2] => Array (
[name] => web-service.gif
[type] => image/gif
[tmp_name] => /tmp/phpSBq1D23
[error] => 0
[size] => 3007
)
)

Все передаваемые файлы сохраняются во временном каталоге, под произвольно сгенерированными именами. Если не переместить загруженные файлы в каталог назначения, то спустя некоторое время они будут удалены системой при очистке временного хранилища. Функция php move_uploaded_file позволяет сохранить переданный файл в указанном месте на сервере и задать ему нужное имя. Целевой каталог при этом должен быть доступен для записи (см. установка прав доступа.) В листинге 8 приведен пример php-скрипта, обрабатывающего несколько принятыфх сервером файлов.

Листинг 8. Обработка загруженных файлов

<?php
$uploaddir = '/files';
foreach ($_FILES as $key=>$val) {
// выполнять обработку, если файл загружен без ошибок
if ($_FILES[$key]["error"] == UPLOAD_ERR_OK) { $from = $_FILES[$key]["tmp_name"]; // временное имя $to = $_FILES[$key]["name"]; // исходное имя
// перемещение из временного в постоянный каталог move_uploaded_file($from, "$uploaddir/$to"); }
}
?>

Асинхронная обработка форм

Сегодня для обработки данных из веб-форм широко используется асинхронная технология AJAX, позволяющая обновлять содержимое веб-страницы без перезагрузки. Рассмотрение возможностей AJAX выходит за рамки этой лабораторной работы, но вы можете самостоятельно ознакомиться с примерами применения этой технологии здесь (чистый XMLHttpRequest), здесь (JQuery) или найти другие примеры использования AJAX.

Контрольные вопросы

1. Какой метод отправки данных из веб-формы используется по умолчанию?
2. В чем отличия при передаче данных методами GET и POST?
3. Как можно передать данные на сервер без использования форм?
4. В чем отличия загрузки файлов от передачи других данных из веб-формы?
5. Что сделает браузер при отправке почты из веб-формы (задана схема "mailto")?

CC-BY-SA Анатольев А.Г., 20.01.2014