HTML Формы (частьI)

Формы - это одни из самых главных элементов HTML, которые позволяют интерактивно взаимодействовать с посетителями Ваших страниц. Если Вы уже встречались с заполнением форм HTML, то знаете, насколько они могут быть полезными. Добавление HTML-формы на вебстраницу позволяет легко и эффективно поддерживать связь, с посетителями. Ползователи могут вводить комментарии, сообщать контактную информацию или другие данные. Затем, по мере заполнения форм Вашими посетителями, эта информация автоматически передается Вам (а если говорить точнее, сценарию CGI на Вашем сервере, либо посылается получателю по электронной почте).
Форма состоит из элементов формы заключенных между тегами <Form> и </Form>.

Элемент Form

Используется для создания заполяемой формы. Необходимо присутствие начального и конечного тэгов. Внутри элемента FORM разрешается использовать большинство HTML-элементов.
Имеет атрибуты;

атрибут Name Определяет имя формы, уникальное для данного документа. Используется, если в документе присутствует несколько форм. атрибут Action Обязательный параметр. Определяет URL, по которому будет отправлено содержимое формы. Это может быть либо адрес электронной почты, либо путь к скрипту сервера, обслуживающему данную форму. атрибут Method Определяет способ отправки содержимого формы. Возможные значения GET (по умолчанию) и POST. Хотя способ GET принят значением по умолчанию, в большинстве случаев разработчики пользуются протоколом POST, который позволяет передавать большие объемы данных. атрибут Enctype определяет способ кодирования содержимого формы при отправке. По умолчанию используется "application/x-www-form-urlencoded". атрибут Target определяет имя окна, в которое возвращается результат обработки отправленной формы. Возможные значения : _self, _parent, _top, _blank или явно указанное имя окна. Подробное описание значений смотрите в параметре "Target" элемента "A".

Со всеми атрибутами, элемент "Form" записывается так;
<Form method="get" action="http://site.ru/cgi-bin/form.pl" name="form1" target="_blank">
     элементы формы
</Form>
Или для отправки по электронной почте;
<Form method="get" action="mailto:info@site.ru" name="form1" target="_blank">
     элементы формы
</Form>

Элемент Textarea

Создает поле для ввода нескольких строк текста. Обычно содержит текст инициализации, который при загрузке документа изначально будет записываться в данное поле.
имеет атрибуты;

атрибут Name Обязательный параметр. Определяет название, которое будет использоваться при идентификации заполненого поля сервером. атрибут Rows Определяет количество строк текста, видимых на экране. . атрибут Cols Определяет ширину текстового поля - в печатных символах. атрибут Wrap Определяет способ переноса слов в заполняемой данной заполняемой форме. Возможные значения: значение Off При этом значении перенос слов не происходит (значение по умолчанию) значение Virtual С данным значением перенос слов только отображается, на сервер же поступает неделимая строка. значение Physical Если установит это значение перенос слов будет происходить во всех точках переноса. атрибут Readonly Данный атрибут указывает на то, что в данном поле запрещено изменение содержимого формы, то есть данное поле предназначено только для чтения. Этот атрибут не имеет значений, являясь просто флагом внутри тега "Textarea". Записывается так: <FORM> <TEXTAREA NAME="readonly_text" WRAP="virtual" COLS="40" ROWS="3" readonly> Попробуйте изменить содержимое данного поля. </TEXTAREA> </FORM> Эффект; Попробуйте изменить содержимое данного поля. атрибут Disabled Данный атрибут указывает на то, что данное поле является неактивным и в нем таже запрещено изменение содержимого формы. Этот атрибут не имеет значений, являясь просто флагом внутри тега "Textarea". Записывается так: <FORM> <TEXTAREA NAME="readonly_text" WRAP="virtual" COLS="40" ROWS="3" disabled> Поле как бы закрыто пеленой. Попробуйте изменить содержимое данного поля. </TEXTAREA> </FORM> Эффект; Поле как бы закрыто пеленой. Попробуйте изменить содержимое данного поля. В случае если текст помещенный в поле не помещается в указанные размеры поля, полоса прокрутки все равно не появится. Так как поле является не активным.

Элемент Select

Элемент 'Select" создает в заполняемой форме меню типа "Выбор одного пункта из многих" или "Выбор нескольких пунктов из многих". Должен располагаться внутри элемента "Form" и иметь как начальный, так и конечный тэги. Содержит несколько элементов "Option".
Имеет атрибуты;

атрибут Multiple Дает возможность выбора нескольких пунктов меню. Если этот атрибут не установить то можно выбрать только один пункт меню, что является значением по умолчанию. Не имеет значений и является флагом. атрибут Name Определяет имя меню, уникальное для данной формы, которое будет использоватся при передаче данных на сервер. Каждый выбранный пункт меню при передаче на сервер будет иметь вид: name/value. Значение (value) формируется элементом "Option". атрибут Size Определяет количество видимых пунктов в меню. Если значение этого параметра больше единицы, то результатом будет список пунктов.

Элемент Option

Используется только с элементом SELECT. Элемент OPTION описывает отдельные пункты меню. Конечный тег не обязателен.
имеет атрибуты;

атрибут Selected Определяет пункт меню, который будет выбран изначально при загрузке документа. Если меню имеет тип "один из многих", то флагом "Selected" может быть помечен лишь один пунктов меню. атрибут Value Задает данному пункту значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. При предоставлении информации на сервер это значение будет объединено со значением параметра "Name" в элементе "Select".

Полностью элемент "Select" записывается так;
<form action="Url сценария" method="get" name="select">
<select name="menu" size="1">
<option selected value="1">Первый пункт
<option value="2">Второй пункт
<option value="3">Третий пункт
<option value="4">Четвертый пункт
</select>
</form>
Эффект;

Первый пункт Второй пункт Третий пункт Четвертый пункт

Или;
<form action="Url сценария" method="get" name="select">
<select multiple name="menu" size="3">
<option selected value="1">Первый пункт
<option value="2">Второй пункт
<option value="3">Третий пункт
<option value="4">Четвертый пункт
</select>
</form>
Э ффект;

Первый пункт Второй пункт Третий пункт Четвертый пункт

Продолжение следует...