Возможный дубликат:
В формах встроенный текст-заполнитель лучше, чем метка вне каждого поля?

Есть ли какие-либо преимущества/недостатки в размещении меток за пределами текстовых полей ввода, таких как поле входа в Gmail, по сравнению с размещением их внутри (в качестве заполнителей), таких как окно входа в Twitter (кроме отсутствия поддержки последнего в старых браузерах)?

3
Community 13 Апр 2017 в 15:32

3 ответа

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

8
tblessander 11 Янв 2013 в 01:19

Обратите внимание, что с точки зрения семантики и доступности существует разница между label и placeholder.

Главное не предполагать, что заполнитель может заменить метку в поле формы.

Где это становится спорным, так это в том, как на самом деле реализовать это. До появления атрибута placeholder в HTML 5 существовало два распространенных метода:

  1. Скройте метку с помощью CSS, добавьте текст в само поле и удалите его в фокусе с помощью JS.

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

Я обычно предпочитал второй вариант, так как он казался более чистым.

Однако сегодня, в HTML 5, у нас есть фактический атрибут для этого, который называется «заполнитель». Кроме того, мы можем использовать aria-label для доступности:

https://developer.mozilla.org/en-US/docs/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

Теоретически поле с обоими этими атрибутами, установленными на текст, который вы хотите для метки, должно работать — как с точки зрения удобства использования, так и с точки зрения доступности.

Что касается того, что использовать, я обычно предлагаю всегда использовать правильный тег label и размещать его рядом с полем формы или над ним. Это самый понятный вариант для большинства пользователей и наиболее подходящий с точки зрения разметки. Кроме того, вы все еще можете использовать атрибут-заполнитель для дальнейшего уточнения, если это необходимо.

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

6
DA01 11 Янв 2013 в 01:26

Ярлыки снаружи, образец копии или руководство по заполнению внутри (исчезает при входе). Таким образом, метка «Дата рождения», но «дд/мм/гггг» внутри поля указывает на ожидаемый формат.

5
Peter 11 Янв 2013 в 01:25