ссылка скрыта
Вид материалаЛабораторная работа

Содержание


3.2. Модуль Basic Forms
3.2.4. Кнопки (type="button")
3.2.5. Переключатели (type="checkbox") и радиокнопки (type="radio")
3.2.6. Текстовые поля (type="text") и пароли (type="password")
3.2.7. Передача файлов на Web-сервер (type="file")
3.2.8. Скрытое текстовое поле (type="hidden")
3.2.9. Кнопка сброса (type="reset")
3.2.10. Кнопка пересылки данных (type="submit")
3.2.11. Графическая кнопка пересылки данных (type="image")
3.2.12. Дескрипторы и
Enter). Для пересылки на сервер каждая введенная строка дополняется символами "%0
Подобный материал:
1   2   3

3.2. Модуль Basic Forms


Формы HTML первоначально были предназначены для пересылки данных от удаленного пользо­вателя к Web-серверу. С их помощью можно организовать простейший диа­лог между пользователем и сервером, например, регистрацию пользователя на сервере или выбор нужного документа из представленного списка. Однако с появлением языков сценариев формы все чаще стали использовать и для локальной обработки информации (в Web-браузере).

В состав модуля Basic Forms входят основные дескрипторы HTML, связанные с обработкой форм: <form>, <input>, <label>, <option>, <select> и <textarea>.

3.2.1. Дескриптор


В документе HTML для задания формы используется контейнер <form>...form>. Документ может со­держать несколько форм, но они не могут быть вложены одна в другую. Помимо общих атрибутов class, dir, id, lang, style и title, для дескриптора <form> можно задавать атрибуты, приведенные в табл. 1.4.11.


Табл. 1.4.11. Атрибуты дескриптора в HTML

Имя атрибута
Что определяет

Значение по умолчанию

Поддержка

accept
Список разделённых запятыми типов содержимого, которые сервер-обработчик формы будет обрабатывать корректно.

нет
HTML 4.01,

XHTML


accept-charset
Список кодировок для вводимых данных, принимаемых сервером, обрабатывающим данную форму.
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

accesskey
«Горячую» клавишу для данной формы.
нет
Internet Explorer

action

Адрес ресурса, содержащего обработчик формы.

нет
HTML 4.01,

Internet Explorer,

Netscape Navigator

autocomplete
Задание или отмену возможности автоматического заполнения форм и полей ввода текста.
зависит от настроек пользователя

Internet Explorer

contenteditable
Задание или отмену возможности редактирования содержимого формы пользователем
inherit
Internet Explorer

enctype
Метод кодирования данных, отправляемых формой в виде MIME-типа.
application/x-www-form-urlencoded
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

method
Метод HTTP, используемый для отправки данных формы.

get
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

name
Имя формы.
нет
HTML 4.01,

Internet Explorer,

Netscape Navigator

tabindex
Номер в последовательности обхода форм при нажатии клавиши Tab.
нет
Internet Explorer

target
Имя фрейма, в который будут выводиться результаты обработки формы.
нет
HTML 4.01,

Internet Explorer,

Netscape Navigator


Значением атрибута action является URL-адрес программы, которая будет обрабатывать инфор­мацию, извлеченную из данной формы. В значении атрибута могут быть также заданы параметры вызова программы, например:

action="http://localhost/hello.asp?login=ivanov&pass=stud1"

Атрибут method определяет метод пересылки данных, содержащихся в форме, от Web-браузера к Web-серверу. Он может принимать два значения: get (по умолчанию) и post.

Значением атрибута enctype является MIME-тип, определяющий формат кодирования данных при передаче их от Web-браузера к серверу (Web-браузер кодирует данные, чтобы исключить их искажение в процессе передачи).

Для пересылки форм используются два метода кодирования информации, содержащейся в форме:

Если обработка данных формы производится в Web-браузере (с помощью сценария), параметры action, method и enctype задавать не надо.

Второй метод нужен только в том случае, если к содержимому формы присоединяется локальный файл, выбранный при помощи элемента формы <input type="file">. В остальных случаях следует использовать метод коди­рования по умолчанию.

Атрибуты accept и accept-charset задают списки соответственно MIME-типов и кодировок данных, которые должен воспринимать Web-сервер, чтобы обработать данные формы.

Допустимыми значениями атрибута autocomplete являются on (автоматическое заполнение форм включено) или off (автоматическое заполнение форм выключено).

Для атрибута contenteditable допустимыми являются следующие значения:

Атрибут name обычно используется в Web-страницах для доступа к форме и ее элементам.

Атрибут target позволяет вывести результаты обработки формы в другой фрейм (по умолчанию результаты обработки выводятся в тот же фрейм, в котором находится форма).

Атрибуты accesskey и tabindex выполняют свои обычные функции, но по отношению к формам.

Для создания полей средствами языка HTML существуют специальные дескрипторы: <label>, <input>, <select> и <textarea>. Эти дескрипторы употребляются только внутри дескриптора <form>.

3.2.2. Дескриптор


Контейнер <label>…label> задает сопроводительную надпись для элемента формы. Обязательным атрибутом дескриптора <label> является атрибут for, значением которого является значение атрибута name или id того элемента формы, для которого задается сопроводительная надпись.

Кроме этого атрибута, для дескриптора <label> можно задавать общие атрибуты class, dir, id, lang, style и title, а также атрибут accesskey, задающий «горячую» клавишу для доступа к сопроводительной надписи.

Пример задания дескриптора <label>:

<label for="field1">

3.3.3. Дескриптор


Одиночный дескриптор <input> определяет тип элемента формы и его параметры. Помимо общих атрибутов class, dir, id, lang, style и title, для дескриптора <input> можно задавать атрибуты, приведенные в табл. 1.4.12.


Табл. 1.4.12. Атрибуты дескриптора в HTML

Имя атрибута
Что определяет

Значение по умолчанию

Поддержка

accept
Список разделённых запятыми типов содержимого, которые сервер-обработчик формы будет обрабатывать корректно.

нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator


accesskey
«Горячую» клавишу для данного элемента формы.
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

align

Выравнивание элемента формы (если элементом формы является изображение).

left
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

alt
Альтернативный текст (если элементом формы является изображение).
нет

HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

checked

Задание включения переключателя или радиокнопки (атрибут задается по имени, без значения).
переключатель или радиокнопка выключены
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

contenteditable
Задание или отмену возможности редактирования содержимого элемента формы пользователем.
inherit
Internet Explorer

disabled
Отключает управление элемента формы (атрибут задается по имени, без значения).
управление элемента формы включено
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

ismap
Элемент формы является серверной картой-изображением
нет
HTML 4.01,

XHTML

maxlength
Максимальное количество символов, которые пользователь может ввести в элемент формы.

не ограничено
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

name
Имя элемента формы.
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

readonly
Доступность элемента только для чтения (атрибут задается по имени, без значения).
элемент формы можно модифицировать
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

size
Начальная ширина поля (в пикселях или символах).
зависит от Web-браузера
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

src
Адрес ресурса (если элементом формы является изображение).
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

tabindex
Номер в последовательности обхода элементов при нажатии клавиши Tab.
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

type
Тип элемента формы.
text
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

usemap
Определение внутренней ссылки на имя карты ссылок (атрибут name в дескрипторе <map>) (если элементом формы является изображение).
нет
HTML 4.01,

Internet Explorer,

Netscape Navigator

value
Начальное значение элемента формы.
зависит от элемента формы
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator


Для атрибута contenteditable в дескрипторе <input> определены те же значения, что и для аналогичного атрибута дескриптора <form>.

Тип элемента формы задает атрибут type, который может иметь значения, приведенные в табл. 1.4.13.


Табл. 1.4.13. Допустимые значения атрибута type дескриптора в HTML

Значение


Что задает


Дополнительные атрибуты (кроме общих атрибутов, а также атрибутов accesskey, disabled, readonly и tabindex)

button
Кнопку.
name, value

checkbox
Переключатель.
name, value, checked

file
Запрос для передачи файла на Web-сервер.
name

hidden
Скрытое поле.
name, value

image
Элемент в виде графического изображения, действующий ана­логично кнопке submit
name, src, align, usemap или ismap

radio
Радиокнопку (кнопку с альтернативным выбором)
name, value, checked

reset
Кнопку сброса введенных значений и установления значений по умолчанию.
name, value

password
Текстовое поле для ввода пароля.
name, maxlength, size

submit
Кнопку передачи данных формы на Web-сервер.
name, value

text
Однострочное текстовое поле (значение по умолчанию).
name, maxlength, size



3.2.4. Кнопки (type="button")


Дескриптор <input> со значением type="button" задает кнопку с идентификатором, задаваемым значением атрибута name или id. Надпись на кнопке задается с помощью атрибута value.

Пример задания кнопки:


3.2.5. Переключатели (type="checkbox") и радиокнопки (type="radio")


Дескриптор <input> со значением type="checkbox" или type="radio" задает переключатель или радиокнопку с двумя состояниями (включен/выключен) и с идентификатором, задаваемым значением атрибута name или id. Переключатели и радиокнопки можно объединить в группу, присвоив им одинаковые значения в атрибуте name. Различие между переключателями и радиокнопками заключается в том, что для группы переключателей можно задать включенными несколько элементов, а для радиокнопок – только один (поэтому радиокнопки называют также альтернативными переключателями). По умолчанию переключатель и радиокнопка первоначально находятся в выключенном состоянии. Для того, чтобы задать первоначальное состояние элемента как включенное, используется атрибут checked (если для радиокнопок несколько элементов имеют атрибут checked, то включенным окажется последний элемент). Значение атрибута value для переключателей и радиокнопок должно задавать уникальное значение для каждого переключателя или радиокнопки (именно по значению этого атрибута выполняется анализ состояния данного переключателя или радиокнопки).

Пример задания переключателей:

<label for="russian">Русский язык:label>



value="ru" checked />

Английский язык:



value="en" />


Пример задания радиокнопок:

Мужской



Женский



3.2.6. Текстовые поля (type="text") и пароли (type="password")


Дескриптор <input> со значением type="text" (или без атрибута type) задает текстовое поле для ввода строки текста с идентификатором, задаваемым значением атрибута name или id. Атрибут maxlength задает максимальное количество символов, разрешенных в текстовом поле, а атрибут size – максимальное количество отображаемых в поле символов. Атрибут value позволяет задать начальное значение текстового поля, которое можно модифицировать, если не заданы атрибуты disabled и/или readonly (по умолчанию в текстовом поле ничего не выводится).

Дескриптор <input> со значением type="password" также создает элемент ввода строки текста, отличающийся от предыдущего поля только тем, что все вводимые символы представляются в виде символа "*".

Пример задания текстового поля:

<label for="username">Введите свою фамилию:label>

/>

Пример задания текстового пароля:

<label for="pass">Введите пароль:label>



3.2.7. Передача файлов на Web-сервер (type="file")


Дескриптор <input> со значением type="file" создает поле для ввода имени локального файла, сопровождаемое кноп­кой Browse (Просмотр). Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно или, воспользовавшись кнопкой Browse, выбрать его из диалогового окна, отображающего список локальных файлов. Для корректной передачи присоединенного файла следует установить значения атрибутов формы в виде enctype="multipart/form-data" и method="post". В противном случае будет передана введенная строка, то есть путь к файлу, а не его содержимое. Единственным дополнительным атрибутом является атрибут name, задающий имя элемента.

Пример задания передачи файла:

Задайте имя файла:


3.2.8. Скрытое текстовое поле (type="hidden")


Дескриптор <input> со значением type="hidden" создает скрытый элемент, не отображаемый пользователю с идентификатором, задаваемым значением атрибута name или id. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер. Скрытое поле можно использовать, например, в следующем случае. Пользователь заполняет форму и отправляет ее серверу. Сервер посылает пользователю для за­полнения вторую форму, которая частично использует информацию, со­держащуюся в первой форме. Сервер не хранит историю диалога с пользователем, он обрабатывает каждый запрос независимо, и при получении второй формы не будет знать, как она связана с первой. Чтобы повторно не вводить уже введенную информацию, можно заставить программу, обрабатывающую первую форму, переносить необходимые данные в скрытые поля второй формы. Они не будут видимы пользователем и, в то же время, доступны серверу. Значение скрытого поля определяется атрибутом value.

Пример задания скрытого поля:



value="Скрытое поле 1" />

3.2.9. Кнопка сброса (type="reset")


Дескриптор <input> со значением type="reset" создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде кнопки с надписью Reset. Надпись можно изменить при помощи допол­нительного атрибута value. Поскольку имя кнопки не посылается на Web-сервер, атрибут name для нее можно не задавать.

Пример задания кнопки сброса:

<input type="reset" value="Сброс" />

3.2.10. Кнопка пересылки данных (type="submit")


Дескриптор <input> со значением type="submit" создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде кнопки с надписью Submit (или Submit Query). Дополнительный атрибут value позволяет изменить надпись на кнопке. Атрибут name для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передается на сервер. Если атрибуты name и value присутствуют, например,

<input type="submit" name="submit_button" value="OK">,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="OK". Внутри формы могут существовать несколько кнопок передачи.

3.2.11. Графическая кнопка пересылки данных (type="image")


Дескриптор <input> со значением type="image" создает элемент в виде графического изображения, действующий ана­логично кнопке submit. Обязательный атрибут src задает адрес изображения, а дополнительные атрибуты alt и align задают соответственно текст для изображения и выравнивание изображения относительно окружающих элементов. Для атрибута align определены те же значения, что и для аналогичного атрибута дескриптора <img>: left, right, top, texttop, middle, absmiddle, baseline, bottom и absbottom.

Если на изображении элемента щелкнуть мышью, то координаты указа­теля мыши в виде имя-элемента.x=n&имя-элемента.y=m (где имя-элемента – значение атрибута name, а m и n – значения координат x и y) включаются Web-браузером в список атрибутов формы, посылаемых на сервер. При обработке карты-изображения на стороне клиента необходимо задать значение атрибута usemap.

Пример задания графического изображения в качестве кнопки отправки данных:



src="images/ny.com/images/send.gif" />

3.2.12. Дескрипторы в HTML

Имя атрибута
Что определяет

Значение по умолчанию

Поддержка

accesskey
«Горячую» клавишу для данного элемента формы.
нет
Internet Explorer,

contenteditable
Задание или отмену возможности редактирования содержимого меню пользователем.
inherit
Internet Explorer

disabled
Отключает управление элемента формы (атрибут задается по имени, без значения).
управление элемента формы включено
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

multiple
Выбор из списка нескольких элементов (атрибут задается по имени, без значения).
из списка можно выбрать один элемент
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

name
Имя меню (обязательный параметр).
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

size
Количество видимых строк меню (если количество элементов в меню больше, то выводятся полосы прокрутки).
1
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

tabindex
Номер в последовательности обхода элементов при нажатии клавиши Tab.
нет
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator


Для атрибута contenteditable в дескрипторе <select> определены те же значения, что и для аналогичного атрибута дескриптора <form>.

Элементы меню задаются внутри контейнера <select>…select> при помощи контейнера <option>…option>. Помимо общих атрибутов class, dir, id, lang, style и title, для дескриптора <option> можно задавать атрибуты, приведенные в табл. 1.4.15.

Табл. 1.4.15. Атрибуты дескриптора <option> в HTML

Имя атрибута
Что определяет

Значение по умолчанию

Поддержка

accesskey
«Горячую» клавишу для данного элемента меню.
нет
Internet Explorer

disabled
Отключает управление элемента меню (атрибут задается по имени, без значения).
управление элемента меню включено
HTML 4.01,

XHTML,

Netscape Navigator

label
Короткое описание пункта меню.
нет
HTML 4.01,

XHTML,

Internet Explorer

selected
Начальный выбор пункта меню.
пункт меню не выбран
HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator

tabindex
Номер в последовательности обхода элементов при нажатии клавиши Tab.
нет
Internet Explorer

value
Текст пункта меню.
содержимое контейнера

HTML 4.01,

XHTML,

Internet Explorer,

Netscape Navigator


Атрибут value содержит строку, которая пересылается серверу, если данный элемент выбран из меню или списка. Если значение этого атрибута не задано, то по умолчанию оно устанавливается равным значению содержимого контейнера <option>…option>. Например, элементы

.



имеют одно значение "Red". В первом случае оно установлено явно при по­мощи атрибута value, во втором – по умолчанию.

Пример задания меню:

Copyright © 2023. All rights Reserved.