Формы
В HTML, начиная с версии 2.0, появилась возможность создавать на странице такие элементы, которые предоставляют пользователям возможность вводить информацию. Такие элементы называются элементами форм. Формы позволяют добавлять на страницу поля для ввода текста, создавать списки для выбора и размещать на web страницах кнопки, что позволило создать в WWW поисковые машины и обращаться к их базам данных с запросами.
Для создания Форм в языке HTML используются следующие элементы:
- FORM - для создания формы внутри HTML документа.
- INPUT - для добавления элемента ввода.
- OPTION - для создания элементов внутри списков SELECT.
- SELECT - для создания списков выбора из ограниченного числа элементов.
- TEXTAREA - создаёт многострочное текстовое поле.
Элемент FORM
Форма на web странице создаётся при помощи элемента FORM. Открывающий и закрывающий теги этого элемента отделяют содержимое формы от других элементов страницы, а его атрибуты задают параметры для всей формы.
Атрибуты элемента FORM:
| Атрибут | Описание | Пример |
|---|---|---|
| name | Определяет имя формы, уникальное для данного документа. Используется, если в документе несколько форм | name="form1" |
| action | Обязательный параметр. Определяет URL, по которому будет отправлено содержимое формы. Это может быть адрес электронной почты, либо путь к сценарию на сервере, обслуживающему данную форму | action="index.php" |
| method | Определяет способ отправки содержимого формы. Возможные значения: get (по умолчанию) и post | method="post" |
| target | Определяет имя окна, в которое возвращается результат обработки отправленной формы. По умолчанию результат возвращается в то же окно, откуда был отправлен. Возможные значения: _self, _top, _blank (в новое окно) | target="_blank" |
Элемент INPUT
Практически любой элемент интерфейса формы можно создать с помощью элемента INPUT. Этот элемент является пустым, т.е. не имеет закрывающего тега. Он, как и другие элементы, имеет свои атрибуты:
| Атрибут | Описание | Пример |
|---|---|---|
| name | Определяет имя, используемое при передаче содержания данной формы на сервер | name="name1" |
| type | Определяет тип управляющего элемента ( по умолчанию значение "text"). text — создаёт элемент для ввода текста из одной строки. password — аналогичен значению text, но вводимый текст представляется таким образом, чтобы не отображать вводимые пользователем символы — например, в виде ряда звездочек. Этот управляющий элемент часто используется для ввода паролей. checkbox — создаёт флажок (множественный выбор). radio — создаёт переключатель, т.е. набор кнопок с зависимой фиксацией (выбрать можно только один вариант). submit — создаёт кнопку отправки содержимого формы. image — создаёт графическую кнопку отправки, причём значение атрибута src задаёт URL изображения, используемого для представления кнопки. reset — создаёт кнопку сброса полей формы. button — создаёт кнопку с произвольным действием, действие по умолчанию не определено. hidden — создаёт скрытый управляющий элемент. file — создаёт управляющий элемент "Выбор файла". Браузеры могут использовать значение атрибута value в качестве исходного имени файла | type="password" |
| value | Задаёт текстовый заголовок для полей любого типа, в том числе и кнопок. Для типов, имеющих значение типа Boolean (отмеченный или неотмеченный), таких как checkbox или radio, в программу-обработчик будет возвращено значение, заданное в атрибуте value | value="file1" |
| checked | Указывает, что элемент управления типа checkbox или radio является исходно выбранным | checked |
| disabled | Установка этого булевого атрибута запрещает пользователю редактировать содержимое поля ввода и даже помещать в него фокус ввода | disabled |
| readonly | Указывает, что поле ввода закрыто для редактирования, но пользователь может поместить в него фокус ввода и, например, выделить и скопировать его содержимое | readonly |
| size | Определяет размер поля в символах | size="25" |
| maxlength | Определяет максимальное количество символов, которое можно ввести в текстовом поле. Оно может быть больше количества символов, указанных в параметре size, в этом случае поле будет прокручиваться (scroll). По умолчанию количество символов не ограничено | maxlength="60" |
| src | Задаёт URL адрес картинки, используемой при создании графической кнопки отправки данных. Используется совместно с атрибутом type="image" | |
| align | Определяет способ вертикального выравнивания для изображений. Используется совместно с параметром type="image" | align="bottom" |
Пример
<FORM action="mail.php">
Выберите пример:
<INPUT type="checkbox" name="samp" value="Пример1" checked>Пример1<br>
<INPUT type="checkbox" name="samp" value="Пример2" >Пример2
</FORM>
Отображение примера в браузере
Пример
<FORM action="mail.php">
<INPUT type="text" name="text1" value="Любой текст" disabled size="20" maxlength="60">
</FORM>
Отображение примера в браузере
Многострочное текстовое поле - элемент TEXTAREA
Элемент TEXTAREA используется для создания многострочного текстового поля. Элемент TEXTAREA имеет следующие атрибуты:
| Атрибут | Описание | Пример |
|---|---|---|
| name | Обязательный параметр. Определяет название, которое будет использоваться при идентификации заполненного поля сервером | name="name1" |
| rows | Определяет количество строк текста, видимых на экране | rows="3" |
| cols | Определяет ширину текстового поля в печатных символах | cols="50" |
| wrap | Определяет способ переноса слов в данном поле. Возможные значения: off - перенос слов не происходит (значение по умолчанию). virtual (soft) - перенос слов только отображается, на сервер же поступает неделимая строка. physical (hard) - перенос слов будет происходить, и на сервер поступают строки, разделённые во всех точках переноса | wrap="virtual" |
| disabled | Установка этого булевого атрибута запрещает пользователю редактировать содержимое поля ввода и даже помещать в него фокус ввода | disabled |
| readonly | Указывает, что поле ввода закрыто для редактирования, но пользователь может поместить в него фокус ввода и, например, выделить и скопировать его содержимое | readonly |
Пример с элементом TEXTAREA
<TEXTAREA cols="50" rows="3" name="name1" wrap="virtual">
Введите текст сообщения
</TEXTAREA>
Отображение примера в браузере
Раскрывающиеся списки - элемент SELECT
Для того чтобы предоставить пользователю возможность выбора одного варианта из предложенного множества значений, можно создать такой элемент формы, как список. Элемент SELECT имеет следующие атрибуты:
| Атрибут | Описание | Пример |
|---|---|---|
| name | Определяет имя списка, уникальное для данной формы, которое будет использовано при передаче данных на сервер. | name="name1" |
| multiple | Разрешает выбор сразу нескольких элементов списка. По умолчанию можно выбрать только один элемент | multiple |
| size | Определяет количество видимых элементов в списке: 1 - простой раскрывающийся список. Если значение этого параметра больше единицы, то результатом будет список с полосой прокрутки | size="1" |
Пример элемента SELECT
<SELECT name="samp" size="1">
Код элементов списка
</SELECT>
Элемент OPTION
Элементы списка создаются с помощью элемента OPTION. Элемент OPTION имеет следующие атрибуты:
| Атрибут | Описание | Пример |
|---|---|---|
| selected | Определяет элемент списка, который будет изначально выбран при загрузке документа. Если список разрешает выбрать только один элемент, то атрибутом selected может быть помечен лишь один элемент списка | selected |
| value | Задаёт данному элементу списка значение, которое будет использовано наряду с другими сведениями о содержимом заполненной формы. | value="value1" |
Пример
<SELECT name="samp" size="1">
<OPTION value="samp1" selected>Пример1
<OPTION value="samp2">Пример2
<OPTION value="samp3">Пример3
</SELECT>
Отображение примера в браузере
| Элементы html: head, body, title, base, basefont, link, meta, style, a, abbr, acronym, address, area, b, bdo, bgsound, big, blockquote, br, button, caption, center , cite, code, col, colgroup, tr, td, dd, del , dfn, div, dl, dt, em |