Элемент label

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

Для элемента label можно задавать стили шрифта, текста, цвета и фона, а также стили полей, границ и отступов блоковой модели документа.

В DOM2 HTML для элемента label определен интерфейс HTMLLabelElement со следующими основными свойствами:

• htmlFor – значение атрибута for;

• form (только для чтения) – содержит объект HTMLFormElement формы, к которой принадлежит элемент label.

Пример 4.5.22. Использование элемента label:

Фрагмент документа HTML:

<form id="personForm">

<h3>1. Простая надпись</h3>

<label for="FIOField" id="FIOLabel">

Введите свою фамилию и инициалы: </label>

<h3>2. Надпись с использованием стилей</h3>

<label for="birthDataField" id="birthDataLabel"

style="color: blue; font-weight: bold; font-size: 16pt;

font-family: Verdana; background-color: yellow">

Введите дату рождения: </label>

</form>

и сценарий JavaScript

// Получение элемента label с id,

// равным "birthDataLabel"

labelElement = document.getElementById("birthDataLabel");

// Вывод значений свойств элемента label

alert("Элемент label: for ='" + labelElement.htmlFor +

"'\nid формы='" + labelElement.form.id + "'");

задают вывод следующей Web-страницы:

106. Які елементи форм визначені в JavaScript? Дайте коротку характеристику кожного елемента.

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

Одиночный элемент input определяет тип компонента формы и его параметры.

Помимо общих атрибутов class, dir, id, lang, style и title, для элемента input определен атрибут type и другие атрибуты, набор которых зависит от типа компонента.

Атрибут type, определяющий тип компонента, может иметь одно из следующих значений:

• button – задает кнопку;

• checkbox – задает переключатель;

• radio – задает радиокнопку;

• text – задает текстовое поле (это значение по умолчанию);

• password – задает текстовое поле ввода пароля;

• file – задает окно выбора файлов для передачи на Web-сервер;

• hidden – задает скрытое текстовое поле;

• reset – задает кнопку сброса данных, введенных в форме;

• submit – задает кнопку передачи данных, введенных в форме, на Web-сервер;

• image – задает графическую кнопку передачи данных, введенных в форме, на Web-сервер.

107.За допомогою якого елемента форми можна передати файл на Web-сервер?

Элемент input со значением type="file" создает компонент, состоящий из текстового поле для ввода-вывода имени файла, сопровождаемое кноп­кой Обзор (в Internet Explorer, Firefox и Opera) или Выбрать файл в Safari. Имя файла с указанием полного пути можно непосредственно ввести в текстовое поле или, воспользовавшись кнопкой Обзор (Choose File), выбрать его из окна Windows с именем Выбор файла для выгрузки (в Internet Explorer), Загрузка файла (в Firefox и Safari), Открыть (в Opera). Выделенное имя файла после нажатия кнопки Открыть окна выводится в текстовом поле, причем во всех Web-браузерах, кроме Safari, выводится полный путь к выбранному файлу (в Safari выводится только имя файла).

Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Для корректной передачи присоединенного файла следует установить значения атрибутов формы в виде enctype="multipart/form-data" и method="post". В противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое.

Дополнительными атрибутами для компонента выбора файлов являются:

• name – имя элемента;

• size – ширину текстового поля для ввода-вывода имени выбранного файла;

• disabled (без значения) – компонент отключен.