Label input type checkbox: — HTML: HyperText Markup Language

Leave a Comment / Разное / By /

Тег label — метка для поля ввода

Тег label задает метку для поля ввода типа input, textarea, select и так далее.

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

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

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

псевдокласс focus для продвинутого понимания фокуса).

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

Атрибуты

АтрибутОписание
for В данном атрибуте следует указывать значение атрибута id того поля ввода, к которому привязана метка label.
accesskey Задает горячую клавишу, с помощью которой можно перейти к привязаному к метке (через атрибут for) элементу формы. Подробнее см. атрибут accesskey.

Пример . Чекбокс

Давайте к флажку checkbox привяжем метку с помощью атрибута

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

<input type="checkbox"> <label for="checkbox">Я привязан к чекбоксу с id checkbox. </label>

:

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

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

<label><input type="checkbox"> метка</label>

:

Пример . Текстовое поле ввода

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

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

<input type="text" value="какой-то текст"> <label for="input1">Я привязан к инпуту с id input1. </label>

:

Доступность форм — dr.Brain

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

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

placeholder !== label

Для элементов форм атрибут label часто отсутствует. Разработчики и специалисты по разработке пользовательских интерфейсов обычно считают, что плейсхолдеры покрывают потребности конечных пользователей. Но это не так. Ведь placeholder и label — не одно и тоже.

Атрибут label или aria-label необходим для скрин-ридера, а значит он определяет возможность взаимодействия с формами людей с ограниченными возможностями.

<!-- WRONG: missing label -->
<input type="text" placeholder="enter your email">
<!-- CORRECT: option1 Use label or aria-label -->
<label for="email">Enter your email</label>
<input type="text" placeholder="enter your email">
<!-- CORRECT: option2 -->
<input type="text" aria-label="enter your email" placeholder="enter your email">

Типы полей ввода

В HTML5 очень важно правильно указывать type для элемента input.

<!-- WRONG: wrong use of the input(s)' type -->
<input type="text" placeholder="enter your mobile number">
<input type="text" placeholder="enter your password">
<!-- CORRECT: Use correct input type -->
<input type="tel" placeholder="enter your mobile number">
<input type="password" placeholder="enter your password">

Правильно указанный тип нужен для:

  1. скрин-ридера,
  2. пользователей мобильных версий ресурса,
  3. обработчиков ошибок,
  4. безопасности,
  5. корректного нативного поведения поля ввода, так type = "color" открывает палитру.

Группировка чек-боксов и радио кнопок

Группируйте check-box и radio с помощью fieldset и давайте группам имя с помощью legend.

Скрин-ридер сможет прочитать такой заголовок. В противном случае порядок взимодействия с чек-боксами и радио кнопками понятен не будет.

<!-- WRONG: Screen readers won't able to pick the "Enter your prefer meals"-->
<div>
  <h3>Enter your prefer meals</h3>
  <input type="checkbox" for="c1">
  <label>Veg</label>
  <input type="checkbox" for="c2">
  <label>Non-veg</label>
  <input type="checkbox" for="c3">
  <label>Vegan</label>
  <input type="checkbox" for="c4">
  <label>Fruit salad</label>
<div>
    
<!-- CORRECT: Use fieldset & legend to support Screen Readers-->
<fieldset>
  <legend>Enter your prefer meals</legend>
  <input type="checkbox" for="c1">
  <label>Veg</label>
  <input type="checkbox" for="c2">
  <label>Non-veg</label>
  <input type="checkbox" for="c3">
  <label>Vegan</label>
  <input type="checkbox" for="c4">
  <label>Fruit salad</label>
<fieldset>

Кнопки и ссылки

Кнопки button нужны для действий, а ссылки link необходимы для перехода по указанному адресу. И эти условия нужно понимать и соблюдать.

<!-- WRONG: link is getting used as button-->
<a href="#">Submit</a>
<!-- CORRECT: Semantic tag -->
<button>Submit</button>

При несоблюдении таких условий:

  1. будет нарушена доступность формы,
  2. возникнет необходимость создания дополнительного кода.

aria-atomic

атрибут aria-live указывает скрин-ридеру, что нужно читать только измененную часть динамического контента, в то время, как наличие атрибута aria-atomic вынудит скрин-ридер озвучить весь контент.

<!-- WRONG: total-price will not be picked by the screen readers when the price will be changed.-->
<!-- This will announce the $ 100 when it will change  -->
<div aria-live="polite">
  <span>Total Price:</span> <h3>$ 100</h3>
</div>
<!-- CORRECT: This will announce the "Total price $ 100" whenever the price will change -->
<div aria-atomic="true" aria-live="polite">
  <span>Total Price:</span> <h3>$ 100</h3>
</div>

aria-describedby

Для точного описания порядка взаимодействия с определенными элементами форм мы используем подстрочный текст или всплывающие подсказки.

Но для скрин-ридеров такой функционал недоступен. В таких случаях на помощь приходит атрибут aria-describedby.

<!-- WRONG: Additional information regarding field email will be missed by the screen readers -->
<input type="email" aria-label="Enter your email">
<p>We will use your email for marketing</p>
<!-- CORRECT: describedby -->
<input type="email" aria-label="Enter your email" aria-describedby="emailInfo">
<p>We will use your email for marketing</p>

Обязательные поля

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

Для скрин-ридеров нужно использовать атрибут aria-required.

<!-- WRONG: Only visual cue to required field -->
<label for="email">Enter your email*</label>
<input type="email" name="emailDescription" />
<!-- CORRECT: Use of required for non-visual users too -->
<label for="email">Enter your email*</label>
<input type="email" name="emailDescription" aria-required/>

Ошибки

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

Поэтому:

  1. ошибки должны находится строго в определенной части формы,
  2. при возникновении ошибки, она должна получать фокус,
  3. ошибка должна быть четко и однозначно определяться, как ошибка, в контентной части.

optgroup

Элемент optgroup позволяет группировать свойства, объединенные единым смыслом.

<!-- WRONG:No grouping of the option. -->
<select>
  <option>Chicken</option>
  <option>Fishe</option>
  <option>Spinanch</option>
  <option>onion</option>
  <option>Kale</option>
  <option>Meat</option>
</select>
<!-- CORRECT: Use optgroup to group the same fields-->
<select>
  <optgroup label="non-veg">
    <option>Chicken</option>
    <option>Fishe</option>
    <option>Meat</option>
  </optgroup>
  <optgroup label="veg">
    <option>onion</option>
    <option>Kale</option>
    <option>Spinanch</option>
   </optgroup>
</select>

focus или outline

Четкое визуальное представление порядка взаимодействия с элементами формы очень важно при использовании клавиатуры. В этом случае на первый план выходят CSS-свойствоoutline

и псевдокласс :focus.

Поэтому старайтесь избегать outline: 0. Если значение свойства outlineравно 0, необходимо использовать другие свойства, четко указывающие на элемент формы, получивший фокус ввода.

/* WRONG: Do not  turn off the outline */
*:focus{
   outline: 0;
}
/* OPTION 1: Custom focus/outline can be added */
*:focus{
    border: 1px solid pink;
    box-shadow: 0 0 10px pink
    outline: 0;
}
/* OPTION 2: customizing outline value */
*:focus{
    outline: 1px solid blue;
}

Спасибо за внимание.

Перевод статьи Neha Sharma “10 ways to improve your forms accessibility”.

Как создать флажок с кликабельной меткой

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

В этом фрагменте мы предлагаем два метода создания флажка с интерактивным ярлыком. Это можно сделать либо с помощью тега

Во-первых, давайте посмотрим, как использовать метод упаковки тега

  • Используйте тег
  • Добавьте элемент с атрибутами типа, имени и значения в теге 
 <метка>
   Текст

Теперь стилизуйте метку с помощью CSS.

  • Используйте свойства background-color, border и color.
  • Добавить отступы и поля.
  • Установите для выравнивания текста значение «по центру», а для отображения — «встроенный блок».
  • Укажите размер шрифта и свойства курсора.
 .метка {
  цвет фона: #fff;
  граница: 1px сплошная #666;
  цвет: #000;
  отступ: 10px 15px;
  выравнивание текста: по центру;
  отображение: встроенный блок;
  размер шрифта: 20px;
  поля: 15px 15px;
  курсор: указатель;
}

Давайте посмотрим окончательный код.

Пример создания флажка с интерактивным ярлыком путем заключения тега

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *