- Элемент label
- См. также
- HTML Tag
- Syntax
- Example of the HTML tag:
- Result
- Example of the HTML tag with an element inside:
- Example of HTML with a tag used with radio type of an tag:
- Example of the HTML tag with CSS font properties:
- Attributes
- How to style tag?
- Common properties to alter the visual weight/emphasis/size of text in tag:
- Coloring text in tag:
- Text layout styles for tag:
- Other properties worth looking at for tag:
- How to Control the Width of the Tag
- Create HTML
- Add CSS
- Example of adding width to the tag using the «block» value of the display property:
- Result
- Example of adding width to the tag using the «inline-block» value of the display property:
Элемент label
Элемент связывает текст с определённым элементом формы. Обычно применяется в следующих случаях.
- Текст становится активным и при щелчке по нему изменяется значение связанного с текстом переключателя или флажка. Это удобно для пользователя, потому что не приходится целиться курсором в небольшой по размерам элемент.
- Стили для позволяют задать положение текста и другие характеристики оформления.
Простой вариант использования заключается в добавлении полей формы прямо внутрь с желаемым текстом, как показано в примере 1.
Визуально себя никак не проявляет, поэтому понять, задействован он или нет, можно только по тексту. Если щелчок по тексту переносит фокус в текстовое поле, ставит галочку в переключателе или ещё как-то активирует близлежащий элемент формы, значит работает .
Поля формы и текст для них могут визуально находиться рядом, но в коде документа располагаться внутри разных элементов. Чтобы связать их между собой применяется атрибут for , его значением выступает идентификатор у , как показано в примере 2.
Для каждого элемента задаём свой уникальный идентификатор через атрибут id , а внутри элемента указываем этот же идентификатор как значение атрибута for .
Также применяется как один из элементов для вёрстки сложных форм. В примере 3 показана форма авторизации, в которой текст располагается рядом с полями для ввода логина и пароля.
Пример 3. Форма для авторизации
Результат данного примера показан на рис. 1.
Рис. 1. Форма для авторизации пользователя
См. также
- Аккордеон меню
- Вкладки на CSS
- Выпадающее меню
- Использование :checked
- Подсказка в поле формы
- Пользовательские формы
- Стилизация переключателей
- Стилизация флажков
- Формы в Bootstrap 4
- Формы в HTML
HTML Tag
The tag is also used to define keyboard shortcuts and jump to the active element like links.
An input can be associated with several labels. If you click or tap a which is associated with a form control, the resulting click event will arise for the associated control.
Associating a with an element has some advantages:
- The label text is both visually and pragmatically associated with the text input.
- You can click on the associated label for focusing or activating the input, as well as on the input itself.
Syntax
The
There are two ways to associate a text label and the form to which it belongs:
Example of the HTML tag:
html> html> head> title>Title of the document title> head> body> form> label for="lfname">First name: label> input id="lfname" name="fname" type="text" /> form> body> html>
Result
Example of the HTML tag with an element inside:
html> html> head> title>Title of the document title> head> body> form> label>Name input id="User" name="Name" type="text" /> label> form> body> html>
Example of HTML with a tag used with radio type of an tag:
html> html> head> title>Title of the document title> head> body> form> label for="barca">Barcelona label> input type="radio" name="team" id="barca" value="Barcelona"> br /> label for="real">Real Madrid label> input type="radio" name="team" id="real" value="Real Madrid"> br /> form> body> html>
Example of the HTML tag with CSS font properties:
html> html> head> title>Title of the document 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>Your Name: label> input id="User" name="Name" type="text"/> form> body> html>
Attributes
Attribute | Value | Description |
---|---|---|
accesskey | accesskey | Defines a hot key with which you can go to the attached to the label (through a for attribute) form element. |
for | element_id | Sets the ID of the element to which the label should be bound. |
form | form_id | Specifies the form (s) with which the label will be associated. This attribute allows you to place tags in an arbitrary location in the document, and not just as a descendant of the element. Obsolete. |
How to style tag?
Common properties to alter the visual weight/emphasis/size of text in tag:
- CSS font-style property sets the style of the font. normal | italic | oblique | initial | inherit.
- CSS font-family property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.
- CSS font-size property sets the size of the font.
- CSS font-weight property defines whether the font should be bold or thick.
- CSS text-transform property controls text case and capitalization.
- CSS text-decoration property specifies the decoration added to text, and is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style.
Coloring text in tag:
- CSS color property describes the color of the text content and text decorations.
- CSS background-color property sets the background color of an element.
Text layout styles for tag:
- CSS text-indent property specifies the indentation of the first line in a text block.
- CSS text-overflow property specifies how overflowed content that is not displayed should be signalled to the user.
- CSS white-space property specifies how white-space inside an element is handled.
- CSS word-break property specifies where the lines should be broken.
Other properties worth looking at for tag:
- CSS text-shadow property adds shadow to text.
- CSS text-align-last property sets the alignment of the last line of the text.
- CSS line-height property specifies the height of a line.
- CSS letter-spacing property defines the spaces between letters/characters in a text.
- CSS word-spacing property sets the spacing between words.
How to Control the Width of the Tag
The element specifies a text label for the tag. Since it is an inline element, using the width property alone won’t have any effect. But there are some methods to add width to the tag.
In this tutorial, we’ll demonstrate some examples of controlling the width of the tag by using the display property set to “block” in combination with the width property.
Create HTML
form> label for="name">Enter your name: label> input id="name" name="name" type="text" /> form>
Add CSS
label < display: block; width: 130px; >
Example of adding width to the tag using the «block» value of the display property:
html> html> head> title>Title of the document title> style> label < display: block; width: 130px; > style> head> body> form> label for="name">Enter your name: label> input id="name" name="name" type="text" /> form> body> html>
Result
Let’s see another example where we use the display property set to “inline-block”.
Example of adding width to the tag using the «inline-block» value of the display property:
html> html> head> title>Title of the document title> style> label < display: inline-block; width: 150px; > style> head> body> form> label for="name">Enter your name: label> input id="name" name="name" type="text" /> form> body> html>