ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

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

Формы. Управление сбором данных

Формы

Получение и обработка данных, введенных пользователем, стали неотъемлемой частью большинства успешных веб-сайтов. Бесспорно, возможности накопления статистики, проведения опросов, хранения персональных настроек и поиска выводят сайт на принципиально новый уровень — без них эта среда обладала бы минимальной интерактивностью.

В этом разделе мы остановимся на получении сервером данных из клиентских HTML-форм. Данная тема является самой важной для понимания взаимодействия клиента и сервера — двух сторон одного процесса. Это первый шаг в область двустороннего программирования.

Общие сведения о формах

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

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

<form action = действие method = "метод"> элементы формы </form>

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

  • get — передает все данные формы в конце URL. Из-за различных ограничений, связанных со спецификой языков и длиной данных, этот метод применяется редко.
  • post — передает все данные формы в теле запроса. Этот метод используется чаще, чем get.

Метод передачи указывается а атрибуте method тега <form>. Данные, полученные сервером при их передаче тем или иным методом, сохраняются в суперглобальных встроенных массивах $_GET и $_POST соответственно. Если в тегах элементов формы (<input>, <textarea> и т.д.) указано значение атрибута name(имя элемента), то сервер получит соответствующие пары вида имя_элемента = значение_элемента. При этом имя_элемента(значение атрибута name) станет символьным индексом(ключем) массива $_GET или $_POST в зависимости от того, каким методом передавались данные. По индексу массива, как известно, можно получить значение его элемента, т.е. значение соответствующего элемента формы.

И так начнем знакомство с элементами формы.

Текстовое поле

В текстовых полях обычно вводится короткая текстовая информация — скажем, адрес электронной почты, почтовый адрес или имя. Синтаксис определения текстового поля:

<input type="text" nаmе="имя_переменной" size="N" maxlength="N" value=" ">

Определение текстового поля включает пять атрибутов:

  • type — тип элемента (для текстовых полей — text);
  • name — имя переменной, в которой сохраняются введенные данные;
  • size — общий размер текстового поля в браузере;
  • maxlength — максимальное количество символов, вводимых в текстовом поле;
  • value — значение, отображаемое в текстовом поле по умолчанию.

Пример:

<input name="name" type="text" size="20" maxlength="30" value="имя">

Особой разновидностью текстовых полей является поле для ввода паролей. Оно работает точно так же, как обычное текстовое поле, однако вводимые символы заменяются звездочками. Чтобы создать в форме поле для ввода паролей, достаточно указать type="password" вместо type="text".

Пример:

<input name="name" type="password" size="20" maxlength="30" value="пароль">

Текстовая область

Текстовая область (text area) используется для ввода несколько больших объемов текста, не ограничивающихся простым именем или адресом электронной почты. Синтаксис определения текстовой области:

<textarea name="имя_переменной" rows="N" cols="N" value=""></textarea>

Определение текстового поля включает три атрибута:

  • name — имя переменной, в которой сохраняются введенные данные;
  • rows — количество строк в текстовой области;
  • cols — количество столбцов в текстовой области.

Пример:

<textarea name="name" cols="50" rows="4" value="">Ваше сообщение</textarea>

Элементы форм, ориентированные на ввод с мыши

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

Флажок

Флажки (checkboxes) используются в ситуациях, когда пользователь выбирает один или несколько вариантов из готового набора — по аналогии с тем, как ставятся «галочки» в анкетах. Синтаксис определения флажка:

<input type="checkbox" name="имя_переменной" valuе="начальное_значение">

Определение флажка включает три атрибута:

  • type — тип элемента (для флажков — checkbox);
  • name — имя переменной, в которой сохраняются введенные данные (в данном случае — состояние элемента);
  • value — значение, присваиваемое переменной по умолчанию. Если флажок установлен, именно это значение будет присвоено переменной с указанным именем. Если флажок не установлен, значение атрибута value не используется.

Пример:

<p>Какой вид спорта предпочитаете:</p>
<input name="name" type="checkbox" value=""> футбол
<br>
<input name="name1" type="checkbox" value=""> хоккей
<br>
<input name="name2" type="checkbox" value=""> плавание
Переключатель

Переключатель (radio button) представляет собой разновидность флажка; он работает практически так же за одним исключением — в любой момент времени в группе может быть установлен лишь один переключатель. Синтаксис определения переключателя:

<input type="radio" name="имя_переменной" value="начальное_значение">

  • type — тип элемента (для переключателей — radio);
  • name — имя переменной, в которой сохраняются введенные данные (в данном случае — состояние элемента);
  • value — значение, присваиваемое переменной по умолчанию. Если переключатель установлен, именно это значение будет присвоено переменной с указанным именем. Если флажок не установлен, значение атрибута value не используется.

Пример:

<p> Выберите вид спорта, которому отдаете наибольшее предпочтение:</p>
<input name="name" type="radio" value="футбол"> футбол
<br>
<input name="name1" type="radio" value="хоккей"> хоккей
<br>
<input name="name2" type="radio" value="плавание"> плавание
Раскрывающийся список

Раскрывающиеся списки особенно удобны в ситуации, когда у вас имеется длинный перечень допустимых вариантов, из которого пользователь должен выбрать один вариант. Как правило, раскрывающиеся списки применяются при работе с относительно большими наборами данных — например, при перечислении американских штатов или стран. Синтаксис определения раскрывающегося списка:

<select name="имя_переменной">

<option valuе="имя_переменной1 ">

<option value="имя_переменной2">

<option value="имя_переменнойЗ">

<option value="имя_переменнойN">

</select>

Определение переключателя поля включает два атрибута:

  • name — имя переменной, в которой сохраняются введенные данные (в данном случае — строка, выбранная в списке);
  • value — значение, отображаемое в списке по умолчанию.

Пример:

<p>Выберите вид спорта:</p>
<select name="name">
<option valuе="name1 "> футбол

<option value="name2"> хоккей

<option value="name3"> баскетбол

<option value="name4"> волейбол

</select>

Скрытые поля

Скрытые поля не отображаются в браузере и обычно используются для передачи данных между сценариями. Хотя передача в скрытых полях работает вполне нормально, в РНР существует другое, более удобное средство — сеансовые переменные. Впрочем, скрытые поля также используются в некоторых ситуациях и потому заслуживают упоминания.

Синтаксис определения скрытого поля практически идентичен синтаксису текстовых полей, отличается только атрибут типа. Поскольку скрытые поля не отображаются в браузере, привести пример на страницах книги невозможно. Синтаксис определения скрытого поля:

<input type="hidden" name="имя_переменной" value="начальное_значение">

Определение скрытого поля включает три атрибута:

  • type — тип элемента (для скрытых полей — hidden);
  • name — имя переменной, в которой сохраняются скрытые данные;
  • value — значение, по умолчанию сохраняемое в скрытом поле.

Вообще говоря, название этого элемента — скрытое поле — несколько неточно. Хотя скрытые поля не отображаются в браузерах, пользователь может просто выполнить команду View Source и увидеть, какие скрытые значения хранятся в форме.

Кнопка отправки данных

Кнопка отправки данных инициирует действие, заданное атрибутом action тега <form>. Синтаксис определения:

<input type="submit" value="текст_на_кнопке">

Определение кнопки включает два атрибута:

  • type — тип элемента (для кнопки отправки данных — submit);
  • value — текст, по умолчанию отображаемый на кнопке.

Пример:

<input name="name" type="submit" value="Отправить">

Кнопка сброса

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

<input type="reset" value=" текст _на_кнопке">

Определение кнопки включает два атрибута:

  • type — тип элемента (для кнопки сброса — reset);
  • value — текст, по умолчанию отображаемый на кнопке.

Кнопка сброса выглядит точно так же, как и кнопка отправки данных, если не считать того, что на ней обычно выводится слово Reset.

Пример:

<input name="name" type="reset" value="Сбросить">

А теперь рассмотрим пример формы. От описания базовых компонентов форм мы переходим к практическому примеру — построению формы для обработки данных, введенных пользователем. Допустим, вы хотите создать форму, в которой пользователь может высказать мнение о вашем Сайте.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Формы</title>
</head>

<body>
<form action="233.php" method="post" name="myform">
<strong> Уважаемый пользователь! Просим вас сообщить некоторую информацию о себе.<br><br>
</strong>
<table border="0" cellpadding="5">
<tr>
<td width="106">Имя</td>
<td width="288">
<input type="text" name="textfield" maxlength="15" size="25" value="">
</td>
</tr>
<tr>
<td>E-mail</td>
<td>
<input type="text" name="textfield2" maxlength="25" size="25">
</td>
</tr>
<tr>
<td colspan="2">Как часто вы посещаете наш сайт?</td>
</tr>
<tr>
<td></td>
<td><select name="frequency">
<option value="первый раз">Первый раз
<option value="ежедневно">Ежедневно
<option value="раз в месяц">Раз в месяц
<option value="два раза в месяц">Два раза в месяц
<option value="раз в неделю">Раз в неделю
</select></td>
</tr>
<tr>
<td colspan="2">Что вас больше всего интересует на сайте?</td>
</tr>
<tr>
<td> </td>
<td>
<input type="checkbox" name="check[]" value="Програмное обеспечение" >
Програмное обеспечение<br>
<input type="checkbox" name="check[]" value="Обучающие программы">
Обучающие программы<br>
<input type="checkbox" name="check[]" value="Другое">
Другое</td>
</tr>
<tr>
<td colspan="2">Какие еще разделы вы хотели бы увидеть на сайте?</td>
</tr>
<tr>
<td> </td>
<td>
<input type="radio" name="radio[]" value=" Как работать с графикой?">
Как работать с графикой?<br>
<input type="radio" name="radio[]" value="Как создать анимацию?">
Как создать анимацию?<br>
<input type="radio" name="radio[]" value="Другое">
Другое
</td>
</tr>
<tr>
<td> </td>
<td>Ваше сообщение</td>
</tr>
<tr>
<td> </td>
<td>
<textarea name="textarea" cols="45" rows="5"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" name="button" id="button" value="Отправить">
</td>
</tr>
</table>
</form>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Вроде бы все понятно. Возникает вопрос — как получить данные, введенные пользователем, и сделать с ними что-нибудь полезное? Этой теме посвящен следующий раздел.