Тег label в HTML улучшает удобство использования вашего сайта и создает безбарьерный доступ. Тег label можно использовать для полей ввода, флажков и кнопок. Он также работает с глобальными атрибутами, атрибутами событий, а также для и формы.
Для чего используется метка HTML?
HTML-метка является важной частью доступности веб-сайта. Он используется в формах и добавляет надпись или метку для пояснения таких элементов, как поля ввода, кнопки или флажки.
Это очень важно по двум причинам. Во-первых, она увеличивает область, на которую посетители могут нажать, что облегчает работу посетителей, испытывающих трудности с навигацией по сайту. Во-вторых, это обеспечивает возможность чтения надписей вслух для посетителей, использующих устройство для чтения с экрана, что повышает общее удобство использования сайта.
Как используется тег label в HTML?
Существует два способа использования тега label в HTML. Вы можете использовать атрибут for, чтобы связать метку непосредственно с полем ввода, или вы можете включить форму рядом с меткой внутри тега label в HTML. Ниже приведены варианты использования тега label в HTML.
Для флажков:
<p>
<input type="checkbox" name="read" id="read" value="yes" />
<label for="read">I have read the terms and conditions</label>
</p>Атрибут for, используемый в теге label в HTML, должен иметь то же значение, что и атрибут id в поле ввода.
Для кнопок:
<input type="radio" id="radio" value="agree" />
<label for="read">agree</label>Надпись включается во второй вариант, который выглядит следующим образом:
<p>
<label>
<input type="checkbox" name="read" value="yes" />
I have read the terms and conditions
</label>
</p>Какие элементы должны быть помечены меткой HTML?
Следующие элементы в HTML должны быть помечены тегом label, чтобы посетители с устройствами чтения с экрана могли получить доступ к вашему сайту:
- Поля ввода: , < input type=»password» />, < testarea>
- Флажки: <input type=»checkbox» />
- Кнопки: <input type=»radio» />
- Списки выбора: <select>
- Поля загрузки: <input type=»file» />
Какие атрибуты поддерживает тег label в HTML?
Тег label в HTML поддерживает все глобальные атрибуты HTML, а также атрибуты событий. Следующие атрибуты связаны с тегом HTML:
for: Атрибут for используется для определения идентификатора элемента ввода, с которым должна быть связана надпись. Это означает, что первый элемент ввода, который соответствует этому значению в документе, автоматически ассоциируется с надписью.
form: Атрибут form определяет, какой элемент формы должен быть присвоен тегу label в HTML, что выглядит следующим образом:
<form id="participant">
<label class="h2" form="participant">name</label>
<label for="firstname">first name</label>
<input name="firstname" id="firstname" maxlength="25">
<label for="lastname">last name</label>
<input name="surname" id="surname" maxlength="30">
<button>confirm details</button>
</form>Создавайте свой сайт с учетом ваших идей! Создайте свое профессиональное присутствие в Интернете с помощью конструктора сайтов от IONOS и воспользуйтесь опытом наших разработчиков. Просто выберите решение, которое соответствует вашим потребностям!