HTML

: The Input Label element

The HTML element represents a caption for an item in a user interface.

Try it

• The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
• When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

To associate the with an element, you need to give the an id attribute. The then needs a for attribute whose value is the same as the input’s id .

Alternatively, you can nest the directly inside the , in which case the for and id attributes are not needed because the association is implicit:

label>Do you like peas? input type="checkbox" name="peas"> label> 

The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:

label for="username">Enter your username: label> input id="username"> label for="username">Forgot your username? label> 

Elements that can be associated with a element include , (except for type=»hidden» ), , , , and .

Attributes

This element includes the global attributes.

The value of the for attribute must be a single id for a labelable form-related element in the same document as the element. So, any given label element can be associated with only one form control.

Note: To programmatically set the for attribute, use htmlFor .

The first element in the document with an id attribute matching the value of the for attribute is the labeled control for this label element — if the element with that id is actually a labelable element. If it is not a labelable element, then the for attribute has no effect. If there are other elements that also match the id value, later in the document, they are not considered.

Multiple label elements can be given the same value for their for attribute; doing so causes the associated form control (the form control that for value references) to have multiple labels.

Note: A element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

Styling with CSS

There are no special styling considerations for elements — structurally they are simple inline elements, and so can be styled in much the same way as a or element. You can apply styling to them in any way you want, as long as you don’t cause the text to become difficult to read.

Examples

Simple label example

label>Click me input type="text"> label> 

Источник

: The Label element

The HTML element represents a caption for an item in a user interface.

Try it

Associating a with a form control, such as or offers some major advantages:

• The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
• When a user clicks or touches/taps a label, the browser passes the focus to its associated input (the resulting event is also raised for the input). That increased hit area for focusing the input provides an advantage to anyone trying to activate it — including those using a touch-screen device.

To explicitly associate a element with an element, you first need to add the id attribute to the element. Next, you add the for attribute to the element, where the value of for is the same as the id in the element.

Alternatively, you can nest the directly inside the , in which case the for and id attributes are not needed because the association is implicit:

label> Do you like peas? input type="checkbox" name="peas" /> label> 

The form control that a label is labeling is called the labeled control of the label element. Multiple labels can be associated with the same form control:

label for="username">Enter your username:label> input id="username" name="username" type="text" /> label for="username">Forgot your username?label> 

Elements that can be associated with a element include , (except for type=»hidden» ), , , , and .

Attributes

This element includes the global attributes.

The value of the for attribute must be a single id for a labelable form-related element in the same document as the element. So, any given label element can be associated with only one form control.

Note: To programmatically set the for attribute, use htmlFor .

The first element in the document with an id attribute matching the value of the for attribute is the labeled control for this label element — if the element with that id is actually a labelable element. If it is not a labelable element, then the for attribute has no effect. If there are other elements that also match the id value, later in the document, they are not considered.

Multiple label elements can be given the same value for their for attribute; doing so causes the associated form control (the form control that for value references) to have multiple labels.

Note: A element can have both a for attribute and a contained control element, as long as the for attribute points to the contained control element.

Styling with CSS

There are no special styling considerations for elements — structurally they are simple inline elements, and so can be styled in much the same way as a or element. You can apply styling to them in any way you want, as long as you don’t cause the text to become difficult to read.

Examples

Defining an implicit label

label>Click me input type="text" />label> 

Источник

HTML тег

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

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

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

Пример

html> html> head> title> Заголовок документа title> head> body> form> label for="lfname">Имя пользователя: label> input id="lfname" name="fname" type="text" /> form> body> html>

Результат

Пример

html> html> head> title>Заголовок документа title> head> body> form> label>Имя input id="User" name="Имя" type="text" /> label> form> body> html>

Результат

Пример (форма с флажками)

html> html> head> title>Заголовок документа title> head> body> form> label for="barca">Барселона label> input type="radio" name="team" id="barca" value="Барселона">br /> label for="real">Реал Мадрид label> input type="radio" name="team" id="real" value="Реал Мадрид">br /> form> body> html>

Результат

Используйте CSS свойства font для стилизации тега .

Пример

html> html> head> title>Заголовок документа title> style> body < padding: 20px; > label < font-size: 20px; font-weight: 700; color: #1c87c9; > input < width: 50%; height: 28px; padding: 4px 10px; border: 1px solid #666; background: #cce6ff; color: #1c87c9; font-size: 16px; > style> head> body> form> label>Ваше имя: label> input id="User" name="Name" type="text"/> form> body> html>

Результат

Атрибуты

Атрибут	Значение	Описание
accesskey	accesskey	Определяет горячую клавишу, с помощью которой можно перейти к привязанному к метке (через атрибут for) элементу формы.
for	element_id	Устанавливает идентификатор элемента, к которому должна быть привязана метка.
form	form_id	Определяет форму (формы) с которой будет связана метка. Этот атрибут позволяет размещать метки в произвольном месте документа, а не только в качестве потомка элемента тега . Элемент был удален из спецификации HTML.

Как добавить стиль к тегу ?

Распространенные свойства для изменения визуальной насыщенности/выделения/размера текста внутри тега :

• CSS свойство font-style задает стиль шрифта: normal | italic | oblique | initial | inherit
• CSS свойство font-family создает приоритетный список названий семейства шрифтов и/или общее имя шрифтов для выбранных элементов.
• CSS свойство font-size задает размер щрифта.
• CSS свойство font-weight устанавливает насыщенность шрифта.
• CSS свойство text-transform задает регистр текста (заглавные или строчные буквы).
• CSS свойство text-decoration устанавливает оформление текста. Оно является сокращенным свойством для text-decoration-line, text-decoration-color, text-decoration-style.

Цвет текста внутри тега :

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

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега :

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.

Источник

How to style labels with CSS?

The labels are used to define or set captions for any element on the web. It conveys useful information to the user about any element or maybe any section of the website.

The labels should be designed that it adds up the semantic meaning to it. Here, we will learn to style labels with CSS.

Styling the labels

The labels can be styled with some basic CSS properties like background-color , color , padding , font-size , etc.

Example: Styling the labels with CSS

Here, we have added three level topics. It has been added with some semantic background color.

      span < padding: 16px; height: 10px; width: 100px; margin: 2px; >.label-1 < background-color: green; >.label-2 < background-color: yellow; >.label-3  
 
Study Topics
 Easy Medium Difficult 
  

Output

Here is the output of the above program.

Example: styling the labels with CSS

In the next example, we have taken the same example and changed the background-color on :hover . Also added box-shadow property to each label.

Conclusion

In this tutorial, we have learned to style labels with CSS. We can use basic CSS property to do so. Here, we have added examples to demonstrate it.

Источник