Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – гостевая книга, – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.

1) Создание простой формы

Теги <form> и </form> задают начало и конец формы. Начинающий форму тег <form> содержит два атрибута: action и method. Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET.

Замечание
Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.

Код

<form method="post" action="../admin/add_story.php">

</form>

2) Флажок (checkbox)

Флажки checkbox предлагаю пользователю ряд вариантов, и разрешает выбор нескольких из них.

Код

<input name="Имя переключателя" type="Тип" value="Значение">

Группа флажков состоит из элементов <input>, имеющих одинаковые атрибуты name и type(checkbox). Если вы хотите, чтобы элемент был отмечен по умолчанию необходимо пометить его как checked. Если элемент выбран, то сценарию поступит строка имя=значение, в противном случае в обработчик формы не придет ничего, т.е. не выбранные флажки вообще никак не проявляют себя в переданном наборе данных.

Пример:

Код

<input name="mycolor" type="checkbox" value="red" checked>Красный(выбран по умолчанию)
<input name="mycolor" type="checkbox" value="blue">Синий
<input name="mycolor" type="checkbox" value="black">Черный
<input name="mycolor" type="checkbox" value="white">Белый

3) Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.

Код

<input name="Имя переключателя" type="Тип" value="Значение">

Переключатель (radio) имеет атрибуты name, type и value. Атрибут name задает имя переключателя, type задает тип radio, а атрибут value задает значение. Если пользователь выберет переключатель, то сценарию будет передана строка имя=значение. При необходимости можно указать параметр checked, который указывает на то, что перключатель будет иметь фокус (т.е. будет отмечен по умолчанию) при загрузке страницы. Переключатели также можно объединять в группы, для этого они должны иметь одно и тоже имя.

Пример:

Код

<input name="mycolor" type="radio" value="white"> Белый
<input name="mycolor " type="radio" value="green" checked> Зеленый (выбран по умолчанию)
<input name="mycolor " type="radio" value="blue"> Синий
<input name="mycolor " type="radio" value="red"> Красный
<input name="mycolor " type="radio" value="black"> Черный

4) Кнопка сброса формы(Reset)

Код

<input type="Тип" name="Имя кнопки" value="Надпись на кнопке">

При нажатии на кнопку сброса(reset), все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производиться.

Пример:

Код

<input type="reset" name="Reset" value="Очистить форму">

5) Выпадающий список (select)

Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.

Список начинается с парных тегов <select></select>. Теги <option></option> позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге <option> указан параметр selected, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1, то список будет выпадающим. Если указан атрибут multiple, то разрешено выбирать несколько элементов из списка(при size = 1 не имеет смысла).

Код

<select name="Имя списка" size = “Размер” multiple>
<option value=”Значение”>Отображаемый текст в списке</option>
</select>

При передаче данных выпадающего списка сценарию передается строка имя=значение, а при раскрытом списке передается строка имя=значение1&имя=значение2&имя=значениеN.


6) Текстовое поле (text)

Позволяет пользователям вводить различную информацию.

Код

<input type="Тип" name="Имя поля" size="Размер" maxlength="Макс. количество символов">

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text. Если указан параметр value, то поле будет содержать отображать value-текст. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

Пример:

Код

<input type="text" name="txtName" size="10" maxlength="5" value="Текст по умолчанию">

7) Поле для ввода пароля (password)

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

Пример:

Код

<input type="password" name="txtName" size="10" maxlength="5">

8) Многострочное поле ввода текста (textarea)

Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.

Код

<textarea name="Имя поля" cols="Ширина поля " rows="Число строк">Текст</textarea>

Многострочное поле ввода текста начинается с парных тегов <textarea></textarea>. Тэг name задает имя многострочного поля. Также можно указать ширину поля(cols) и число строк(rows). При необходимости можно указать атрибут readonly, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами <textarea></textarea>.

Пример:

Код

<textarea name="txtArea" cols="15" rows="10" readonly>
Текст, который изначально будет отображен в многострочном поле ввода и который нельзя изменять, т.к. указан атрибут readonly </textarea>

9) Скрытое текстовое поле

Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

Код

<input name="Имя" type="Тип" value="Значение">

Скрытое поле начинается с тега <input>, атрибуты которого являются name, type и value. Атрибут name задает имя поля, type определяет тип поля, а атрибут value задает значение поля.

Пример:

Код

<input name="email" type="hidden" value="spam@nospam.ru">

10) Кнопка отправки формы (submit)

Служит для отправки формы сценарию.

Код

<input type="Тип" name="Имя кнопки" value="Текст кнопки">

При создании кнопки для отправки формы необходимо указать 2 атрибута: type=“submit” и value=”Текст кнопки”. Атрибут name необходим если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

11) Кнопка для загрузки файлов (browse)

Служит для реализации загрузки файлов на сервер. Объект browse начитается с парных тегов <form></form>. Начинающий тэг <form> содержит необходимый атрибут encrypt. Атрибут encrypt принимает значение multipart/form-data, который извещает сервер о том, что вместе с обычной информацией посылается и файл. При создании текстового поля также необходимо указать тип файла – “file”.

Код

<form enctype="multipart/form-data" action="upload.php" method="post">
Загрузить файл: <input name="my_file" type="file">
<input type="submit" value="Отправить">
</form>

12) Рамка (fieldset)

Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг </fieldset>. Заголовок указывается в тэгах <legend></legend>. Основное назначение объекта – задавание различных стилей оформления.

Пример:

Код

<fieldset>
<legend>Программное обеспечение(заголовок рамки)</legend>
Текст, который будет помещен внутри рамки.</fieldset>

Обработка форм

Все данные, которые вы хотите получить из HTML-формы в PHP сценарий обрабатываются с помощью суперглобальных массивов $_POST или $_GET, в зависимости от указанного в атрибуте method метода передачи данных.

Задача: Вам необходимо получить данные из текстового поля и многострочного поля ввода и передать их сценарию.
Решение: Необходимо создать HTML форму и PHP – сценарий для обработки формы.

Обсуждение:

Создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с текстовым полем mytext и текстовой областью msg:

Код

<form action="action.php" name="myform" method="post">
<input type="text" name="mytext" size="50">
<textarea name="msg" cols="20" rows=”10” ></textarea>
<input name="Submit" type=submit value="Отправить данные">
</form>

В этой html-форме нас интересует 3 атрибута: action который указывает путь к обработчику формы, имя текстового поля (mytext) и имя многострочного поля вода (msg). Также в форме присутствует кнопка, при нажатии на которую происходит передача данных.

После того как html-форма готова нам необходимо создать обработчик формы action.php:

PHP - Код

$text =  $_POST['mytext'];
  $msg =  $_POST['mytext'];
  echo $text; 
  echo "";
  echo $msg;

После того как мы введем любые значение в текстовые поля и нажмем на кнопку "Отправить данные" html-форма отправить значения сценарию action.php.
После этого в переменных $text и $msg будут содержаться значения текстового поля и многострочного поля ввода соответственно, значения которых взяты из суперглобальных переменных $_POST.

Если вы хотите, чтобы в многострочном текстовом поле соблюдалось html-форматирование, то используйте функцию nl2br():

PHP - Код

$text = nl2br($_POST['mytext']);

Задача: Пусть необходимо создать выпадающий список с годами с 2000 по 2050.
Решение: Необходимо создать HTML форму c элементом SELECT и PHP – сценарий для обработки формы.

Обсуждение:

Для начала создадим два файла: form.html и action.php. В файле form.html будет содержаться html-форма с выпадающим списком. Причем значения в списке можно указать двумя способами:

I. Ввод данных вручную:

Код

<select class="input" type=text name=years>
<option value='2000'>2000</option>
<option value='2001'>2001</option>
<option value='2002'>2002</option>
……………………………………………
<option value='2050'>2050</option>
</select>

II. Ввод данных через цикл:

Код

<select class="input" type=text name=years>

$year = 2000;
for ($i = 0; $i <= 50; $i++) // Цикл от 0 до 50
{
$new_years = $year + $i; // Формируем новое значение
echo '<option value='.$new_years.'>'.$new_years.'</option>'; //Формируем новую строчку
}

</select>

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

Задача: Загрузка файла на сервер
Решение: Необходимо создать HTML форму и PHP – сценарий для обработки файла.

Описание:

Создадим HTML-форму для отправки файла на сервер.

Код

<FORM ENCTYPE="multipart/form-data" ACTION="action.php" METHOD=POST>
<INPUT NAME="myfile" TYPE="file">
<INPUT TYPE="submit" value="Передать файл">
</FORM>

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

Затем необходимо написать сценарий обработчик action.php. Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:

PHP - Код

if(isset($_FILES["myfile"])) // Если файл существует
{
  $catalog = "../image/"; // Наш каталог
  if (is_dir($catalog)) // Если такой каталог есть
  {
    $myfile = $_FILES["myfile"]["tmp_name"]; // Времменый файл
    $myfile_name = $_FILES["myfile"]["name"]; // Имя файла
    if(!copy($myfile, $catalog)) echo 'Ошибка при копировании файла '.$myfile_name 
// Если не удалось скопировать файл
  }
  else mkdir('../image/'); // Если такого каталога нет, то мы его создадим
}

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

Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.

Также хотел бы продемонстрировать пример с элементом checkbox. Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:

Код

<FORM ACTION="file.php" METHOD=POST>
<input name="mycolor" type="checkbox" value="blue">Синий
<input name="mycolor" type="checkbox" value="black">Черный
<input name="mycolor" type="checkbox" value="white">Белый
<input name="Submit" type=submit value="Выбрать">
</FORM>

PHP - Код

if (!empty($_POST['mycolor'])) echo $_POST['mycolor']; // Если выбран хоть 1 элемент
  else echo "Выберите значение";

Часто встречающаяся ошибка при работе с сессией - поздний старт. Когда данные в браузер уже начали отправляться и вызов session_start() приводит к ошибке "headers already sent". На этом спотыкаются многие начинающие (и не только) программисты PHP.

---

Для понимания проблемы надо немного разбираться в работе протокола HTTP. Текущая версия протокола (1.1) описана в документе RFC2616.
Протокол работает по принципу "запрос - ответ". Браузер пользователя посылает запрос на сервер. Тот, в свою очередь, посылает браузеру ответ. И запрос, и ответ состоят из заголовка и следующих за ним данных (тело). Т.е. если данные уже начали отсылаться, то что-либо добавить в заголовок уже возможности нет. Куки как раз передаются в заголовке HTTP запросов и ответов.
Да же если Вы поместите блок , содержащий session_start() в самое начало файла, но перед ним будет пробел или перевод строки, то это тоже приведет к ошибке. Никаких символов перед блоком быть не должно!
Что же делать, если решение, использовать сессию или нет, принимается не в самом начале программы и перед ним возможен какой-либо вывод?
Выход простой - использовать буферизацию. В PHP буферизацией управляют функции начинающиеся на "ob_" (output bufferering). В начале программы (до любого возможного вывода) следует поставить вызов ob_start(), а перед завершением программы (хотя бы после старта сессии) - ob_end_flush().

Код

ob_start();

<html>
<head>
<title>ob_start test</title>
</head>
<body>

session_start();
// .... программа
ob_end_flush();

</body>
</html>

Кстати, при работе непосредственно с Куки и заголовками HTTP возникают те же самые проблемы и решаются они аналогично.

Вернемся к Куки и сессии.Сессия имеет имя, используемое как в Куки, так и при передаче идентификатора сессии в параметрах URL. По умолчанию, это имя - "PHPSESSID". Его можно поменять на другое имя, глобально для всего сервера, через php.ini (session.name). Так же можно изменить его только для данной программы, в процессе выполнения, функцией session_name().
Сразу предостерегу от возможных ошибок: параметры сессии можно менять только до ее старта.
Кроме имени, параметрами сессии являются: время жизни и параметры Куки.
Время жизни сессии - это время неактивности сессии, по истечении которого сессия может быть удалена сборщиком мусора и пользователь, зайдя на сайт еще раз, получит новый идентификатор сессии и, соответственно, новую сессию. Задается время жизни в php.ini (session.lifetime). При использовании собственных обработчиков этот параметр php.ini можно игнорировать и использовать свое значение времени жизни.
Куки может иметь следующие необязательные параметры: время жизни, путь URL, DNS-домен, признак секретности. Я их перечислил в порядке "уменьшения обязательности". Т.е., нельзя указать домен, не указав время жизни и путь.
Смысл параметров следующий:

* Время жизни.
Это рекомендованное время хранения Куки в браузере пользователя. Если время равно нолю, то Куки удаляется после закрытия браузера (или во время его следующего запуска) и называется это "хранение на время текущей сессии". По умолчанию, время жизни равно нулю.
* Путь URL.
Если запрашиваемый путь начинается с этого значения, то данное Куки посылается в запросе. Это позволяет иметь на одном сервере несколько независимых программ, работающих с собственными сессиями. Такие программы должны находиться в разных директориях и директория одной программы не может быть вложена в директорию другой программы. Например, "/a/" и "/b/" - могут иметь независимый друг от друга набор Куки, а "/a/" и "/a/b/" - нет (все Куки для пути "/a/" будут посылаться и при запросе пути "/a/b/"). По умолчанию, используется путь "/".
* DNS-домен.
Домены DNS - это имена, используемые в Интернете. Домены образуют древовидную иерархию. Например, в домене com есть домен shelek.com, а в нем есть домены club.shelek.com и forum.shelek.com.
Если указать в Куки домен shelek.com, то браузер будет посылать это Куки в запросах к shelek.com, club.shelek.com и forum.shelek.com. Если же указать, forum.shelek.com, то это Куки посылаться будет только при запросах в домены, начинающиеся с этого имени и мешать домену club.shelek.com не будет. По умолчанию, используется домен, на который браузером был послан запрос. Т.е., если нет особой необходимости, то этот параметр менять не нужно.
* Признак секретности.
Если установить этот признак, то данное Куки будет посылаться только в запросах по защищенному каналу (SSL, TLS, IPsec). Напомню, что для того, чтобы можно было устанавливать этот параметр, нужно задать все предыдущие. В том числе и домен. Его текущее значение можно взять из $_SERVER['SERVER_NAME'].


Пример:

PHP - Код

session_name("my_session_name");
session_set_cookie_params(0, "/a/");
session_start();

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

---

Когда мы посещаем сайты, часто ли задумывается мы, как серверная программа помнит такие вещи, как введенный логин, какие сообщения мы еще не читали, какие товары мы положили в "корзину покупателя" и т.п.? Посетителю сайта нет необходимости знать это, а web-программисту эти знания лишними не будут.
Работает этот механизм просто, но в то же время довольно сложно.
Серверная программа запоминает переданные пользователем данные в сессии (сеансе) и достает их оттуда при следующем обращении на сервер. Но пользователей, работающих с одним сайтом, может быть несколько и для того, чтобы понять, где чья сессия, нужен какой-либо механизм идентификации. Так как же точно идентифицировать данную сессию?
Первое, что приходит на ум - использовать для этого IP-адрес компьютера пользователя. Вполне возможно, что на заре web-программирования так и делали, но с одного IP-адреса могут посылать запросы несколько пользователей. Например, если они работают через один proxy-сервер, или находятся в одной локальной сети и выходят в Интернет через NAT-шлюз, назначающий им один и тот же внешний IP-адрес. Да и за время посещения сайта адрес пользователя может поменяться (например, при восстановлении прерванного модемного соединения). Т.е., механизм этот не надежен.
Выход только один - пользователь должен сам передавать свой идентификатор, сообщенный ему сервером.
Идентификатор сессии можно передавать в строке параметров URL. Многие сайты так и делают (обычно это используется как дублирующий механизм). Но у этого метода есть большой недостаток. Если вам захочется, к примеру, послать такую ссылку другу, и он зайдет по ней на сайт, то он может внедрится в вашу сессию. Выходит, этот механизм тоже не без изъяна.
Для решения этой задачи компанией Netscape была придумана и внедрена в созданный ею браузер возможность запоминать специальные данные, переданные сервером, на компьютере пользователя. При следующем обращении на сервер браузер отсылает эти данные назад, и серверная программа идентифицирует по ним пользователя. Назвали они этот механизм Куки (cookie - печение). Позже Miscosoft реализовала Куки в InternetExpoler. Сегодня Куки поддерживаются всеми современными браузерами.
Этот механизм тоже имеет недостатки: пользователь может запретить своему браузеру работать с Куки или неправильно настроенный proxy-сервер может их удалять из запроса. Но, если не заниматься такой, извиняюсь, ерундой, механизм Куки выглядит более надежным и безопасным, чем идентификация по IP и параметрам URL.
Работу сессии PHP можно продемонстрировать на таком примере:

PHP - Код

session_start(); // запускаем механизм сессии

// PHP проверяет существование сессии
// Если ее нет, то она будет автоматически создана (пустая - без данных)
// Если она уже есть, то данные помещаются в массив $_SESSION

if (isset($_POST['name'])) // пользователь прислал свое имя
{
$_SESSION['name'] = $_POST['name'];
echo "Здравствуйте, " . $_SESSION['name'] . "!";
}
else if (isset($_SESSION['name'])) // не прислал, но мы помним его
{
echo "А я вас узнал. Вы - " . $_SESSION['name'] . "!";
}
else // кто он - этот пользователь?
{
echo '<form method="post">';
echo 'Назовите себя:';
echo '<input type="text" name="name" />';
echo '<input type="submit" value="Сообщить" />';
echo '</form>';
}

// По завершению программы содержимое массива $_SESSION автоматически
//  сохраняется в хранилище сессии.

Вот так вот просто работает. Пока просто. ;)

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

---

Тег, управляющий временем индексации сайта

<META NAME="revisit-after" content=<... days">

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

<META NAME="robots" content="...">

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

<META NAME="subject" content="...">

Прописывать тему страницы в мета-тегах просто нелепо, для этого существуют заголовки, названия. Поисковики не обращают на этот тег внимания. Если в теме будет написано одно, а сайт совершенно другой тематики, то результат будет тем более нулевым.
Тег, определяющий заголовок страницы

<META NAME="title" content="...">

Для заголовка страницы существуют специальные теги <title> и </title>. Поэтому, прописывание загловка в мета-тегах не имеет смысла хотя бы потому, что эта конструкция будет слишком громоздкой.
Тег, определяющий создателя сайта

<META NAME="site-created" content="...">

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

<META NAME="Content-Language" content="...">

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

<META NAME="Copyright" content="...">

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

<META NAME="Author" content="...">

В общем и целом, данный тег аналогичен предыдущему, т.к. обычно автор сайта является и владельцем авторских прав. А если имя автора ввести в строку поиска, то поисковик выдаст на первых местах те страницы, на которых имя (или ФИО) есть в тексте самой страницы и уже только потом в мета-тегах.
Тег, определяющий адрес страницы

<META NAME="Address" content="...">

Если честно, то этот тег вызывает у меня смех. Зачем указывать адрес страницы в мета-тегах, если его можно набрать в адресной строке. Или его придумали в те времена, когда поисковые машины находились на зачаточной стадии развития?
Тег, определяющий домашнюю страницу

<META NAME="home_url" content="...">

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