Чи може поле введення мати дві мітки?

134

У Марії була невелика форма, і її поля там були позначені просто так.
Кожного разу, коли помилка прокрадається, вона буде заплутана.

У мене є мітка для кожного поля введення ... досить стандартна справа. Після перевірки форми я показую корисний маленький абзац у верхній частині форми, в якому детально описується, яка інформація відсутня чи неправильна.

Чи можу я мати дві мітки для одного поля введення? Один у власній формі, а другий у тексті нагадування про підтвердження? Чи є причина, що я не повинен цього робити?

html forms labels

— aslum
джерело

Ви спробували, що трапляється? Якщо це працює, я не вірю, що це може завдати шкоди ні вашій формі, ні сторінці. І ви отримаєте плюс, оскільки користувач зможе натиснути на помилку перевірки та отримати фокус на правильному полі.

— Феліпе Кіпріано

Я не пробував цього, але, мабуть, це стане можливим. Але я не рекомендую його використовувати, оскільки мітка визначає, для чого це поле, повідомлення про помилку не відповідає. Тому я не повинен використовувати мітку для попереджень перевірки.

— Гвідо Хендрікс

Це загальне питання дизайну та зручності користувальницького інтерфейсу?

— jball

Так. Це "працює" ... але чи є причина, що це поганий дизайн? Я здогадуюсь, що це може бути з причин доступності, але для звичайного користувача я думаю, що можливість натиснути на повідомлення про помилку і перенести його в поле зіпсоване полегшить ситуацію ... Я просто не знаю, чи буде заплутати «читачів для людей із вадами зору» тощо.

— aslum

У деяких випадках простіше помістити свій контроль і текст всередині одного label. Ви навіть можете опустити forта idатрибути. Специфікація називає цю неявну асоціацію.

— rybo111

Відповіді:

158

Я припускаю, що це питання стосується форм HTML. З специфікації :

Елемент LABEL може використовуватися для приєднання інформації до елементів управління. Кожен елемент LABEL пов'язаний з точно одним контролем форми.

Таким чином, на кожен елемент управління можна посилатися декількома мітками, але кожна мітка може посилатися лише на один елемент управління. Тож якщо є сенс мати другу мітку для елемента керування (а в ситуації, яку ви описуєте, це є), сміливо додайте другу мітку.

— Джеймс Самнерс
джерело

Це справді більше питання юзабіліті / доступності, ніж HTML. Html працює.

— aslum

Усі ми повинні використовувати тільки дійсний код, інакше в майбутньому все може зламатися, або для когось іншого, або з якоюсь бібліотекою JS чи будь-яким іншим.

— Шернандес

Правильна відповідь - це Роб. Це рішення працює для прозорливих користувачів і виходить з ладу у деяких читачів екранів. Аслум, здогадавшись, що ви прийняли відповідь юзерів вище, перш ніж Роб подав свою відповідь.

— клітка брязкальця

@AvramLavinsky ні, це правильна відповідь на "чи може поле мати дві мітки?" Специфікація досить чітка. Як клієнти вирішують інтерпретувати, що їм належить. Ваше посилання на "aria-описуваний", який посилається на "aria-labeledby", - це спосіб "виправити" розбиті читачі екрану.

— Джеймс Самнерс

Смішний MDN говорить: «Один вхід може бути пов’язаний з кількома мітками». developer.mozilla.org/en-US/docs/Web/HTML/Element/label

— 2540625

HTML є законним, і він працює (натискання будь-якої мітки перенесе фокус на поле, про яке йдеться).

Трохи складніше робити правильно з міркувань доступності.

Це не "загальний" підхід, і через те, що принаймні один загальний зчитувач екрана (я тестував NVDA) зчитує першу мітку лише тоді, коли ви зміщуєте фокус у полі - він ігнорує будь-які додаткові мітки для того ж поля.

Отже, якщо ваше повідомлення про помилку знаходиться вгорі сторінки, сліпий або низькозорий користувач, який вкладає поля, почує лише повідомлення про помилку під час посадки на поле, про яке йдеться, а не "реальну" мітку поруч.

Отже, якщо ви правильно сформулюєте повідомлення про помилку, це може бути хорошою справою (безумовно, кращою, ніж просто виділити червоне поле, яке не підтверджує!).

— Роб Уілан
джерело

Це правильно, і правильний спосіб кодувати це через атрибут, описаний aria

— клітка rattler

Так, ви можете мати кілька точок міток на одному і тому ж контролі форми. Це цілком законно :

<label for="fname">First name</label>
<label for="fname">Enter your info</label>
<label for="fname">Why not a third label</label>
<input type="text" id="fname" name="fname">

Це лише приклад ... зазвичай ви обмотаєте ці рядки однією міткою, оскільки вони близькі.

— Герт Гренадер
джерело

+1 для посилання на документ, де чітко зазначено, що "Більше одного LABELможе бути пов'язано з одним і тим же елементом управління, створюючи кілька посилань через forатрибут".

— alexg