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" — делает элемент неактивным.

Существует также элемент для выбора файла, который при сабмите формы будет загружен на веб-сервер, но об этом, пожалуй, в отдельной статье.

Комментарии

Оставить комментарий »

 
АРтём
22 апреля 2012, 17:05
#1
 

норм

Алексей
4 мая 2013, 15:36
#2
 

а куда вставлять

<?php
  //--Проверяем, были ли переданы данные
  if ( isset($_GET["login"]) && isset($_GET["pass"]) )
  {
    echo "Ваше имя пользователя: " . $_GET["login"] . ", ваш пароль: " . $_GET["pass"];
    exit;
  }
?>

и вообще все <?php ???

Joker-jar
13 мая 2013, 3:54
#3
 

Алексей, в файлы с расширением .php

Оставить комментарий

Ваше имя
 
Ваш e-mail
 
Комментарий