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

Формы предназначены для пересылки данных от пользователя к веб-серверу. О том, как обрабатывать эти данные на стороне сервера, изложено в разделе PHP и MySQL. А пока рассмотрим возможности HTML для создания форм.

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

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

В итоге в окне веб-браузера будет отображена форма, состоящая из пяти текстовых полей (Логин, Пароль, URL-адрес сайта, Название сайта и Описание сайта), списка значений (Тема сайта), поля выбора файла с кнопкой Обзор, а также двух кнопок Очистить и Отправить.

Кнопка Очистить возвращает все значения формы к первоначальным, Кнопка отправить позволяет отправить данные, введенные пользователем, программе (URL-адрес которой указан в параметре action тега <form>, в данном случае file.php) расположенной на веб-сервере. Программа обработает данные и либо добавит сайт в каталог и выдаст подтверждение об успешной регистрации, либо выдаст сообщение об ошибке, если обязательное поле не заполнено или заполнено неправильно. В нашем случае программы обработки нет, и отправка данных ни к чему не приведет, точнее приведет к ошибке "Не удается найти веб-страницу".

Структура документа с формами

Форма добавляется в HTML-документ при помощи парного тега <form>. Внутри тегов <form> и </form> могут располагаться теги <input>, <textarea> и <select>, вставляющие в форму элементы управления:

<form>

<input type="text">

<textarea></textarea>

<select>

<option>

</select>

<input type="file">

<input type="reset">

<input type="submit">

</form>

Рассмотрим их подробнее.

Добавление формы в документ

Парный тег <form> позволяет добавить форму в HTML-документ. Тег имеет следующие параметры:

• action —задает URL-адрес программы обработки формы. Может задаваться в абсолютной или относительной форме;

• <form action="file.php">

  <form action="https://sevidi.ru/file.php">

• method —определяет, как будут пересылаться данные формы до веб-сервера. Может принимать два значения — GET и POST:
  
  
  • GET —данные формы пересылаются путем их добавления к URL-адресу после знака "?" в формате

    [имя_параметра] = [значение_параметра]

    Пары параметр = значение отделяются друг от друга символом амперсанда (&). Например:

    https://sevidi.ru/file.php?pole1=Login&pole2=Password

    Все специальные символы, а также буквы, отличные от латинских (например, буквы русского языка), кодируются в формате %nn, а пробел заменяется знаком "+". Например, фраза "каталог сайтов" будет выглядеть следующим образом:

    %EA%E0%F2%E0%EB%EE%E3 + %F1%E0%E9%F2%EE%E2

    В теге <form> значение GET для параметра method задается так:

    <form action="https://sevidi.ru/file.php" method="get">

    Метод GET применяется, когда объем пересылаемых данных невелик, так как существует предел длины URL-адреса. Длина не может превышать 256 символов;

  • POST — предназначен для пересылки данных большого объема, файлов и кофеденциальной информации (например, паролей);

  • <form action="https://sevidi.ru/file.php" method="post">

• enctype —задает MIME-тип передаваемых данных. Может принимать два значения:
  
  
  • application/x-www-form-urlencoded — принимается по умолчанию;

  • <form action="https://sevidi.ru/file.php" method="post" enctype="application/x-www-form-urlencoded">

  • multipart/form-data — указывается при пересылке файлов веб-серверу;

  • <form action="https://sevidi.ru/file.php" method="post" enctype="multipart/form-data">

  • text/plain —указывается при передаче данных по электронной почте;

  • <form action="https://sevidi.ru/file.php" method="post" enctype="text/plain">

• target — указывает, куда будет помещен документ, являющейся результатом обработки данных формы веб-сервером. Параметр может содержать имя фрейма или одно из зарезервированных значений — _blank, _top, _self, _parent;

• <form action="https://sevidi.ru/file.php" method="post" enctype="multipart/form-data" target="_blank">

Описание элементов управления

Тег <input> позволяет вставлять в форму элементы управления, например текстовое поле, кнопку или флажок. Этот тег имеет следующие параметры:

• type —задает тип элемента. В зависимости от значения этого поля создаются следующие элементы формы:
  
  
  • text — текстовое поле ввода;

  • <input type="text">

  • password — текстовое поле для ввода пароля, в котором все вводимые символы заменяются кружками или звездочкой;

  • <input type="password">

  • file —поле ввода имени файла с кнопкой Обзор. Позволяет отправлять файл на веб-сервер;

  • <input type="file">

  • checkbox — поле для установки флажка, который можно установить или сбросить;

  • <input type="checkbox">

  • radio —элемент-переключатель (иногда их называют радио-кнопками);

  • <input type="radio">

  • reset — кнопка, принажатии на которую вся форма очищается. Точнее сказать, все элементы формы получают значение по умолчанию;

  • <input type="reset">

  • submit — кнопка, при нажатии на которую происходит отправка данных, введенных в форму;

  • <input type="submit">

  • image — графическое изображение, играющее такую же роль, что и кнопка типа submit. Адрес графического файла указывается как значение атрибута src;

  • <input type="image" src="/images/menu1_r1_c1.gif">

  • button — обычная командная кнопка;

  • <input type="button">

    Такую кнопку имеет смысл использовать только с прикрепленным к ней скриптом.

  • hidden — скрытый элемент, значение которого отправляется вместе со всеми данными формы. Элемент не показывается пользователю, но позволяет хранить, например, данные из предыдущей формы (если пользователь последовательно заполняет несколько форм) или уникальное имя пользователя;

  • <input type="hidden">

• name — задает имя элемента управления. Оно должно обязательно указываться латинскими буквами (например, pole) или комбинацией латинских букв и цифр (например, pole2). Имя элемента не должно начинаться с цифры;

• <input type="text" name="pole2">

Остальные параметры специфичны для каждого отдельного элемента. Поэтому рассмотрим каждый элемент отдельно.

Текстовое поле и поле ввода пароля

Для текстового поля и поля ввода пароля применяются следующие параметры:

• value —задает текст поля по умолчанию;

• <input type="text" name="pole2" value="http://">

• maxlength — указывает максимальное количество символов, которое может быть введено в поле;

• <input type="text" name="pole2" value="http://" maxlength="100">

• size — определяет видимый размер поля ввода;

• <input type="text" name="pole2" value="http://" maxlength="100" size="30">

Кнопки Сброс, Отправить и командная кнопка

Для кнопок используется один параметр:

• value —задает текст, отображаемый на кнопке;

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

Скрытое поле hidden

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

• value — определяет значение скрытого поля:

• <input type="hidden" name="pole2" value="1">

Поле для установки флажка

Для полей флажков используются следующие параметры:

• value —задает значение, которое будет передано веб-серверу, если флажок отмечен. Если флажок снят, значение не передается. Если параметр не задан, используется значение по умолчанию — on;

• <input type="checkbox" name="check1" value="yes">Текст

• checked — указывает, что флажок по умолчанию отмечен;

• <input type="checkbox" name="check1" value="yes" checked>Текст

Элементы checkbox можно объединить в группу. Для этого необходимо установить одинаковое значение параметра name. В этом случае передаваемым значением является строка с разделенными запятыми значениями параметра value всех отмеченных флажков.

Элемент-переключатель

При описании элемента-переключателя используются такие параметры:

• value —указывает значение, которое будет передано веб-серверу, если переключатель выбран:

• <input type="radio" name="radio1" value="yes">Текст

  Если ни одно из значений не выбрано, никаких данных передано не будет;

• checked — обозначает переключатель выбранный по умолчанию:

• <input type="radio" name="radio1" value="yes" checked>Текст

Элемент-переключатель может существовать только в составе группы подобных элементов, из которых может быть выбран только один. Для объединения переключателей в группу необходимо установить одинаковое значение параметра name и разное значение параметра value:

Укажите ваш пол: <br>
<input type="radio" name="radio1" value="male" checked>Мужской
<input type="radio" name="radio1" value="female" checked>Женский

Похожие материалы по теме: Функция внутри формы.
Передача данных в функцию.
Формы и РНР. Передача данных формы из одного сценария в другой. Oбработка формы с одним сценарием.