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>

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

<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 приведенного примера