6.2. Создание HTML-форм

Чтобы позволить пользователю взаимодействовать с сайтом используют специальные формы, в которых вводится необходимая информация, а затем она передается серверу для обработки. Для создания таких форм используется тег-контейнер <form>, имеющий следующие основные необязательные атрибуты:

action – адрес скрипта, обрабатывающий передаваемые данные;
method – метод протокола HTTP (определяет тип запроса GET или POST).

Например, чтобы отправить GET-запрос сайту http://mysite.ru скрипту getform.php следует записать тег <form> в виде:

<form action="http://mysite.ru/getform.php" >
<!-- поля ввода данных -->
</form>

или так:

<form action="getform.php" >
<!-- поля ввода данных -->
</form>

Второй вариант записи подразумевает, что браузер достроит относительный адрес до абсолютного в виде http://mysite.ru/getform.php. Это будет корректно работать, например, когда страница загружена с этого же сайта http://mysite.ru или установлен тег <baseurl url="http://mysite.ru"> (о теге baseurl читай выше).

Обратите внимание, если атрибут method не задан, то форма будет передавать GET-запрос. Если же нужно изменить способ передачи информации с GET на POST, то это следует явно указывать в атрибуте method:

<form action="getform.php" method="POST" >
<!-- поля ввода данных -->
</form>

Внутри тега <form> располагаются поля ввода информации. Чаще всего они создаются с помощью тегов <input>, <select> и <textarea>. Все перечисленные теги имеют необязательные атрибуты class, style и id для их связи с таблицами каскадных стилей, позволяющие создавать требуемое оформление элементов управления.

Тег <input>

Тег <input> отвечает за создание следующих элементов (табл. 6.1).

Таблица 6.1. Элементы, создаваемые с помощью тега <input>

Название элемента	Вид элемента	Тип
Поле ввода		text
Кнопка		button
Флажки		checkbox
Переключатели		radio
Поле ввода пароля		password
Скрытое поле		hidden
Сброс данных формы		reset
Отправка данных cерверу		submit

Например, для создания поля ввода в простейшем случае используется запись:

<input type="text" />

Если необходимо задать значение по умолчанию, которое будет изначально отображаться в поле ввода, то используется атрибут value:

<input type="text" value="Начальное значение" />

Если нужно изменить размер отображения поля ввода по горизонтали, то используется атрибут size:

<input type="text" value="Начальное значение" size=10 />

Наконец, чтобы указать имя параметра, который будет ассоциирован с введенным значением в поле ввода при передаче информации, следует использовать атрибут name:

<input type="text" name="fio" value="Значение" size=10 />

Обратите внимание, значение атрибута name должно быть уникальным в пределах одной формы, иначе возникнет неопределенность в сопоставлении имен и соответствующих данных формы.

Аналогичным образом создаются все вышеуказанные в табл. 6.1 элементы управления:

<input type="checkbox" checked />Флажок

Атрибут checked устанавливает флажок в состояние «отмечено».

<input type="radio" name="sex" checked>Мужской
<input type="radio" name="sex" >Женский
<br>
<input type="radio" name="drink" checked>Чай
<input type="radio" name="drink" >Кофе

Пример двух переключателей в одной форме: первый служит для выбора пола, второй – для выбора напитка. Переключатели группируются по атрибуту name, т.е. поля radio, имеющие одно и тоже значение атрибута name, определяют одну группу переключателей.

Для создания кнопки отправки данных формы серверу, используется специальный тип кнопки submit:

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

Тег <select>

С помощью тега <select> создаются списки на HTML-страницы. Они могут быть выпадающими и не выпадающими (рис. 6.1).

а)                б)

Рис. 6.1. Виды списков: а – выпадающий; б – не выпадающий

Создание списка выполняется с помощью тегов <option>, расположенных внутри тега <select>, например,

<select name="month">
<option value="1">Январь</option>
<option value="2">Февраль</option>
<option value="3">Март</option>
<option value="4">Апрель</option>
<option value="5">Май</option>
<option value="6">Июнь</option>
<option value="7">Июль</option>
<option value="8">Август</option>
<option value="9">Сентябрь</option>
<option value="10">Октябрь</option>
<option value="11">Ноябрь</option>
<option value="12">Декабрь</option>
</select>

создается выпадающий список с 12 месяцами. Атрибут value тега <option> определяет значение, передаваемое серверу при выборе соответствующего значения из списка.

Тег <select> имеет следующие необязательные атрибуты:

name – имя элемента при отправке соответствующих данных серверу (аналогично атрибуту name тега <input>);
size – число отображаемых строк списка (если size > 1), то список становится не выпадающим);
multiple – позволяет выбирать сразу несколько элементов в списке.

Пример. Не выпадающий список с множественным выбором

<select name="month" size=5 multiple>
<option value="1">Январь</option>
<option value="2">Февраль</option>
...
</select>

Пример. Выпадающий список с множественным выбором

<select name="month" size=1 multiple>
<option value="1">Январь</option>
<option value="2">Февраль</option>
...
</select>

В последнем примере, несмотря на то, что параметр size=1, будет отображен не выпадающий список, т.к. множественный выбор возможен только для таких типов списков и атрибут multiple имеет более высокий приоритет, чем атрибут size.

Тег <textarea>

Тег-контейнер <textarea> служит для ввода многострочного текста в поле ввода (рис. 6.2). В отличии от поля ввода, данный тег позволяет вводить полноценный текст больших размеров. Обычно максимальный размер текста ограничивают 64 Кб, но может быть и больше. В конечном итоге, максимальный объем поля textarea определяется разработчиком сайта и возможностями сервера.

Рис. 6.2. Пример поля ввода текста textarea

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

<textarea>
Первая строка
Вторая строка
</textarea>

при этом переносы строк в тексте, заключенном в теге <textarea> будут сохранены (см. рис. 6.2).

Тег-контейнер <textarea> имеет следующие атрибуты:

cols – ширина поля в символах;
rows – высота поля в символах;
name – имя поля (действие аналогично такому же параметру в теге <input>);
maxlength – максимальное число вводимых символов (не поддерживается некоторым браузерами);

Пример. Поле textarea с набором описанных атрибутов.

<textarea cols=40 rows=20 name="text" maxlength=10000>
Начальный текст
</textarea>

Рис. 6.3. Вид поля textarea приведенного примера