Тема 2.

Формы

Все современные WWW-браузеры позволяют пользователю, заполнив специальную форму,

выполнять некоторые действия на вашем WWW-сервере. Когда форма интерпретируется WEB-
браузером, создается специальные экранные элементы GUI, такие, как поля ввода, кнопки
подтверждения (check-boxes), кнопки выбора альтернатив (radio-buttons), выпадающие меню,
скроллируемые списки, кнопки и т.д. Когда пользователь, заполнив форму, нажимает кнопку
"Подтверждение" (SUBMIT - специальный тип кнопки, который задается при описании
документа), информация, введеная пользователем в форму, посылается WWW-серверу для
обработки и передачи другим программам, работающим под сервером, в соответствии с CGI
(Common Gateway Interface) интерфейсом. С помощью языка написания сценариев JavaScript
(VBScript) можно проверить правильность заполнения формы до ее отправки серверу,
обработать нажатие других (отличных от SUBMIT) кнопок и многие другие события.

Тэг FORM
HTML-форма представляет собой раздел HTML-документа, содержащего элементы
управления: текстовые поля, флажки, кнопки с зависимой фиксацией, меню и т.д. Все формы
начинаются парным тэгом <FORM>. Кроме элементов форм внутри можно располагать любые
тексты и почти любые тэги HTML. Синтаксис тэга FORM:
<form action="URL">
...
</form>
Атрибуты:
указывает URL-адрес программы или документа, который обрабатывает
ACTION данные формы. Если ACTION не указан, то информация передается тому
же документу, в котором находится форма.
метод протокола HTTP - задает режим передачи данных из формы в
программу-обработчик.
METHOD При использовании метода GET (по умолчанию) информация из формы
добавляется в конец URL, который был указан в ACTION. Метод POST
метод передает всю информацию о форме немедленно после обращения к
указанному URL.
NAME имя формы
ID идентификатор
TITLE текст подсказки
Имя окна или фрейма, куда обработчик будет загружать возвращаемый
результат.
 _blank — загружает страницу в новое окно браузера
TARGET  _self — загружает страницу в текущее окно
 _parent — загружает страницу во фрейм-родитель
 _top — отменяет все фреймы и загружает страницу в полном окне
браузер
NOVALIDATE отменяет встроенную проверку данных формы на корректность ввода
способ кодирования данных формы. Всегда следует использовать
ENCTYPE значение по умолчанию (просто опускать этот параметр), кроме тех
случаев, когда нужно передать файл от клиента к серверу
STYLE Применяется для определения стиля элемента с помощью правил CSS
Определяет имя класса, которое позволяет связать тег со стилевым
CLASS
оформлением
1 Ст. преп. Косырева Л. А., 2020
 язык (ru, en, de, и т.д.)- для правильного отображения некоторых
LANG
национальных символов
Устанавливает порядок получения фокуса при переходе между
tabindex
элементами с помощью клавиши Tab
ONRESET обработчик события
ONSUBMIT обработчик события

Элементы управления
Пользователи взаимодействуют с формами с помощью управляющих элементов.

Элемент формы TEXTAREA

Тэг <TEXTAREA> используется для того, чтобы позволить пользователю вводить более одной
строки информации (свободный текст).
Синтаксис:
<textarea атрибуты>
Текст
</textarea>
Атрибуты:
ROWS Количество строк в поле (по умолчанию – 2)
COLS Ширина поля в символах (по умолчанию – 20)
NAME Имя поля
MAXLENGTH Максимальное число символов текста, которое можно ввести
Минимальное число знаков, которые необходимо ввести в текстовую
MINLENGTH область.
С помощью этого атрибута можно поместить текст в поле, являющийся
PLACEHOLDER параметром данного атрибута, который исчезнет, когда пользователь
начнет вводить символы
Указывает, что текстовое поле будет доступно только для чтения, т.е. текст
READONLY невозможно будет изменить, но будет возможность его скопировать
Не имеет параметров. Инициирует фокусирование на текстовое поле при
AUTOFOCUS загрузке страницы с формой.
DISABLED Блокирует доступ к текстовой области, которая окрашивается обычно в
серый цвет.
Связывает текстовое поле с формой в тех случаях, когда по тем или иным
FORM причинам оно расположено вне <form></form>.
REQUIRED Определяет, что поле обязательно для заполнения.
Устанавливает для браузера правила переноса строк в текстовой области:
 hard - переносы производятся автоматически, если текст будет иметь
ширину больше, чем ширина текстового поля. Этот параметр
используется только в связке с атрибутом cols.
WRAP
 soft - текст отправляется одной сплошной строкой. Если пользователь
осуществит перенос текста с помощью клавиши «Enter», то такой
перенос сохраняется. Является значением по умолчанию.
 off — отключение переносов строк.
Задает клавишу, которую нужно нажать совместно с Alt, чтобы сразу
ACCESSKEY попасть в это поле

2 Ст. преп. Косырева Л. А., 2020

 Обработчики события:
ONBLUR, ONCHANGE, ONFOCUS, ONKEYDOWN, ONKEYPRESS, ONKEYUP,
ONSELECT.
Остальные параметры аналогичны соответствующим параметрам тэга <FORM>.

Пример использования тэга <TEXTAREA>. Слева HTML-текст, а справа то, что получается.
<TEXTAREA NAME="addr" ROWS=6 COLS=32>
65000,Одесса,
ул. Дворянская 2,
Одесский национальный университет.
</TEXTAREA>

Заметим, что внутри этого тэга все переводы строк вызывают переводы строк и при выводе
на экран. Чтобы надежно избежать этого, следует писать:
<TEXTAREA NAME="addr" ROWS=6 COLS=32>
65000,
Одесса,
ул. Дворянская 2,
Одесский национальный университет.
</TEXTAREA>
Тэг </TEXTAREA> необходим даже тогда, когда поле ввода изначально пустое.

Элемент формы SELECT

Тэг <SELECT> используется для организации раскрывающегося (выпадающего) списка с
одним или множественным выбором. Синтаксис тэга:
<select>
<option>Пункт 1</option>
<option>Пункт 2</option>
</select>
Атрибуты:
устанавливает высоту выпадающего списка, то есть количество
SIZE отображаемых строк. Если присутствует атрибут multiple, а значение size
не указано, то по умолчанию отображается четыре строки.
атрибут, не имеющий параметров. Дает возможность множественного
MULTIPLE
выбора.
если указано, то пользователь не может выбирать несколько элементов
SINGLE списка одновременно. Если не указано ни SINGLE, ни MULTIPLE,
подразумевается SINGLE.
NAME Имя элемента.
DISABLED Блокирует доступ к списку.
Осуществляет связь списка с одной или несколькими формами, к которым он
принадлежит, но находится вне контейнера <form></form>. При этом в роли
значения атрибута form прописывается параметр глобального атрибута id,
FORM который добавлен к тегу form. Например:
<form action="formdata" method="post" id="data"></form>
<select name="list1" form="data"> ... </select>
<p> <input type="submit" value="Отправить" form="data">
SIZE Количество отображаемых строк списка.
3 Ст. преп. Косырева Л. А., 2020
 Определяет последовательность перехода между элементами при нажатии на
TABINDEX
клавишу Tab.
ACCESSKEY Позволяет перейти к списку с помощью некоторого сочетания клавиш.
AUTOFOCUS Устанавливает фокус на список сразу после загрузки страницы.
REQUIRED Список обязателен для выбора перед отправкой формы.
Обработчики события:
ONBLUR, ONCHANGE, ONFOCUS.

Один элемент списка задает тег <OPTION>. Текст, стоящий между <OPTION> и </OPTION>,
будет показан пользователю как значение данного элемента.
Атрибуты:
VALUE Значение, которое будет передано на сервер
Делает текущий пункт списка выделенным. Если у
SELECTED тега <select> добавлен атрибут multiple, то можно выделять более
одного пункта.
NAME Имя
DISABLED Устанавливает запрет на выбор данного элемента списка
Предназначен для указания метки пункта списка, сокращённой по
сравнению с текстом внутри <option>. Если атрибут label
LABEL
присутствует, то текст внутри тега <option> игнорируется и в списке
выводится значение label. Браузер Firefox не поддерживает этот атрибут
Если указан параметр SELECTED, то этот элемент будет изначально "выбран". Примеры
различных элементов SELECT.
<select multiple name=group SIZE=4>
<option> Intel Core i3 </option>
<option SELECTED> Intel Core i5 </option>
<option> Intel Core i7 </option>
<option> Pentium </option>
<option> Intel Celeron </option>
</select>

<select name=group SIZE=4>

<option> Intel Core i3 </option>
<option> Intel Core i5 </option>
<option> Intel Core i7 </option>
<option SELECTED> Pentium </option>
<option> Intel Celeron </option>
</select>

<select name=group>
<option> Intel Core i3 </option>
<option> Intel Core i5 </option>
<option> Intel Core i7 </option>
<option Intel Celeron </option>
</select>

4 Ст. преп. Косырева Л. А., 2020

 Группирование элементов списка

При достаточно обширном списке имеет смысл сгруппировать его элементы по блокам,
чтобы обеспечить наглядность списка и удобство работы с ним. Для этой цели применяется
тег <optgroup>. Он представляет собой контейнер, внутри которого располагаются
теги <option>, объединённые в одну группу. Особенностью тега <optgroup> является то,
что он не выделяется как обычный элемент списка, акцентируется с помощью жирного
начертания, а все элементы, входящие в этот контейнер, смещаются вправо от своего исходного
положения. Для добавления заголовка группы используется атрибут label, как показано в
примере:
<form>
<p><select name="food">
<optgroup label="Русская кухня">
<option value="r1">Закуска Барская</option>
<option value="r2">Раки, фаршированные по-царски</option>
<option value="r3">Биточки в горшочке</option>
</optgroup>
<optgroup label="Украинская кухня">
<option value="u1">Галушки славянские</option>
<option value="u2">Пампушки украинские</option>
<option value="u3">Жаркое по-харьковски</option>
</optgroup>
</select></p>
<p><input type="submit" value="Отправить"></p>
</form>

Элемент формы INPUT

Тэг <INPUT> используется для очень многих элементов формы. Что конкретно он собой
представляет, определяется его параметром TYPE.
Атрибуты:
Сообщает браузеру, к какому типу относится элемент формы:
TYPE button|checkbox|hidden|image|password|
radio|reset|submit|text|textarea|file
Задает размер видимого поля там, где это имеет смысл. Например, для
SIZE
полей типа TEXT, PASSWORD, FILE и т.п.
Максимальное количество символов разрешенных в тексте. При
превышении количества допустимых символов браузер реагирует на
попытку ввода нового символа звуковым сигналом и не дает его ввести. Не
MAXLENGTH
путать с атрибутом SIZE. Если MAXLENGTH больше чем SIZE, то в поле
осуществляется скроллинг. По умолчанию значение MAXLENGTH равно
бесконечности.
5 Ст. преп. Косырева Л. А., 2020
SRC Для типа IMAGE задает URL файла изображения
BORDER Для типа IMAGE задает размер бордюра вокруг изображения.
Для типов CHECKBOX и RADIO указывает, что данный элемент изначально
CHECKED
"включен".
Значение элемента. Обычно это текст на кнопке или изначальный текст в
VALUE
поле ввода.
absbottom|absmiddle|baseline|bottom|left|middle|right|textt
ALIGN op|top
для типа IMAGE полностью аналогично ALIGN в тэге <IMG ...>
ACCESSKEY Переход к элементу с помощью комбинации клавиш.
Определяет порядок перехода между элементами с помощью клавиши
TABINDEX
Tab.
DISABLED Блокирует доступ и изменение элемента.
NAME Имя поля.

Возможны следующие значения атрибута TYPE:

BUTTON - кнопка. Имеет смысл, только если обрабатывается ее

нажатие из программы сценария. Без программы сценария - вещь
бесполезная.

CHECKBOX - превращает поле ввода во флажок, который можно

включить и выключить. Checkbox

HIDDEN - Скрытое поле, которое не отображается, однако данные в Он где-то

обработчик передаются. здесь!

IMAGE - это не просто изображение. Оно работает как кнопка

SUBMIT, т.е., если навести на изображение мышь и нажать кнопку,
информация формы немедленно передается по адресу указанному в
ACTION. При этом передаются и координаты того места, где была
мышь.

PASSWORD - поле ввода пароля. Вводимые символы заменяются на Пароль

звездочки, маркеры, либо другие, установленные браузером значки.

RADIO - радио-кнопка (переключатель). Их обычно объединяют в

группы (группа - несколько кнопок с одним и тем же NAME). Во Intel 80386
включенном состоянии всегда находится только одна из кнопок
Intel 80486
группы.

RESET - кнопка сброса. Очищает форму. Сброс

SUBMIT - кнопка, при нажатии которой информация из формы Готов о

передается по адресу, указанному в ACTION для обработки.

TEXT - однострочное текстовое поле для ввода одной строки

текста.

6 Ст. преп. Косырева Л. А., 2020

 FILE - позволяет загружать файлы с компьютера пользователя.

В HTML5 появились новые типы input в формах:

NUMBER - предназначено для ввода целочисленных значений.

Его атрибуты min, max и step задают верхний, нижний
пределы и шаг между значениями соответственно. Эти
атрибуты предполагаются у всех элементов, имеющих
численные показатели. Их значения по умолчанию зависят от
типа элемента.

COLOR – управление палитрой цветов

DATE - ввод календарной даты в формате DD.MM.YYYY (день,

месяц и год).

EMAIL - поле для ввода адреса электронной почты

RANGE - ползунок для выбора чисел в указанном диапазоне.

Применяются следующие значения по умолчанию, если
соответствующие атрибуты не указаны:
min = "0"
max = "100"
value = min + (max - min)/2, или min, если max < min)
step = "1"

URL – поле, содержащее url адрес (автоматически

проверяется перед отправкой на сервер);

TEL – поле для ввода телефонного номера. С помощью

атрибута pattern можно установить формат принимаемого
телефонного номера, который задается с помощью регулярных
выражений;

SEARCH – поле поиска (может использоваться, например, для

создания поиска по сайту);

Пример. Создадим форму, в которой будут присутствовать все перечисленные в выше

приведенной таблице элементы.
<FORM>
<INPUT TYPE="BUTTON" VALUE="Бесполезная кнопка">
<input type="color" name="colors" color=red><P>
<INPUT TYPE="CHECKBOX"><P>
<INPUT TYPE="HIDDEN"><P>
<INPUT BORDER=0 TYPE="IMAGE" SRC="images/www.gif"><P>
<INPUT TYPE="PASSWORD"><P>
Intel 80386 <INPUT CHECKED TYPE="RADIO" NAME="g1"><P>
7 Ст. преп. Косырева Л. А., 2020
 Intel 80486 <INPUT TYPE="RADIO" NAME="g1"><P>
<INPUT TYPE="RESET" VALUE="Сброс"><P>
<INPUT TYPE="SUBMIT" VALUE="Готово"><P>
<INPUT TYPE="TEXT"><P>
<INPUT TYPE="FILE" SIZE=16>
Quantity (between 1 and 5):
<input type="number" name="quantity" value=1 min="1" max="5"><P>
</FORM>

В HTML5 появились и новые элементы в формах:

datalist позволяет привязать список к полям формы. Значения списка будут выводиться
как поисковые подсказки во время ввода информации в поле, связанное с ним;
keygen позволяет генерировать открытые и закрытые ключи, которые используются для
безопасной связи с сервером;
output может использоваться для вывода различной информации. С помощью атрибута for
можно указать связанные поля.
Новые атрибуты в HTML5 формах:
autofocus делает поле активным после загрузки страницы (может использоваться со всеми
типами input);
form указывает форму, которой принадлежит данное поле (может использоваться со всеми
типами input);
multiple указывает, что данное поле может принимать несколько значений одновременно
(может использоваться с input типов email и file);
novalidate указывает, что данное поле не должно проверяться перед отправкой (может
использоваться с form и input);
placeholder отображает текст-подсказку в поле (может использоваться с input следующих
типов: text, search, url, tel, email и password);
required указывает, что данное поле должно быть обязательно заполнено перед отправкой.
Семантические тэги
В HTML5 введены семантические тэги, с помощью которых можно сделать страницы сайтов
более понятными для поисковых систем и браузеров:
<footer> – футер;

8 Ст. преп. Косырева Л. А., 2020

 <header> – заголовочный блок сайта;
<nav> – навигационное меню.
Тэг <section> позволяет группировать логически связанное содержимое в документе,
тэг <mark> – выделить (подсветить) важную часть в тексте.
В HTML5 можно создавать подписи для иллюстраций с помощью тэгов: <figure> и
<figcaption>.
В HTML5 помимо date были добавлены новые элементы ввода, позволяющие удобно
выбирать дату и время:
time – время;
datetime – дата в формате год-месяц-день_месяца-время (отсчет ведется по глобальному
времени);
datetime-local – дата в формате год-месяц-день_месяца-время (отсчет ведется по
местному времени);
month – дата в формате год-месяц;
week – дата в формате год-неделя.

9 Ст. преп. Косырева Л. А., 2020