Элемент label


HTML тег

Элемент (от англ. «label» ‒ «метка, надпись») устанавливает связь между определённой меткой и элементом формы ( , ,

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

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

При втором способе элемент формы помещается внутрь контейнера :

HTML тег label

Тег определяет метку для элемента .

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

Атрибут for тега должен иметь такое же значение, что и атрибут id соответствующего контрольного элемента. Это позволяет связать их друг с другом.

Метка может быть связана с контрольным элементом либо при помощи атрибута for, либо вложив этот контрольный элемент в тег .

Разница между HTML 4.01 и HTML5

Атрибут Описание
for Определяет к какому элементу относится метка
form Определяет к какой форме относится данный элемент

Общие атрибуты

HTML пример

Две кнопки выбора с текстовыми метками:

CSS стили по умолчанию


Большинство браузеров будут отображать тег со следующими стилями

label

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE6 при клике по тексту, когда поле с текстом находится внутри тега не активирует поле формы + + + +

Пример

Простая форма с двумя полями и связанными метками (ярлыками):

Описание и использование

Тег определяет метку (ярлык) для элемента ввода.

Элемент label скрыт от глаз пользователей. Однако, он предоставляет значительное улучшение юзабилити для тех, кто пользуется мышкой, так как при нажатии юзером на текст внутри элемента label, включаются кнопки управления.

Атрибут for тега должен равняться атрибуту id связанного элемента для связки.

HTML тег

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

Синтаксис

Тег парный, текст размещается между открывающим ( ) и закрывающим ( ) тегами.

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


Связать текстовую метку и форму, к которой она относится, можно двумя способами:

  1. установить идентификатор id внутри элемента и указать его имя в качестве атрибута for тега .

Элемент 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:

и сценарий JavaScript

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

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

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

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


Не нашли то, что искали? Воспользуйтесь поиском:

Лучшие изречения: Студент — человек, постоянно откладывающий неизбежность. 10527 — | 7316 — или читать все.

188.64.174.135 © studopedia.ru Не является автором материалов, которые размещены. Но предоставляет возможность бесплатного использования. Есть нарушение авторского права? Напишите нам | Обратная связь.

Отключите adBlock!
и обновите страницу (F5)

очень нужно

Элемент Label (лента сервера) Label element (Server Ribbon)

Применимо к: SharePoint 2020 | SharePoint Foundation 2013 | SharePoint Online | SharePoint Server 2013 Applies to: SharePoint 2020 | SharePoint Foundation 2013 | SharePoint Online | SharePoint Server 2013

Определяет элемент управления надписи. Defines a label control.

Элементы и атрибуты Elements and attributes

В следующих разделах описываются атрибуты, дочерние и родительские элементы. The following sections describe attributes, child elements, and parent elements.

Атрибуты Attributes

Атрибут Attribute Описание Description
Форид ForId Необязательный атрибут. Optional. Идентификатор элемента управления, к которому относится данная надпись. The ID of the control that this control labels.
Id Id Обязательный. Required. Строка, идентифицирующая элемент управления, например, «Ribbon.Image.Image.Size.HorizontalSizeLabel». A string that identifies the control, such as «Ribbon.Image.Image.Size.HorizontalSizeLabel».
Лабелтекст LabelText Необязательный атрибут. Optional. Текст надписи. The text of the label.
Image16by16 Image16by16 Необязательный атрибут. Optional. Зависящий от сервера URL-адрес файла, содержащего изображение размером 16 на 16 пикселов, которое будет использоваться в качестве значка, например «/_layouts/1033/images/formatmap16x16.png». A server-relative URL to a file that contains a 16-by-16-pixel image to be used as an icon, such as «/_layouts/1033/images/formatmap16x16.png».
Image16by16Class Image16by16Class Необязательный атрибут. Optional. Имя селектора класса CSS, предназначенного для применения к изображению. The name of a CSS class selector to be applied to the image.
Image16by16Left Image16by16Left Необязательный атрибут. Optional. Отрицательное целое число, определяющее смещение левого края изображения. A negative integer that represents an offset for the left edge of the image. Этот атрибут используется в том случае, если атрибут Image16by16 указывает на файл, в котором хранятся изображения нескольких значков. Use this attribute when the Image16by16 attribute points to an image file that contains images for many icons. Значение атрибута Image16by16Left используется для задания атрибута CSS left для встроенного стиля HTML-тега img. The value of the Image16by16Left attribute is used to set the CSS left attribute for the inline style of an HTML img tag.
Image16by16Top Image16by16Top Необязательный атрибут. Optional. Отрицательное целое число, определяющее смещение верхнего края изображения. A negative integer that represents an offset for the top edge of the image. Этот атрибут используется в том случае, если атрибут Image16by16 указывает на файл, в котором хранятся изображения нескольких значков. Use this attribute when the Image16by16 attribute points to an image file that contains images for many icons. Значение атрибута Image16by16Top используется для задания атрибута CSS top для встроенного стиля HTML-тега img. The value of the Image16by16Top attribute is used to set the CSS top attribute for the inline style of an HTML img tag.
Sequence Sequence Необязательный атрибут. Optional. Целое число, определяющее положение элемента среди XML-узлов того же уровня. An integer that specifies the order of placement among sibling XML nodes.
Темплатеалиас TemplateAlias Необязательный атрибут. Optional. Строка, соответствующая значению атрибута TemplateAlias для элемента ControlRef, OverflowArea или OverflowSection в элементе GroupTemplate. A string that matches the value of the TemplateAlias attribute for a ControlRef element, an OverflowArea element, or an OverflowSection element in a GroupTemplate element. Атрибут TemplateAlias используется для задания размера и положения элементов управления в группе при применении шаблона к группе. The TemplateAlias attribute is used to size and position controls within a group when a template is applied to the group.
Куерикомманд QueryCommand Необязательный атрибут. Optional. Имя команды, которая выполняется при запросе сведений о состоянии. The name of the command to execute when polling for state information.
Command Command Необязательный атрибут. Optional. Имя команды, которая выполняется, когда надпись оказывается в фокусе. The name of the command to execute when the label receives focus.

Дочерние элементы Child elements

Родительские элементы Parent elements

Occurrences Occurrences


  • Минимум: 0 Minimum: 0
  • Максимум: 1 Maximum: 1

Пример Example

В следующем примере приведен фрагмент XML-кода, в котором показан элемент Controls, содержащий два элемента управления «текстовое поле» и две надписи для них The following example is an XML fragment that shows a Controls element that contains two text box controls and two labels for them.

Элемент label

На этом шаге мы рассмотрим назначение и основные свойства этого элемента управления .

Элемент управления Label (Надпись) создается с помощью кнопки Надпись (Label) панели элементов управления (рисунок 1).

Рис.1. Надпись в форме

В основном Label используется используется для отображения надписей, например заголовков, не имеющих свойства Caption . Надпись не может быть изменена пользователем, но код программы во время ее выполнения может управлять текстом надписи.

Основные свойства элемента управления Label перечислены ниже.

Таблица 1. Основные свойства Label
Свойство Назначение
Caption Возвращает текст, содержащийся в надписи
Visible Допустимые значения: True (надпись отображается во время выполнения программы) и False (в противном случае)
Multiline Допустимые значения: True (устанавливается многострочный режим ввода текста в надписи) и False (однострочный режим)
WordWrap Допустимые значения: True (устанавливается режим автоматического переноса) и False (в противном случае)
AutoSize Допустимые значения: True (устанавливается режим автоматического изменения размера надписи так, чтобы весь вводимый текст помещался в нем) и False (устанавливается фиксированный размер надписи)

На следующем шаге мы рассмотрим элемент управления CommandButton .

Теги HTML

Все теги. Язык разметки. Гипертекст. HTML5. Все доступные теги и атрибуты языка гипертекстовой разметки


Тег label — подсказка к элементу формы

Элемент LABEL

Начальный тег: обязателен, Конечный тег: обязателен

for = idref [CS] Явно связывает определяемую метку с другим управляющим элементом. Если указано значение этого атрибута, оно должно совпадать со значением атрибута id другого управляющего элемента в этом же документе. Если этот атрибут не указан, определяемая метка связывается с содержимым элемента.

Атрибуты, определяемые в другом месте

  • id, class (идентификаторы в пределах документа)
  • lang (информация о языке), dir (направление текста)
  • title (заголовок элемента)
  • style (встроенная информация о стиле)
  • accesskey (клавиши доступа)
  • tabindex (переход по клавише tab )
  • onfocus, onblur, onclick, ondblclick, onmousedown,
    onmouseup, onmouseover, onmousemove, onmouseout,
    onkeypress, onkeydown,onkeyup (внутренние события)

Элемент LABEL может использоваться для прикрепления к управляющим элементам информации. Каждый элемент LABEL связан ровно с одним управляющим элементом формы.

Атрибут for явно связывает метку с другим управляющим элементом: значение атрибута for должно совпадать со значением атрибутаid связанного управляющего элемента. С одним и тем же управляющим элементом может быть связано несколько элементов LABEL, если создать несколько ссылок с помощью атрибута for.

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

Здесь мы расширим предыдущий пример и включим элементы LABEL.

Чтобы неявно связать метку с другим управляющим элементом, этот управляющий элемент должен находиться в элементе LABEL. В таком случае элемент LABEL может содержать только один управляющий элемент. Сама метка может располагаться до или после связанного с ней управляющего элемента.

В этом примере мы неявно связываем две метки с двумя управляющими элементами для ввода текста:

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

Если на элемент LABEL переходит фокус, то он передается в связанный управляющий элемент. Примеры см. ниже в разделе о клавишах доступа.

Метки могут представляться агентами пользователей несколькими способами (например, визуально, прочитываться синтезаторами речи и т.д.)


Элемент LABEL

Начальный тег: необходим, Конечный тег: необходим

for = idref [CS] Этот атрибут явно ассоциирует лэйбл с другим ЭУ. При наличии, значение этого атрибута должно быть тем же, что и значение атрибута id другого ЭУ этого же документа. При отсутствии, определяемая ссылка ассоциируется с содержимым элемента.

Атрибуты, определённые в другом месте

  • id, class (идентификаторы документа)
  • lang (язык), dir (направление текста)
  • title (название элемента)
  • style (название стиля)
  • accesskey (символ быстрого доступа)
  • onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (внутренние события)
  • Элемент LABEL может использоваться для присоединения информации к ЭУ. Каждый элемент LABEL ассоциирован только с одним ЭУ формы.

    Атрибут for явно ассоциирует лэйбл с другим ЭУ: значение атрибута for должно быть тем же, что и атрибута id ассоциированного ЭУ. Более, чем один LABEL


    может быть ассоциирован с элементом путём создания множественных ссылок атрибута for.

    В этом примере создаётся таблица, для выравнивания двух ЭУ text

    и ассоциированных с ними лэйблов. Каждый лэйбл ассоциируется только с одним ЭУ text:

    Элемент Label

    Элемент управления Label (надпись) может содержать информацию, доступную только для чтения (текст или изображение), например, для того, чтобы пояснить пользователю роль и возможности использования остальных элементов управления, помещенных в форму. Предположим, вы создали в Visual Studio 2005 новый проект Windows Forms с именем LabelsAndTextBoxes. В рамках полученного экземпляра типа Form определите метод с именем CreateLabelControl(), который сначала создает и конфигурирует тип Label, а затем добавляет его в коллекцию элементов управления формы,

    private void CreateLabelControl() <

    // Создание и конфигурация Label.

    Label lblInstructions = new Label();

    lblInstructions.Text = ‘Введите значения во все окна текста»;

    lblInstructions.Font = new Font(«Times New Roman», 9.75F, FontStyle.Bold);

    lblInstructions.Location = new System.Drawing.Point(16, 13);

    lblInstructions.Size = new System.Drawing.Size(240, 16);

    // Добавление в коллекцию элементов управления формы.

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

    В отличие от большинства других элементов, элементы управления Label не могут получать фокус ввода при переходах по клавише табуляции. Однако в .NET 2.0 для любого элемента управления Label можно создать мнемонические клавиши установив для свойства UseMnemonic значение true (именно это значение устанавливается для данного свойства по умолчанию). После этого в свойстве Text надписи можно (с помощью символа амперсанда &) определить комбинацию клавиш для перехода к соответствующему элементу управления.

    Замечание. Порядок переходов по табуляции подробнее будет обсуждаться позже, а пока что достаточно заметить, что порядок данного элемента управления при переходах по клавише табуляции устанавливается с помощью свойства TabIndex. По умолчанию значение TabIndex элемента управления соответствует порядку, в котором элементы добавлялись в окно проектирования формы. Поэтому, если вы сначала добавите Label, а затем – Textbox, то для Label значение TabIndex будет установлено равным 0, а для Textbox – равным 1.

    Для примера с помощью окна проектирования формы постройте пользовательский интерфейс, состоящий из трех Label и трех Textbox (рис. 21.3). Не забудьте оставить свободное место в верхней части формы для отображения элемента Labels динамически создаваемого в методе CreateLabelControl(), и обратите внимание на то, что здесь каждая надпись содержит подчеркнутую букву. Так выделяются буквы, которые в значении свойства Text надписи были помечены знаком &. Вы, наверное, знаете, что помеченные знаком & символы обеспечивают возможность активизации элемента пользователем с помощью выбора комбинации клавиш ‹Alt+ помеченный символ›.

    Рис. 21.3. Назначение мнемоник элементам управления Label

    Запустив проект, вы сможете перейти к любому из имеющихся элементов TextBox, используя ‹Alt+n›, ‹Alt+M› или ‹Alt+T›.

    Илон Маск рекомендует:  Poke переслать буфер далеко
    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL