Поиск связанных элементов label для input в JavaScript

Быстрый ответ

Для привязки HTML-метки <label> к нужному <input> используйте атрибут for. Если у вас имеется <input id="inputID">, соответствующую метку можно отыскать так:

let label = document.querySelector('label[for="inputID"]');

Либо можно воспользоваться этим коротким решением на jQuery:

let label = $('label[for="inputID"]');

Основное условие — наличие у <input> уникального id, которое должно соответствовать атрибуту for в метке.

Тонкая настройка связи метки и поля ввода

Использование клавиатурных событий

Событие onkeyup в JavaScript дает возможность улучшить взаимодействие пользователя с формой. Например, можно программно добавить анимацию или подсветку метки при наборе текста в поле:

// В момент, когда пользователь вбивает что-то в объект ввода, подсвечиваем его метку!
document.getElementById('inputID').onkeyup = function() {
  let label = document.querySelector('label[for="inputID"]');
  label.style.backgroundColor = 'yellow';
};

Подробнее об этом расскажет наш спикер на видео

Программное определение меток

document.querySelectorAll или .getElementById — это JavaScript-методы, которые вы можете использовать для поиска меток. Они особенно полезны, когда вы работаете с разноплановыми формами, занимаетесь повышением доступности веб-страницы и выводите пользователю информацию об ошибках валидации прямо возле метки input.

Работа с динамическими формами

Если элементы ввода и метки динамически добавляются или удаляются из формы, может быть полезно использовать функцию для автоматического обновления связей. Чтобы найти метку в одной области с меткой input, можно использовать .parentElement или .closest (в jQuery).

Визуализация

Представляйте каждый HTML-элемент ввода как отдельный сундук (🧰), каждую метку — как ключ (🔑), подходящий к этому сундуку.

Вот элемент ввода (🧰): <input id="treasure" />
И вот метка (🔑): <label for="treasure">Откройте сундук с сокровищами</label>

Сопоставление ключа и сундука образует карту сокровищ (🗺️) вашей формы:

🔑 ➡️ 🧰

Детальный анализ меток

Исследование атрибута htmlFor

document.getElementsByTagName('LABEL') возвращает все метки на странице. Обходя результаты этого метода, найдите нужную вам метку, у которой htmlFor совпадает с id input-элемента.

Применение лучших практик привязки

Одним из простых способов является перемещение элементов ввода внутрь меток:

<label>Имя пользователя:
  <input id="username" name="username" type="text">
</label>
// Но и бывший голубиный почтальон вам скажет: "Заблокируйте, храните в надежном месте!"

Динамическое управление метками

Можно динамически скрывать или показывать метки с помощью JavaScript, что позволяет создавать интерактивные формы:

let inputs = document.querySelectorAll('input');
inputs.forEach(input => {
  input.onfocus = function() {
    let label = document.querySelector(`label[for="${input.id}"]`);
    label.style.display = 'inline';
  };

  input.onblur = function() {
    let label = document.querySelector(`label[for="${input.id}"]`);
    label.style.display = 'none';
  };
});
// Теперь меня видно, теперь — не видно!

Повышение доступности на практике

Работа с привязанными и непривязанными метками

Проверьте все input-элементы и ассоциированные с ними метки на соответствие стандартам доступности и для улучшения пользовательского взаимодействия.

Динамическое обновление связей меток

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

Доступность в сложных формах

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

Использование CSS-псевдоэлементов

Вы можете добавить к меткам визуальные индикаторы или отметки о необходимости заполнения поля, используя CSS-псевдоэлементы вроде ::before и ::after.

Полезные материалы

1. <label>: Элемент Label – HTML: Язык гипертекстовой разметки | MDN — авторитетный источник по тегу <label>.
2. HTML-тег <label> | W3Schools — понятные уроки c примерами.
3. Красивые доступные формы – A List Apart — описывает лучшие практики использования тега <input>.
4. Следует ли размещать элементы ввода внутри меток? – Stack Overflow — дискуссия о правильном размещении меток и полей для ввода.
5. ::before / ::after | CSS-Tricks — руководство по CSS-псевдоэлементам для меток.
6. .closest() | jQuery API Documentation — документация по методу jQuery .closest() для работы с DOM.
7. Метод Document: querySelector() – Web APIs | MDN — руководство по использованию querySelector() для работы с элементами вроде меток и полей для ввода.