Форма предназначена для размещения в ней элементов управления: поля ввода, кнопки, переключатели, флажки и т.д. Каждый элемент управления создается при помощи тегов.
<FORM></FORM>
Форма открывается меткой <form> и заканчивается</form>. Страница может содержать в себе несколько форм, однако формы не могу располагаться одна внутри другой.
Большинство элементов формы может принимать определенные значения. Например, для поля ввода это может быть текст, а для переключателя – номер элемента, который выбран пользователем. Для доступа к этим значениям со стороны программы используется атрибут name.
В момент использования формы часть элементов может иметь значения.
Атрибут
Описание
Пример задания значения
Action
Определяет местоположения обработчика формы. action=mailto: адрес@сервер.домен”
Метод пересылки данных из формы обработчику. Допустимые значения: Method=post
Method=get
Если значение атрибута не задано, по умолчанию предполагается Method=get
Enctype
Указывает способ кодировки содержимого формы. По умолчанию Enctype=application/x-www-form-urlencoded
Enctype=”тип кодировки”
Tabindex
Определяет последовательность перехода курсора с поля на поле при помощи клавиши Tab. На элемент с атрибутом Tabindex=1 устанавливается курсор в момент открытия броузера.
Элемент предназначен для создания списка или меню. Элемент <option> - для создания пункта списка. Элемент может не входить в область формы, а использоваться самостоятельно.
Атрибуты
Описание
Пример задания значения
name
Имя объекта
multiple
Атрибут не имеет значений. Если он используется, то пользователю разрешается выбрать сразу несколько пунктов.
size
Определяет количество видимых на экране пунктов списка. Если данный атрибут не задан то список требуется раскрыть щелчком на кнопке со стрелкой, иначе он представляет собой прокручиваемые поля причем количество их ограничивается указанным в атрибуте числом.
Size=”число”
value
Атрибут необходим для обработки данных
Value=otvet_a
selected
Без значений. Определяет, какой из пунктов списка должен быть выбран по умолчанию.
<Option selected value=#>Навигация по сайту</Option>
<Option value=http://>Ваш текст - 1</Option>
<Option value=http://>Ваш текст - 2</Option>
<Option value=http://>Ваш текст - 3</Option>
<Option value=http://>Ваш текст - 4</Option>
</Select></Form>
</body></html>
Пример использование формы
<ISINDEX>
Элемент для ввода строки текста. Поле ввода созданное этим элементом непосредственно связано с определенным на текущей странице базовым URL. Атрибут href тега base – адрес некоторого поискового средства в интернете. Поле ввода можно дополнить строкой подсказки используя атрибут promt=”комментарий”.
Пример:
<base href=”http://www.название.домен/путь”>
<isindex promt=”Критерий поиска”>
<INPUT>
Позволяет создавать элементы управления: флажки, переключатели, поля ввода.
Атрибут
Описание
Type
Определяет вид элемента:
Type=”text” – создание поля ввода, в котором можно автоматически разместить произвольный текст, используя атрибут value;
Type=”password” – создание поля для ввода пароля, причем введенная информация отображается звездочками;
Type=”checkbox” – создание квадратного флажка. Использование аналогично radio;
Type=”radio” – определение одного переключателя. Для создание группы переключателей необходимо использовать несколько элементов input;
Type=”button” – создание кнопки произвольного назначения;
Type=”submit” – создание кнопки, щелчок на которой подтверждает ввод информации в форму;
Type=”reset” – кнопка для отмены ввода данных в форму;
Type=”image” – создание кнопки с рисунком. Для указания графического файла используется атрибут src;
Type=”file” – средство выбора файла для присоединения к форме. Пользователю предлагается записать имя файла в поле ввода. Броузер автоматически создает рядом с полем ввода кнопку “Обзор”, для запуска стандартного диалога;
Type=”hidden” – скрытый от пользователя элемент. Для включения в форму некоторой фиксированной информации, например, определение имени переменной и ее значения. Передается обработчику без изменений;
Name
Должен присутствовать во всех элементах input, кроме кнопок подтверждения и сброса.
Value
Значение атрибута задает значение по умолчанию для поля ввода или определяет надпись на кнопке.
Size
Задает длину поля ввода. Длина исчисляется символах, может быть заданна только приближенно (в зависимости от броузера). Длину поля требуется задавать с запасом.
maxlength
Может быть использован двумя способами: задавать максимальную длину строки, которая может быть записана в поле; может ограничивать размер файла, присоединенного к форме.
Readonly
Элемент становиться не доступен для редактирования.
Usemap
Атрибут может использоваться, если в форме создается карта.
Accept
Можно определить список допустимых данных: accept=”список типов данных”
accesskey
Определяет горячие клавиши для перехода к объекту: accesskey=”C”
Tabindex
Определяет последовательность перехода курсора с поля на поле при помощи клавиши Tab. На элемент с атрибутом Tabindex=1 устанавливается курсор в момент открытия броузера.
Пример
<html>
<body>
<form action=”gl_8.htm”>
<input type=submit value=”перейти к главе 8 ..”>
</form>
</body>
</html>
<LABEL></LABEL>
Является контейнером для других элементов формы. Например, может объединять надпись и поле ввода. Для каждого элемента <label> используется только один элемент формы.
Иногда элементы формы удобно располагать по ячейкам таблицы, в этом случае текст располагается в отдельной ячейке от элемента. Для связи используется атрибут for, значение которого должно совпадать со значением атрибута id связываемого элемента.
Пример:
<html><body><table border=1><form>
<tr><td><label for=”im”>Имя: </label>
<td><input type=”text” id=”im”>
</form></table></body></html>
<TEXTAREA></TEXTAREA>
Создается область для просмотра или ввода текста. Элемент имеет фиксированный размер, текст не вмещающийся в окно объекта разрешается прокручивать. Элемент может не входить в область формы, а использоваться самостоятельно.
Атрибут
Описание
Пример задания значения
name
Имя объекта.
<textarea name=text readonly rows=6 cols=50> текст </textarea>
rows
Высота окна в строках.
cols
Устанавливает ширину окна в символах.
readonly
Запрещает редактировать содержимое объекта.
Пример:
<html><body><textarea name=text rows=6 cols=50>
Область для ввода текста
</textarea></body></html>
<BUTTON></BUTTON>
Тег предназначен для создания кнопок. Является контейнером для текста и графики.
Атрибут
Описание
Пример задания значения
type
Может принимать следующие значения:
Type=button – вызывает запрограммированную разработчиком реакцию на щелчок;
Type=submit – подтверждает, что кнопка заполнена;
Type=reset – кнопка для очистки формы.
<Input type=radio name=”c” value=”Цвет фона”> Цвет фона
</fieldset>
</form>
С помощью элемента Fieldset несколько элементов объединяются. При просмотре страницы сгруппированные элементы заключены в рамку. Элемент Ligend позволяет создавать заголовок группы (рамки). Для выравнивания элементов используется атрибут align:
align=top – заголовок сверху; align=botton – заголовок внизу; align=left – заголовок вверху и слева; align=right – заголовок вверху и справа.
