В HTML формы применяются для отправки данных на обработку на какую-либо программу (скрипт), установленную на сервере. Формы также могут быть использованы для введения информации в базы данных через веб-интерфейс и для других подобных целей. Передаваемая информация состоит из двух частей: имени переменной и значения переменной.
Форма создаётся парным тегом <form> </form>. Тег формы содержит следующие атрибуты (табл. 2.4.):
Таблица 2.4. Атрибуты форм
Название атрибута
Обязательность
Назначение
Параметры
action
Обязательный
Указывает на веб-адрес обработчика данных. В параметрах указывается URL обрабатывающей данные из формы программы
action="search.cgi"
method
Необязательный. По умолчанию установлен method=get.
Определяет метод передачи данных на скрипт
method
=post
method=get
Ниже (пример 10) предложен код HTML простейшей поисковой формы и её изображение (рис. 2.8).
Пример 10
<form method="post" action="search.php">
<p><select name="prc" size="1">
<option selected value="any">любое </option>
<option value="all">все </option>
<option value="exact">фразу </option>
</select>
<input type="text" name="keys" size="12" maxlength="40" value="поиск">
<input type="submit" value="Поиск"></p>
</form>
Приведённая здесь форма состоит из нескольких элементов.
Первым элементом является тег <form> с атрибутами, устанавливающими метод передачи данных METHOD="post" и адрес обработчика данных ACTION="search.php".
Вторым элементом является меню SELECT, которое может содержать несколько элементов. Оно создаётся парным тегом <select> </select>. Тег <select> содержит атрибуты name и size. Атрибут name предназначен для определения имени переменной, size – определяет количество одновременно отображаемых строк <option>. Включение атрибута multiple позволит одновременно выбрать несколько пунктов меню.
В данном случае меню select предлагает три варианта выбора: «любое» (слово из введённых для поиска), «все» (несколько слов) и «фразу» (точный поиск). Пункты меню select задаются парным тегом <option> </option>. Атрибут value предназначен для установки значения, которое передаётся на обрабатывающий программу скрипт. Включение атрибута selected делает пункт меню выбранным по умолчанию. Внутри тега <option> </option> помещается слово, отображаемое на экране.
Третьим элементом является поле ввода текста, которое описано тегом с параметрами: <input type="text" NAME="keys" size="12" maxlength="40" value="поиск">.
Тег <input> может применяться для разных целей. При помощи <input> создаются кнопки, поля ввода текста, устанавливаются различные параметры формы (цвет текста, цвет или изображение для фона и т. д.).
Тег <input> с атрибутом type=, в параметре которого указано text предназначен для ввода текста (одного или нескольких слов). Имя переменной name="keys".
Атрибут size предназначен для указания длины поля ввода текста, атрибут maxlength предназначен для указания максимальной длины вводимого текста (и то и другое указывается в символах). Атрибут value предназначен для отображения слова «по умолчанию».
Аналогично предыдущему примеру создаётся форма ввода пароля. Указывается тип type=password, благодаря чему вводимый текст отображается в виде «звёздочек». Указывается также имя переменной name=password.
Элементы <input>, применяемые при создании голосований и т.п. форм: type=radio и type=checkbox.
«Радиокнопки» применяются в голосованиях, когда респондент должен выбрать строго один вариант из нескольких предложенных ему. «Радиокнопка» может содержать атрибут checked, предназначенный для отметки какой-либо из радиокнопок «по умолчанию». Визуально «радиокнопки» выглядят в виде кольцеобразной ячейки, которую можно отметить, поместив в неё «точку».
Пример 11:
<input type="radio" name="R1" value="V1" checked>123<br>
<input type="radio" name="R1" value="V2">234<br>
<input type="radio" name="R1" value="V3">345<br>
В этой группе «по умолчанию» отмечен верхний элемент, название которого «123» отображается на экране. «Радиокнопки» расположены вертикально благодаря завершающему каждую строку тегу переноса строки <br>.
«Чекбоксы» применяются в тех случаях, когда респонденту предоставляется возможность выбрать один и более из числа предложенных пунктов. Визуально «checkbox» выглядит в виде квадратной ячейки, в которой можно оставить «галочку». Также может содержать атрибут checked. Создаётся аналогично форме с «радиокнопками».
Но для работы формы мало только заполнить текстовое поле или отметить «радиокнопки» или «чекбоксами». Необходимо отдать приказание о передаче данных на сервер. Для этого применяются кнопки, создаваемые при помощи того же тега <input>.
Код кнопки выглядит следующим образом:
<input type="submit" value="Submit" name="B1">
Кнопки также применяются для сброса неверно введённых в форму данных (кнопки "Reset"):
<input type="reset" value="Reset" name="B2">
Подставив в параметр value какой-либо другой текст, вы измените текст, отображаемый на поверхности кнопки в качестве её названия. Например, "Submit" можно заменить на «Отправить», "Reset" заменить на «Сброс».
Элемент <textarea> предназначен для передачи данных на скрипты форумов, гостевых книг и т.п.
Пример 12:
<textarea name="S1" rows="6" cols="20">
</textarea>
Как и в предыдущих случаях, <textarea> содержит атрибут name, который определяет имя передаваемых данных. Rows и cols устанавливают размеры окна: Rows – высоту в строках, cols – ширину в знаках. Внутри двойного тега <textarea> </textarea> можно поместить отображаемый «по умолчанию» текст.
Пройдите курс по ссылке: Веб-технологии. Часть I