ЛЕКЦИЯ

Тема: «Работа с формами в HTML»

План лекции

1. Создание формы. Атрибуты формы.

2. Группировка элементов формы

3. Создание полей формы

3.1.Текстовое поле

3.2.Ввод пароля

3.3.Радио-кнопка

3.4.Флажок

3.5.Кнопка

3.6.Поле для выбора файла

4. Выпадающий список

5. Текстовая область

6. Дополнительные атрибуты

1. Создание формы. Атрибуты формы.

Форма – это инструмент, с помощью которого HTML-документ может посылать некоторую информацию в определенную точку сети, где эта информация будет обработана. Программы, которые обрабатывают данные, переданные формами называют скриптами.

Форма начинается и заканчивается парой дескрипторов <form> и </form>. На одной web-странице может находиться несколько форм (соответственно, несколько разделов, обрамленных дескрипторами <form> и </form>). Но формы не должны находиться одна в другой.

У тега <form> есть несколько атрибутов, которые желательно заполнять.

Пример:

<form name = "form1" action = "script/request.php" method = "post"> … </form>

ACTION – обязательный атрибут. Определяет, где находится обработчик формы - скрипт. Причем, если HTML-форма и скрипт находятся на разных серверах, то следует указать полный URL-путь к последнему.

В качестве обработчика можно указать адрес электронной почты, начиная его с ключевого слова mailto:. При отправке формы будет запущена почтовая программа установленная по умолчанию. В целях безопасности в браузере установлено, что отправить незаметно информацию, введенную в форме, по почте невозможно. Для корректной интерпретации данных используйте атрибут enctype="text/plain" в теге <form>.

<form action="mailto:vlad@htmlbook.ru" enctype="text/plain">

<p><input type="submit" value="Написать письмо"></p>

</form>

ENCTYPE – определяет, каким образом будут закодированы данные для передачи к обработчику.

Возможные значения:

"text/plain" — указывает Web-браузеру, что результаты формы должны передаваться в виде обычного текста.

"application/x-www-form-urlencoded" — используется, если форма содержит текстовые данные. Используется по умолчанию. Указывает на то, что передаваемые данные представляют список URL-кодированных переменных формы. Символы пробела (ASCII 32) будут закодированы как +, а специальный символ, например, такой как ! будет закодирован шестнадцатеричной форме как %21

"multipart/form-data" — используется, если форма содержит файлы (например, <input type="file"/> ) или двоичные данные.

NAME – название формы. Как правило, этот параметр не указывается, но пригодится в случае определения нескольких форм на web-странице или тогда, когда это требуется для выполнения скриптом тех или иных действий.

METHOD – определяет, каким образом (с помощью какого метода протокола передачи гипертекста) данные формы будут переданы к обработчику. Допустимые значения method=post и method=get. Если значение атрибута не установлено, то по умолчанию принимается method=get.

Метод get передает данные на сервер через адресную строку браузера. При формировании запроса к серверу все переменные и их значения формируют последовательность вида www.anysite.ru/form.php?var1=1&var2=2. Имена и значения переменных присоединяются к адресу сервера после знака ? и разделяются между собой знаком &. Все специальные символы и буквы, отличные от латинских, кодируются в формате %nn, пробел заменяется на +. Этот метод нужно использовать, если вы не передаете больших объемов информации. Если вместе с формой предполагается отправка какого-либо файла, этот метод не подойдет.

Метод post применяется для пересылки данных больших объемов, а также конфиденциальной информации и паролей. Данные, отправляемые с помощью этого метода, не видны в заголовке URL, так как они содержатся в теле сообщения.

<form action="action.php" enctype="multipart/form-data" method="post"></form>

Итак, метод POST является скрытой отправкой данных, а GET - открытой.

а) http://mysite.ru/script/request.php

б) http://mysite.ru/script/request.php?a=7&b=Michael

В первом случае, пользователь не видит, что отправляет (метод "post"), а во втором он видит (в строке заголовка браузера) имена переменных и их значения (метод "get").

2. Группировка элементов формы

Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты.

Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. Название группы проявляется слева в верхней границе <fieldset>. Например, если в элементе <fieldset> хранится контактная информация:

АТРИБУТЫ ТЕГА <FIELDSET>
Атрибут	Значение / описание
disabled	Если атрибут присутствует, то группа связанных элементов формы, находящихся внутри контейнера <fieldset>, отключены для заполнения и редактирования. Используется для ограничения доступа к некоторым полям формы, содержащих ранее введенные данные. Атрибут используется без указания значения — <fieldset disabled>.
name	Определяет имя, которое будет использоваться для ссылки на элементы в JavaScript, или для ссылки на данные формы после заполнения и отправки формы. Является аналогом атрибута id.

3. Создание полей формы

Форма состоит из одного или нескольких элементов управления – элементов интерфейса, которые позволяют пользователю взаимодействовать с HTML-документами.

Тег, связанный с элементами управления, - INPUT. Тег <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно.

Рассмотрим разновидности элементов управления INPUT. Они определяются значением атрибута TYPE.

Описание значений атрибута TYPE тега INPUT.

Значение атрибута TYPE	Описание
TEXT	Создает однострочное текстовое поле в форме для ввода текста.
PASSWORD	Создает текстовое поле в форме, при этом вводимые пользователем символы заменяются на звездочки, маркеры, либо другие, установленные браузером значки.
CHECKBOX	Отображает на форме флажок
RADIO	Отображает на форме переключатель
FILE	Применяется для загрузки файла. Визуальный эффект – поле ввода текста и кнопка с надписью
button	Создает кнопку
SUBMIT	Создает стандартную кнопку, активизируемую щелчком мыши. Кнопка собирает информацию с формы и отправляет ее для обработки.
RESET	Кнопка для очистки формы
IMAGE	Создает кнопку, позволяя вместо текста на кнопке вставить изображение
color	Генерирует палитры цветов в поддерживающих браузерах, давая пользователям возможность выбирать значения цветов в шестнадцатеричном формате.
date	Позволяет вводить дату в формате дд.мм.гггг.
datetime-local	Позволяет вводить дату и время, разделенные прописной английской буквой Т по шаблону дд.мм.гггг чч:мм.
month	Позволяет пользователю вводить год и номер месяца по шаблону гггг-мм.
time	Позволяет вводить время в 24-часовом формате по шаблону чч:мм. В поддерживающих браузерах оно отображается как элемент управления в виде числового поля ввода со значением, изменяемым с помощью мыши, и допускает ввод только значений времени.
week	Соответствующий инструмент-указатель позволяет пользователю выбрать одну неделю в году, после чего обеспечит ввод данных в формате нн-гггг. В зависимости от года число недель может быть 52 или 53.
number	Предназначено для ввода целочисленных значений. Его атрибуты min, max и step задают верхний, нижний пределы и шаг между значениями соответственно. Эти атрибуты предполагаются у всех элементов, имеющих численные показатели. Их значения по умолчанию зависят от типа элемента.
email	Браузеры, поддерживающие данный атрибут, будут ожидать, что пользователь введет данные, соответствующие синтаксису адресов электронной почты.
range	Позволяет создать такой элемент интерфейса, как ползунок, min / max —устанавливают диапазон выбора
search	Обозначает поле поиска, по умолчанию поле ввода имеет прямоугольную форму.

3.1. Текстовое поле

Добавляется текстовое поле через тег <input> с атрибутом type="text".

Пример:

<INPUT>

TYPE="text" NAME="var-name"

VALUE="текст по умолчанию"

SIZE="размер"

MAXLENGTH="максимальная длина">

Рассмотрим атрибуты:

1) Атрибут TYPE отвечает за тип элемента ввода. В данном случае, указали, что это обычное текстовое поле. В других элементах будем менять значение этого атрибута.

2) Атрибут NAME отвечает за имя переменной, в которой система будет сохранять полученное значение. Имя не должно содержать пробелы.

3) Атрибут VALUE отвечает за значение этого поля по умолчанию.

4) Атрибут SIZE определяет ширину однострочного поля (в символах) в HTML-форме. Этот атрибут работает вместе с атрибутом MAXLENGTH, который определяет количество символов, которое вводится пользователем. Если значение MAXLENGTH больше, чем SIZE, и если пользователь введет больше символов, чем определено в SIZE, то текст будет прокручиваться по горизонтали.

Пример формы со строкой ввода:

<html>

<head><title>Пример текстового поля</title></head>

<body>

<form name = "form1" action = "script/request.php" method = "post">

Введите ваши данные:

<input type="text"

name="username"

value="Иванов И.И."

size="25" maxlength="45">

</form>

</body>

</html>

Результат в браузере:

3.2. Ввод пароля

Стандартное определение строки ввода пароля имеет такой вид:

<INPUT>

TYPE="password" NAME="var-name"

VALUE="текст по умолчанию"

SIZE="размер"

MAXLENGTH="максимальная длина">

Пример.

Ваш пароль:

<input type = "password" name = "pass" value = "Ваш пароль">

3.3. Радио-кнопка

Создаются радио-кнопки с помощью тега <input> с атрибутом type = "radio".

Пример:

<html>

<head><title>Пример радио-кнопок</title></head>

<body>

<form name="form1" action="script/request.php" method="post">

Выберите цвет:

<p>

<input type="radio" name="radio1" value="red" checked>Красный

<input type="radio" name="radio1" value="gre">Зеленый

<input type="radio" name="radio1" value="blu">Синий

</form>

</body>

</html>

Результат в браузере:

Элементы, которые имеют одинаковые значения атрибута "name", объединяются в группу. Если НЕ сделать одинаковыми имена у этих трёх радио-кнопок, то они станут независимыми, а, следовательно, можно будет выбрать сразу несколько вариантов. Поэтому одна группа радиокнопок должна иметь одно и то же значение атрибута "name".

Атрибут "value" означает значение переменной.

Атрибут "checked" указывают для одной из кнопок, чтобы сделать ее отмеченной по умолчанию.

Сразу после описания тега <input> идёт текст, который увидит пользователь рядом с соответствующей радио-кнопкой.

3.4. Флажок

Создается группа флажков с помощью тега <input> с атрибутом type = "checkbox".

Пример:

<html>

<head><title>Пример группы флажков</title></head>

<body>

<form name = "form1" action = "script/request.php" method = "post">

Выберите ваши любимые цветы:

<p>

<input type="checkbox" name="flowers" value="flow1">Гладиолус<br>

<input type="checkbox" name="flowers" value="flow2">Роза<br>

<input type="checkbox" name="flowers" value="flow3">Гвоздика<br>

</form>

</body>

</html>

Результат в браузере:

3.5. Кнопка

Существует четыре вида кнопок:

submit - кнопка отправки содержимого формы web-серверу. Ее параметры:

type="submit" - тип кнопки,

name - имя кнопки,

value - надпись на кнопке.

image - графическая кнопка отправки содержимого формы web-серверу. Для ее использования необходимо подготовить картинку кнопки, а потом использовать ее в виде кнопки. Ее параметры:

type="image" - тип графической кнопки,

name - имя кнопки,

src - адрес картинки для кнопки.

reset - кнопка, позволяющая восстановить все значения по умолчанию в форме. Ее параметры:

type="reset" - тип кнопки очищения,

name - имя кнопки,

value - надпись на кнопке.

button - произвольная кнопка, ее действия назначаются вами, т.е. сама она делать ничего не умеет. Ее параметры:

type="button" - тип произвольной кнопки,

name - имя кнопки,

value - надпись на кнопке.

onclick - указывает, что делать при щелчке по кнопке. Вообще, у этого типа кнопок есть и другие события (например, двойной щелчок), но здесь мы не будем их рассматривать.

Если на форме несколько кнопок, то они должны иметь разные названия.

Пример кода:

<form name="forma1">

<input type="submit" name="submit" value="Отправить">

<input type="image" name="but_img" src="but.gif">

<input type="reset" name="reset" value="Очистить">

<input type="button" name="button" value="Отправить">

</form>

Результат:

Кнопки можно задавать и по другому, при помощи тегов <button> </button>. Возможности у таких кнопок несколько шире, они могут иметь содержимое в виде текста или картинки. Этот тег имеет следующие параметры:

type - тип кнопки, может принимать значения:

reset - кнопка очистки формы,

submit - кнопка отправки данных,

button - кнопка произвольного действия.

name - имя кнопки,

value - надпись на кнопке.

Пример кода:

<form name="forma1">

<button name="submit" type="submit">

<img src="mail.gif" align="absmiddle">

<font size="4"> Отправить </font>

</button>

</form>

Результат:

3.6. Поле для выбора файла

Поле для ввода имени файла, сопровождаемое кнопкой Browse (Обзор), при щелчке по которой открывается окно просмотра дерева папок компьютера, где можно выбрать нужный файл. Выбранный файл присоединяется к содержимому формы при отправке на сервер.

Пример:

<html>

<head><title>Пример поля для выбора файла</title></head>

<body>

<form name = "form1" action = "script/request.php" method = "post">

Выберите файл для загрузки:

<p>

<input type = "file" name = "browse">

</form>

</body>

</html>

Результат в браузере:

4. Выпадающий список

Списки бывают с возможностью выбора одного элемента и с множественным выбором. Задются и те, и другие с помощью тегов <select> </select>, внутри которых располагаются элементы значений, заданных тегом <option>. Рассмотрим параметры этих тегов:

<select>:

name - имя списка. Каждый выбранный элемент списка при передаче на сервер будет иметь вид: name.value, где значение (value) берется из тега option.

size - определяет количество видимых элементов в списке: 1 - простой раскрывающийся список, больше 1 - список с полосой прокрутки.

multiple - разрешает выбор нескольких элементов списка.

<option>:

selected - им помечают наиболее вероятный для выбора элемент списка, если список со множественным выбором, то можно пометить несколько пунктов.

value - значение, которое будет отправлено серверу, если пункт выбран.

Пример:

<form name="form1">

Какой язык вы хотите изучать:

<select name="language" size="1">

<option selected value="html">html

<option value="php">php

<option value="java">java

</select><br><br>

Какое время вы готовы на это потратить:<br>

<select name="time" size="3">

<option selected value="1">1 месяц

<option value="2">2 месяца

<option value="3">3 месяца

</select><br><br>

Какие дни недели для занятий вас устроят:<br>

(выбирайте с нажатой клавишей ctrl)<br>

<select name="day" size="7" multiple>

<option selected value="mon">понедельник

<option value="tue">вторник

<option value="wen">среда

<option selected value="thu">четверг

<option value="fri">пятница

<option value="sat">суббота

<option value="san">воскресенье

</select>

</form>

Результат:

Существуют еще теги <optgroup> </optgroup>, позволяющие группировать элементы списка по каким-либо признакам. Например, мы хотим задать каталог сайтов в виде списка, тогда удобнее разбить его на группы по интересам:

Для этого нам и нужны теги <optgroup> </optgroup> с одним параметром label, который и задает название группе элементов.

Пример кода:

<form name="form1">

Каталог сайтов:<br>

<select name="catalog" size="9">

<optgroup label="Компьютеры">

<option value="1">интернет</option>

<option value="2">мобильники</option>

<option value="3">hardware</option>

</optgroup>

<optgroup label="Работа">

<option value="4">вакансии</option>

<option value="5">трудоустройство</option>

<option value="6">резюме</option>

</optgroup>

<optgroup label="Дом">

<option value="7">здоровье</option>

<option value="8">красота</option>

<option value="9">дети</option>

</optgroup>

</select>

</form>

Обратите внимание, в данном случае необходимо указывать закрывающие теги </option>.

5. Элемент текстовая область

Для объемных текстов, например для почтовых сообщений, удобно использовать именно этот элемент. Он создается тегами <textarea> </textarea> и имеет следующие параметры:

name - имя поля,

cols - ширина поля в символах,

rows - количество строк текста, видимых на экране,

wrap - способ переноса слов:

off - переноса не происходит,

virtual - перенос отображается, но на сервер поступает неделимая строка,

physical - перенос и на экране и при поступлении на сервер.

disabled - неактивное поле,

readonly - разрешено только чтение.

Пример:

Напишите сообщение: <br>

<textarea name = "message" rows = "10" cols = "15">Сообщение</textarea>

Здесь создается текстовая область высотой в 10 строк (значение атрибута "rows") и шириной в 15 символов (значение атрибута "cols").

6. Дополнительные атрибуты

1) accept

Определяет тип файлов, разрешенных для отправки на сервер.

Указывается только для <input type="file">.

Возможные значения:

file_extension — разрешает загрузку файлов с указанным расширением, например, accept=".gif", accept=".pdf", accept=".doc"

audio/* — разрешает загрузку аудиофайлов

video/* — разрешает загрузку видеофайлов

image/* — разрешает загрузку изображений

media_type — указывает на медиа-тип загружаемых файлов.

2) disabled - Блокирует доступ и изменение поля формы. Оно в таком случае отображается серым и недоступным для активации пользователем.

3) form - Связывает поле с формой по её идентификатору.

4) readonly - Устанавливает, что поле не может изменяться пользователем.

5) required - Устанавливает поле формы обязательным для заполнения перед отправкой формы на сервер. Если обязательное поле пустое, браузер выведет сообщение, а форма отправлена не будет. Вид и содержание сообщения зависит от браузера и меняться пользователем не может. Значения этот атрибут не имеет.

6) placeholder - Выводит текст внутри поля формы, который исчезает при получении фокуса.

<input  type="text" name="user" placeholder="Введите текст">

7) autofocus - Позволяет сделать так, чтобы в загружаемой форме то или иное поле ввода уже имело фокус (было выбрано), являясь готовым к вводу значения.

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. Что такое форма? Скрипт?

2. Назовите тег для создания формы и поясните назначение атрибутов формы.

3. Перечислите, какие элементы управления можно создавать с помощью тега <input>?

4. Как создается текстовое поле? Поле для ввода пароля?

5. С помощью каких атрибутов тега <input> создается радио-кнопка?

6. С помощью каких атрибутов тега <input> создается флажок?

7. Какие виды кнопок можно создать и как?

8. С помощью каких атрибутов тега <input> создается поле для выбора файла? Поясните значение атрибута accept.

9. Как создать выпадающий список?

10. Как создать текстовую область?

11. Что означают теги disabled, readonly, required, placeholder?