Описание

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

Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега . При втором способе элемент формы помещается внутрь контейнера .

Синтаксис Текст Текст Атрибуты Доступ к элементам формы с помощью горячих клавиш. Идентификатор элемента, с которым следует установить связь. Закрывающий тег

Обязателен.

HTML5 IE Cr Op Sa Fx

Тег LABEL

Lorem ipsum dolor sit amet...

Lorem
Ipsum
Dolor
Sit amet

Браузеры

IE6 не позволяет активировать поле формы при щелчке по тексту, когда поле с текстом находится внутри тега .

IE до версии 8.0 включительно корректно работает с только при наличии в нём текста. Если добавить изображение ( ), то активировать поле формы щелчком по картинке нельзя.

Метка привязывается к определенному полю ввода с помощью атрибута for . В нем следует указывать значение атрибута поля ввода, к которому привязана метка. Также метка привязывается к элементу, если этот элемент положить вовнутрь тега label. В этом случае атрибут for указывать не надо. Смотрите примеры для лучшего понимания.

По нажатию на метку привязанные к ней или будут менять свое состояние с отмеченного на неотмеченное и наоборот. Метка в данном случае нужна для удобства: в мелкие элементы формы тяжело попасть курсором, а в длинную метку с текстом - на порядок легче.

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

Метку label можно использовать для имитации или . Это нужно для того, чтобы сделать checkbox или radio со своим дизайном (что на CSS запрещено, но с помощью хитрых приемов возможно).

Атрибуты Пример . Чекбокс

Давайте к флажку привяжем метку с помощью атрибута for . Понажимайте на метку и вы увидите смену состояния флажка с отмеченного на неотмеченное и наоборот:

Я привязан к чекбоксу с id checkbox.

Пример . Внутри label

А теперь давайте не будем привязывать метку через атрибут for, а вложим элементы прямо в тег label, в этом случае нажимая на текст label также будем приводить к активации элемент:

метка

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

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

">Элемент _и_">Элементы и

Различные вспомогательные технологии будут использовать как часть метки label всех элементов внутри . Например, такие экранные дикторы как Jaws или NVDA произносят заголовок формы перед произношением названия меток элементов.

Небольшой пример:

Fruit juice size

Small

Medium

Large

Читая эту форму, экранный диктор произнесёт "Fruit juice size small" для первого элемента, "Fruit juice size medium" - для второго, "Fruit juice size large" - для третьего.

Вариант использования в этом примере является одним из наиболее важных. Каждый раз, когда у вас есть набор переключателей, вам нужно поместить их внутри . Также можно использовать для разделения формы. В идеале, длинную форму разделяют на несколько страниц, однако, если она должна находиться на одной странице, распределение связанных элементов в разные может повысить удобство использования.

Из-за своего влияния на вспомогательные технологии элемент является одним из ключевых элементов для построения доступных форм; однако вы не должны им злоупотреблять. Если возможно, старайтесь проверять, как экранный диктор интерпретирует вашу форму.

_element">The element

Let"s consider this example:

*.

Name: * Name: * Name: *

The paragraph at the top defines the rule for required elements. It must be at the beginning to make sure that assistive technologies such as screen readers will display or vocalize it to the user before they find a required element. That way, they will know what the asterisk means. A screen reader will speak the star as "star " or "required ", depending on the screen reader"s settings - in any case, what will be spoken is made clear in the first paragraph).

• In the first example, the label is not read out at all with the input - you just get "edit text blank", plus the actual labels are read out separately. The multiple elements confuse the screenreader.
• In the second example, things are a bit clearer - the label read out along with the input is "name star name edit text", and the labels are still read out separately. Things are still a bit confusing, but it"s a bit better this time because the input has a label associated with it.
• The third example is best - the actual label is read out all together, and the label read out with the input is "name star edit text".

Note : You might get slightly different results, depending on your screenreader. This was tested in VoiceOver (and NVDA behaves similarly). We"d love to hear about your experiences too.

Note : You can find this example on GitHub as required-labels.html (see it live also). don"t run the example with 2 or 3 of the versions uncommented - screenreaders will definitely get confused if you have multiple labels AND multiple inputs with the same ID!

Common HTML structures used with forms

Beyond the structures specific to HTML forms, it"s good to remember that forms are just HTML. This means that you can use all the power of HTML to structure an HTML form.

As you can see in the examples, it"s common practice to wrap a label and its widget with a element.

elements are also commonly used, as are HTML lists (the latter is most common for structuring multiple checkboxes or radio buttons).

In addition to the element, it"s also common practice to use HTML titles (e.g. , ) and sectioning (e.g. ) to structure a complex form.

Above all, it is up to you to find a style that you find comfortable to code with, and which also results in accessible, usable forms.

This has each separate section of functionality contained in elements, and a to contain the radio buttons.

Active learning: building a form structure

Let"s put these ideas into practice and build a slightly more involved form structure - a payment form. This form will contain a number of widget types that you may not yet understand - don"t worry about this for now; you"ll find out how they work in the next article (The native form widgets). For now, read the descriptions carefully as you follow the below instructions, and start to form an appreciation of which wrapper elements we are using to structure the form, and why.

To start with, make a local copy of our blank template file and the CSS for our payment form in a new directory on your computer.

First of all, apply the CSS to the HTML by adding the following line inside the HTML :

Next, start your form off by adding the outer element:

Inside the tags, start by adding a heading and paragraph to inform users how required fields are marked: Payment form

Required fields are followed by *.

Next we"ll add a larger section of code into the form, below our previous entry. Here you"ll see that we are wrapping the contact information fields inside a distinct element. Moreover, we have a set of two radio buttons, each of which we are putting inside its own list (

) element. Last, we have two standard text s and their associated elements, each contained inside a

, plus a password input for entering a password. Add this code to your form now: Contact information Title

• Mister
• Miss

Name: *

E-mail: *

Password: *

Now we"ll turn to the second of our form - the payment information. Here we have three distinct widgets along with their labels, each contained inside a

The first is a drop down menu (

Описание

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

может располагаться в заголовке или теле HTML-документа в неограниченном количестве. В большинстве случаев местоположение скрипта никак не сказывается на работу программы. Однако скрипты, которые должны выполняться в первую очередь, обычно помещают в заголовок документа.

Синтаксис ... Атрибуты Загружает скрипт асинхронно. Откладывает выполнение скрипта до тех пор, пока вся страница не будет загружена полностью. Устанавливает язык программирования на котором написан скрипт. Адрес скрипта из внешнего файла для импорта в текущий документ. Определяет тип содержимого тега . Закрывающий тег

Обязателен.

HTML 4.01 IE Cr Op Sa Fx

Тег SCRIPT document.write ("

"); for (i=1; i", " Windows