Формы
Формы используются для интерактивного общения с пользователями. C помощью форм может производиться регистрация пользователя, его авторизация на сайте, вставка комментариев, пересылка сообщений и т.д. Для обработки форм применяются сценарии CGI или производится непосредственная пересылка информации на почтовый ящик. Создание формы производится в два этапа. Сначала создается нужная форма, а затем на сервере пишется сценарий CGI.
Форма создается с использованием парного тэга <form>. Тэг <form> может содержать следующие атрибуты:
method - определяет способ пересылки данных сценарию CGI со значением определенного протокола передачи данных. Их два. Протокол get (выбран по умолчанию) и post, который позволяет передавать большие объемы данных.
action - определяет .
enctype - определяет способ кодирования содержимого формы. По умолчанию используется значение form-encoded.
Пример:
<FORM method="get" или "post" action="URL сценария"></FORM> </!-- для сценария -->
<FORM method="get" или "post" action="mailto:>почтовый адрес"></FORM> </!-- для почты -->
Теперь рассмотрим элементы формы:
<input> - элемент <input> используется для внедрения в форму кнопок, текстовых полей, паролей, переключателей, флажков и графических изображений. Элемент может иметь восемь атрибутов типа type:
- text - однострочное текстовое поле. Сюда можно вводить имена, названия, должности, телефоны и т.д. Может принимать следующие значения:
- maxlength - задаёт максимально допустимую длину вписываемого значения в символах
- size - задаёт максимально допустимую длину поля в символах
- value - задаёт значение по умолчанию, которое можно менять
- Пример:
<form>
<input type="text" name="hobby" maxlength="35" size="20" value="Шопинг"> </!-- тип; имя; длина; размер; значение -->
</form>
- password - однострочное текстовое поле, в котором вместо вводимых символов отображаются звездочки. Может принимать следующие значения:
- maxlength - задаёт максимально допустимую длину вписываемого значения в символах
- size - задаёт максимально допустимую длину поля в символах
- value - задаёт значение по умолчанию, которое можно менять
- Пример:
<form>
<input type="password" name="PASSWORD_BOX" maxlength="35" size="20">
</form>
- hidden - позволяет пересылать сценариям информацию, которая не может быть изменена пользователем. Некоторые программы CGI используют скрытые поля для передачи информации из одной страницы в другую, например, имя или номер. Такой подход существенно облегчает работу пользователя, избавляя его от необходимости повторного ввода данных.
Например, для пересылки файла с исходным кодом HTML используется следующая конструкция:
- </form>
<input type="hidden" name="file" value="anyfile.html">
</form>
checkbox - флажки используются для предоставления возможности пользователю ответить односложно: да/нет истина/ложь больше/меньше и т.д. Выглядит обычно в виде крестика или птички. Может иметь значения:
- checked - задаёт начальный статус флажка по умолчанию
value - задаёт значение по умолчанию, которое можно менять
Пример:
<form>
<input type="checkbox" name="send_mail" value="yes" checked> </!-- значение checked устанавливает "птичку" по умолчанию -->
</form>
radio - переключатель с более широкими функциональными возможностями. В группе переключателей может быть выбран лишь один. Для каждого переключателя указывается отдельный элемент input.
- Пример:
<form>
<input type="radio" name="payment_type" value="mastercard" checked> Мастеркарт </!-- значение checked устанавливает переключатель по умолчанию -->
<input type="radio" name="payment_type" value="visa"> Виза
<input type="radio" name="payment_type" value="AmEx"> Американ Экспрес
</form>
submit - задает кнопку, пересылающую содержимое формы сценарию, который был задан атрибутом action в элементе <form>. С помощью кнопок можно вычислять сумму, загружать страницы, пересылать данные, сбрасывать значения.
- Пример:
<form method="post" action="mailto:name@domen.ru"> </!-- метод; путь -->
<input type="submit" value="Заслать"> </!-- тип; значение, т.е. надпись на кнопке -->
</form>
reset - эта кнопка используется для восстановления значений, заданных по умолчанию. Если значение по умолчанию не предусмотрено, то оно просто обнулится. Ширина кнопки может меняться в зависимости от других элементов.
- Пример:
<form>
<input type="reset" value="Сброс">
</form>
image - эта кнопка во многом похожа на кнопку submit, только в качестве кнопки используется изображение. Одним из преимуществ является возможность передачи координат щелчка пользователя, что позволяет организовать карту изображений. Элемент может иметь атрибуты
-
src. Задаёт URL файла с изображением.
align. Задаёт выравнивание изображения относительно текста при помощи значений top, middle и bottom.
name. Задаёт имя карты, которое так же пересылается сценарию вместе с координатами.
Пример:
<form method="post" action="Путь к файлу">
<input type="image" src="Путь к изображению кнопки">
</form>
button - создает другую кнопку, браузеры пользователей могут использовать значение атрибута value в качестве исходного имени файла.
Пример:
<form>
<input type="button" value="Кнопочка">
</form>
file - создает управляющий элемент выбора файла.
- Пример:
<form>
<input type="file">
</form>
accesskey - задает кнопку, при нажатии которой происходит обработка поля.
- Пример:
<form method="post" action="mailto:name@domen.ru">
<input type="submit" value="Послать" accesskey="a">
</form>
id - задает имя для ссылки.
- Пример:
<form>
<input id="имя">
</form>
size - задает ширину элемента в пикселях.
- Пример:
<form>
<input size="число">
</form>
disabled - отключает возможность изменять содержимое поля или положение кнопки.
- Пример:
<form>
<input type="text" name="Hobby" maxlength="35" size="20" value="Водовка" disabled>
</form>
<textarea> - при помощи этого элемента создается область для ввода и просмотра текста. Может использоваться и не в составе формы, а как самостоятельные детали страницы. Область ввода помогает сэкономить место благодаря полосам прокрутки. Может иметь атрибуты:
- name - задаёт ключевое слово, по которому сценарий может обращаться к его содержимому.
rows - задаёт высоту области в строках.
cols - задаёт ширину области в символах.
- Пример:
<form>
<textarea name="ключевое слово" rows=5 cols=30>Область для ввода текста</textarea><br>
<input type="reset" value="Стереть">
</form>
<select> - может принимать форму раскрывающегося списка или меню элементов. Имеет вложенный тэг <option> и атрибуты:
- name - задаёт имя.
size - задаёт максимальное количество элементов списка, одновременно отображаемых на экране.
multiple - задаёт возможность одновременного выбора нескольких значений.
- selected. - задаёт изначально выбранное слово.
value. - задаёт значение выбранного слова для сценария.
- Пример:
<form>
Выберите нужное
<select multiple>
<option value=a>Первый</option>
<option value=b>Второй</option>
<option value=c>Третий</option>
<option value=d>Четвертый</option>
</select>
</form>
или
<form>
<select size=1>
<option selected value=1>Выберите:</option>
<option value=2> Первый</option>
<option value=3> Второй</option>
<option value=4>Третий</option>
<option value=5> Четвертый</option>
</select>
</form>
<optgroup> применяется для логической группировки элементов <option> внутри тэга <select> имеет атрибут label:
- Пример:
<form>
<select size=1>
<optgroup label="Первая группа">
<option selected value=1>Выберите:</option>
<option value=2> Первый</option>
<option value=3> Второй</option>
</optgroup>
<optgroup label="Вторая группа">
<option value=4>Третий</option>
<option value=5> Четвертый</option>
</optgroup>
</select>
</form>
<isindex> - самый простой элемент, позволяющий создать подобие формы и ввода строки, содержащей текст и генерации запроса.
-
Пример:
Допустим что на текущей странице задан базовый URL при помощи элемента <BASE href="URL поискового средства в Internet"> тогда, если пользователь введет в поле ключевые слова для поиска слово1,слово2,слово3, то браузер сформирует и отошлет запрос для поисковой машины сервера в виде: http://www.название.домен/?слово1+слово2+слово3ю Если поисковая программа сервера поддерживает стандартный синтаксис запроса с использованием знаков ? и +, поиск будет осуществлен.
<ISINDEX prompt="Строка для ввода критерия поиска">
<button> - является альтернативой элементу <INPUT> с более богатыми возможностями - например, с заданием альтернативного текста. Имеет следующие атрибуты:
- name - задает имя элементу.
value - задает значение элементу.
type - при использовании в качестве кнопки принимает значения: button, submit и reset.
disabled - делает недоступным данный элемент
tabindex - определяет положение в последовательности перехода клавишей Tab, отключенные поля форм не участвуют в очередности.
accesskey - задает клавишу доступа.
id - задает имя для ссылки.
- Пример:
<form method="post" action="mailto:name@domen.ru">
<button type="submit" name="submit">Отослать</button>
</form>
<label> - применяется для альтернативного задания информации для управляющих полей формы. Поддерживает атрибут for, который связывает элемент <label> с другим элементом формы, а значение атрибута for должно совпадать со значением атрибута id связанного управляющего элемента.
Пример:
<form action="URL" method="post">
<table>
<tr>
<td><label for="fname">Имя</label>
<td><input type="text" name="firstname" id="fname">
<tr>
<td><label for="lname">Фамилия</label>
<td><input type="text" name="lastname" id="lname">
</table>
</form>
или
<form action="URL" method="post">
<label for="firstname">Имя:</label>
<input type="text" id="firstname">
<label for="lastname">Фамилия:</label>
<input type="text" id="lastname">
<label for="email">e-mail:</label>
<input type="text" id="email">
<input type="radio" name="sex" value="Мужской">Мужской
<input type="radio" name="sex" value="Женский">Женский
<input type="submit" value="Отправить">
<input type="reset">
</form>
<fieldset> - позволяет логически группировать элементы формы.
- Пример:
<form
<fieldset>
Имя
</fieldset>
</form>
<legend> - позволяет давать наименования логическим группам элементов формы.
- Пример:
<form>
<fieldset>
<legend>Группа 1</legend>
<input type="text" id="name1">
<input type="text" id="name2">
</fieldset>
<fieldset>
<legend>Группа 2</legend>
<input type="text" id="name3">
<input type="text" id="name4">
</fieldset>
</form>
Ну, вот и все, что я знаю про формы. Начинающему вебмастеру на первых порах формы не очень нужны, но знать о них он должен, т.к. со временем формы займут достойное место на его сайте. А теперь перейдем к фреймам.
Шадуро Николай 