HTML-формы
Как вы уже знаете, веб-клиент имеет возможность передавать веб-серверу различную информацию при помощи GET и POST-запросов. HTML-формы — это основной инструмент для создания таких запросов. По сути, HTML-форма представляет собой поле или поля для ввода информации на веб-странице. Наглядным примером HTML-формы служит форма ввода логина и пароля для авторизации на сайте.
HTML-форма описывается с помощью парного тега form. Этот тег имеет два важнейших атрибута: method и action. В атрибуте method задается тип HTTP-запроса (get или post), в action — запрашиваемый документ, то есть путь к файлу, запрос которого будет осуществлен. Путь может быть как абсолютным (с указанием домена сайта), так и относительным. Например:
<form method="get" action="/login.php"> ... </form>
Существует несколько различных видов элементов для ввода данных, которые помещаются внутри формы. Элемент, с которого я хотел бы начать, называется submit:
<input type="submit" value="Войти" />
Элемент представляет собой кнопку, нажатие на которой приводит к выполнению HTTP-запроса. Атрибут value задает надпись на кнопке. Форма может содержать несколько элементов submit. Чтобы в запрашиваемом документе определить, по какой именно из кнопок было произведено нажатие, необходимо элементам submit установить атрибуты name. Например:
<form method="get" action="/control.php"> <input type="submit" name="submit" value="Add" /> <input type="submit" name="submit" value="Edit" /> </form>
При формировании запроса веб-браузер включит HTTP-параметр, характеризующий нажатый элемент submit. В качестве имени параметра будет взято значение атрибута name нажатой кнопки, в качестве значения — значение атрибута value. Таким образом, при нажатии кнопки Add будет сформирован запрос:
/control.php?submit=Add
а при нажатии кнопки Edit:
/control.php?submit=Edit
Следующий элемент представляет собой простейший элемент для ввода однострокового текста. Его HTML-код:
<input type="text" name="name" />
name — обязательный атрибут для участия в HTTP-запросе. Значение этого атрибута будет использовано в качестве имени HTTP-параметра. Этот атрибут имеется у всех типов элементов форм.
Элементу можно также задать атрибут value, указав в нем текст, который по-умолчанию будет введен в элементе. Например:
<input type="text" name="login" value="Имя пользователя" />
Элемент password служит для ввода паролей. Внешне он такой же, но введенный текст отображается в виде звездочек или точек:
<input type="password" />
Этого, в принципе, достаточно для создания простейшей формы авторизации. Давайте попробуем ее реализовать, а затем вернемся к рассмотрению остальных типов элементов.
Создадим файл auth.php в корневом каталоге со следующим содержимым:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Авторизация</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> </head> <body> <form method="get" action="/auth.php"> <table> <tr> <td>Имя пользователя:</td> <td> <input type="text" name="login" value="" /> </td> </tr> <tr> <td>Пароль:</td> <td> <input type="password" name="pass" value="" /> </td> </tr> </table> <input type="submit" value="Войти" /> </form> </body> </html>
Как видите, внутри тега form можно размещать теги, помогающие красиво разметить форму (я внутрь поместил таблицу). Форма содержит поля для ввода имени пользователя и пароля с именами login и pass соответственно. При нажатии "Войти" формируется GET-запрос документа /auth.php (то есть, страница запрашивает саму себя). В моем случае полный URL страницы имел вид http://test-domain3/auth.php.
Введите данные и нажмите "Войти". Страница должна перезагрузиться. Должен также измениться и адрес страницы. В моем случае он принял вид:
http://test-domain3/auth.php?login=Joker-jar&pass=12345
Это означает, что документ auth.php был запрошен с GET-параметрами, которые были введены с помощью HTML-формы. Поместите в начало файла auth.php PHP-обработчик, который будет принимать данные для авторизации:
<?php //--Проверяем, были ли переданы данные if ( isset($_GET["login"]) && isset($_GET["pass"]) ) { echo "Ваше имя пользователя: " . $_GET["login"] . ", ваш пароль: " . $_GET["pass"]; exit; } ?>
Если странице были переданы логин и пароль, условие сработает и сообщение будет выведено. Также будет вызван exit, который прекратит дальнейшее выполнение скрипта, следовательно форма выведена не будет.
Передавать пароль с помощью GET-запроса небезопасно, так как он виден в адресной строке. Сменим тип запроса на POST. Для этого изменим значение атрибута method, а в PHP-обработчике обращения к массиву $_GET изменим на $_POST. Проверьте работоспособность скрипта.
Следующий элемент — флажок. Его применяют, когда от пользователя необходим ответ вида "да/нет":
<input type="checkbox" />
Если флажок не отмечен, в параметрах ничего не передается. Иначе передается параметр name со значением on. Есть еще один момент. Как правило, рядом с флажком присутствует поясняющая надпись. Хорошим тоном является реализация веб-мастером реакции флажка на клики по этой надписи. Делается это просто. Флажку присваивается определенный id, а сама надпись оформляется тегом label с атрибутом for, значение которого равно идентификатору флажка:
<input type="checkbox" id="remember" name="remember" /> <label for="remember">Запомнить меня</label>
Похожий элемент используется для выбора ответа из набора значений. Допустим, пользователю необходимо выбрать один из трех цветов:
<input type="radio" id="red" name="color" value="red" /> <label for="red">Красный</label> <br /> <input type="radio" id="green" name="color" value="green" /> <label for="green">Зеленый</label> <br /> <input type="radio" id="blue" name="color" value="blue" /> <label for="blue">Синий</label> <br />
Обратите внимание, что у всех элементов одинаковое значение name. Можно выбрать только одно значение. В HTTP-параметра передастся value выбранного элемента, например color=blue.
Чтобы изначально был выбран какой-то из элементов, например, первый, ему нужно задать атрибут checked со значением checked (стандарт XHTML):
<input type="radio" id="red" name="color" value="red" checked="checked" />
Для ввода большого многострочного текста существует специальный элемент textarea:
<textarea rows="6" cols="20" name="text">Текст внутри элемента</textarea>
Этот элемент, как видите, отличается от предыдущих. Он представляет собой парный тег, а текст помещается не в атрибут, а в тело тега. У элемента также есть атрибут name. При помощи атрибута rows можно задать количество строк в элементе, cols — количество символов в строке. Элемент textarea используется, как правило, в POST-формах, т.к. предполагает ввод длинного текста (например, форма сообщения на форуме).
Выпадающий список. Наверняка сталкивались с таким элементом в программах. Позволяет выбрать одно значение из набора. Код элемента также не совсем обычен. Сначала создается элемент-контейнер select, ему задается атрибут name:
<select name="towns"> </select>
Внутрь контейнера помещаются элементы списка. Элемент списка представляет собой парный тег option, каждому элементу задается атрибут value. В тело элемента прописывается надпись элемента:
<select name="town"> <option value="msk">Москва</option> <option value="vlad">Владивосток</option> <option value="nsk">Новосибирск</option> </select>
В HTTP-запросе передается параметр с именем name и значением value выбранного элемента, например town=vlad. По умолчанию выбран первый элемент списка, если хотите, чтобы был выбран другой элемент, задайте ему атрибут selected со значением selected:
<option value="vlad" selected="selected">Владивосток</option>
Список значений. Если элементу select задать атрибут size с числовым значением, выпадающий список превратится в список значений. При этом значение атрибута size будет определять вертикальный размер элемента:
<select name="town" size="3"> <option value="msk">Москва</option> <option value="vlad">Владивосток</option> <option value="nsk">Новосибирск</option> </select>
Если элементу select задать атрибут multiple со значением multiple (стандарт XHTML), то появится возможность выбирать более одного элемента одновременно (например, с зажатой клавишей Ctrl). В этом случае в HTTP-запросе будут переданы все выбранные элементы с одинаковыми именами, например: town=msk&town=vlad&town=nsk.
Иногда необходимо в HTTP-запросе передать параметр, который пользователь не должен редактировать, а порой даже и видеть. Допустим, вы реализуете форму редактирования новости. В HTTP-запросе необходимо передавать идентификатор этой новости. Для подобных случаев есть скрытый элемент HTML-форм:
<input type="hidden" name="param" value="" />
Этот элемент не будет виден на форме, но при выполнении запроса будет передан HTTP-параметр name=value.
Иногда может пригодиться элемент, очищающий форму. Кнопка, при нажатии на которую все введенные пользователем данные на форме стираются:
<input type="reset" value="Очистить" />
Перечисленные элементы имеют два специальных атрибута:
readonly="readonly" — запрещает изменение информации в элементе (режим "только для чтения);
disabled="disabled" — делает элемент неактивным.
Существует также элемент для выбора файла, который при сабмите формы будет загружен на веб-сервер, но об этом, пожалуй, в отдельной статье.
норм
а куда вставлять
и вообще все <?php ???
Алексей, в файлы с расширением .php