Что такое placeholder html
::placeholder
CSS псевдоэлемент ::placeholder представляет собой текст placeholder (en-US) в или
Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
Синтаксис
Примеры
Красный текст
Результат
Зелёный текст
Результат
Проблемы доступности
Цветовой контраст
Контрастность
Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.
Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
Использование
Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.
Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания элемента с подсказкой.
В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.
Режим высокой контрастности Windows
Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows (en-US). Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.
Метки
Доступность форм: Проблемы с заполнителями placeholder HTML
Дата публикации: 2019-06-26
От автора: на днях я заполнял регистрационную форму онлайн-экзамена. Они попросили меня ввести мой адрес офиса, домашний адрес, рабочий телефон и домашний телефон. Я заполнил всю информацию без каких-либо проблем. Однако, когда я захотел проверить, ввел ли я все данные в правильных полях, текст «Адрес офиса» и тексты для других полей исчезли. Что мне было делать? Нужно ли повторно вводить данные в поле, чтобы убедиться, что я прав? К сожалению, это единственный способ, который отнимает много времени и расстраивает.
Атрибут placeholder HTML указывает краткую подсказку, которая описывает ожидаемое значение поля ввода (например, примерное значение или краткое описание ожидаемого формата).
Краткая подсказка отображается в поле ввода до того, как пользователь введет значение.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Атрибут placeholder работает со следующими типами ввода:
Заполнитель был введен в HTML5, и на данный момент он стал довольно важным атрибутом, который широко используется. Разработчики и дизайнеры часто хотят использовать заполнители в длинных формах, так как считают, что он более привлекателен, чем видимая метка. Это связано с тем, что он занимает меньше места на экране и лучше подходит для небольших экранов, чем короткие подсказки.
В первой части серии, посвященной доступным формам, мы рассмотрим, почему использование заполнителя не очень полезно с точки зрения доступности и как успешно использовать атрибут заполнителя.
Избегайте атрибута заполнителя
Согласно исследованию, проведенному Nielsen, с точки зрения пользовательского опыта не рекомендуется использовать заполнитель в поле формы. Потому что многих пользователей он смущает. В частности, у людей с когнитивными нарушениями, как правило, возникают проблемы с пониманием текста-заполнителя, поскольку они думают, что это предварительно заполненный текст, и они пытаются отправить форму без ввода своей конкретной информации.
Недостаточный цветовой контраст заполнителей
Цвет по умолчанию для заполнителя в поле формы — светло-серый, который часто не соответствует Критерия 1.4.3 Web Content Accessibility Guidelines (WCAG). В соответствии с WCAG SC 1.4.3 визуальное представление текста и изображений текста должно иметь контрастность не менее 4,5: 1, а разные браузеры по-разному отображают заполнитель. Чтобы заполнитель соответствовал требованиям к цветовой контрастности, необходимо использовать надлежащий CSS:
Пример кода CSS для заполнителя
Заполнитель не заменяет видимые метки
В последние годы заполнители используются для предоставления видимых меток для полей, формы, что является плохой практикой для пользователей и доступности. Это связано с тем, что заполнители исчезают, как только пользователь вводит данные в элементы управления формы, пользователь не имеет представления о том, на что ссылается поле формы. Это также относится к людям с кратковременной памятью, людям с черепно-мозговыми травмами, людям с аутизмом, людям с СДВГ и людям со слабым зрением.
Избегайте предоставления инструкций с использованием атрибута заполнителя
Инструкции помогают пользователям успешно заполнить форму. Однако, если инструкции добавляются через атрибут заполнителя, пользователь может быть не в состоянии эффективно использовать эту инструкцию. Поскольку заполнители исчезают, когда пользователь начинает заполнять форму, пользователи могут пропустить важную информацию. Например, инструкции для пароля не должны предоставляться с использованием атрибута-заполнителя.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пример синтаксиса для пароля-заполнителя
В приведенном выше примере для пароля требуется специальный символ, число, и пароль должен быть длиной 8 символов. Это может стать более сложным, если к инструкции добавится больше вариантов.
Чтобы уменьшить путаницу или вероятность ошибок, всегда предоставляйте инструкции в виде текста, который виден пользователю, и привязывайте инструкции к элементам управления формы, используя метод aria-describedby для пользователей программ чтения с экрана.
Пример синтаксиса для статической подсказки
Пароль должен быть длиной 8 символов с цифрой и специальным символом. В приведенном выше примере мы видим, что подсказка к паролю всегда видна, пока данные вводятся в элемент управления формы.
Важно отметить, что не все программы чтения с экрана и браузеры поддерживают атрибут placeholder. Если он не читается программой чтения с экрана, пользователь программы чтения с экрана может пропустить эту информацию.
Кроме того, пользователи не смогут проверить, правильно ли они ввели данные в элементы управления формой, если в качестве видимой метки используется заполнитель. Требуемая проверка является огромной когнитивной нагрузкой для всех пользователей, включая людей с ограниченными возможностями.
Существует растущая тенденция, когда заполнители используются в качестве видимых меток, но вместо заполнителей, исчезающих при вводе данных, они перемещаются выше, ниже или сбоку от элемента управления формы. Это так называемые плавающие метки. Несмотря на неоднозначное мнение различных специалистов по дизайну и доступности для плавающих меток, мы советуем протестировать их на ваших пользователях.
На мой взгляд, лучший пользовательский опыт для всех, если заполнитель используется так, как это предусмотрено в спецификации HTML. Если вы решите использовать заполнитель, его следует использовать только для коротких подсказок.
Заключение
Избегайте использования заполнителей, если это возможно
Убедитесь, что цветовой контраст заполнителя соответствует требованиям WCAG 4,5: 1.
Не предоставляйте важные инструкции с помощью атрибута заполнителя.
Предоставьте инструкции ниже поля формы; добавьте для них aria-describedby.
Если нет другого выбора, кроме как использовать заполнитель в качестве замены видимой метки, используйте один из методов плавающей метки.
Автор: Raghavendra Satish Peri
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Стилизуем placeholder при помощи CSS. Синтаксис, трюки, поддерживаемые стили в html5
Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.
Итак, начнем с примера для тех, кто не знает, что такое placeholder.
Стиль placeholder-a можно изменить с помощью такого набора css правил:
Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации placeholder-а.
В IE и старых firefox (до 18-го) placeholder считается псевдоклассом, а в новых firefox, webkit и blink – псевдоэлементом.
Смотрим, что получилось:
Нужно сказать, что поддерживаются не все возможные css свойства. Большинство современных браузеров позволяют изменить:
А если placeholder не вмещается?
Как скрыть placeholder при фокусе?
Скрывание placeholder-а происходит по-разному.
Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:
Скрываем placeholder красиво
Можно также добавить transition для появления и скрытия placeholder-a:
Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.
Атрибут ::placeholder CSS
Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:
Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.
Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:
Разница между :placeholder-shown и ::placeholder
:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.
Взгляните на диаграмму:
Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).
Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.
Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.
Элемент или класс?
В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.
IE10 поддерживает этот функционал в качестве псевдокласса, а не элемента. Во всех остальных браузерах он расценивается как псевдоэлемент.
Цвет заглушки в Firefox
Так происходит потому, что по умолчанию все « заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:
Поддержка стилей
Псевдоэлемент поддерживает следующие свойства:
Дополнительные ресурсы
Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse
Браузерная поддержка
Firefox поддерживает псевдоклассы до 18 версии. Версии 19+ поддерживают псевдоэлемент, но не класс.
Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!
Дайте знать, что вы думаете по этой теме материала в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, лайки, отклики!
Плейсхолдеры в полях формы вредны
Вкратце: Использование плейсхолдеров внутри полей формы усложняет процесс вспоминания, какую информацию необходимо было внести в поле ввода. Из-за этого становится труднее процесс проверки и исправления ошибок. Это также может создать дополнительные трудности для людей с плохим зрением или когнитивными нарушениями.
Описания и подсказки могут объяснить, что необходимо вводить внутри каждого поля, и, следовательно, улучшить заполняемость формы и повысить её конверсию. Есть много способов показать подсказки. Самая частая реализация — это вставка плейсхолдеров внутрь поля. К сожалению, тестирование на пользователях показывает, что плейсхолдеры в полях формы часто вредят юзабилити больше, чем помогают ему.
Лейблы и плейсхолдеры
Лейблы говорят пользователям, какая информация должна находиться в данном поле, и обычно располагаются вне этого поля. Текст плейсхолдера, находящийся внутри поля формы, — это дополнительная подсказка, описание или пример требуемых данных для этого поля. Эти подсказки, как правило, скрываются, когда пользователь печатает в этом поле.
Лейблы и плейсхолдеры
Плейсхолдеры, замещающие лейблы
В некоторых формах лейблы заменяются расположенным внутри текстом плейсхолдера. Это помогает уменьшить хаос на странице или сократить размер формы. Несмотря на то, что этот подход основан на хороших намерениях, наши исследования показывают, что это влечёт за собой много негативных последствий.
Худший вариант: в этом примере, текст плейсхолдера используется вместо лейбла
Ниже приводятся 7 основных причин, почему плейсхолдеры не должны использоваться, как замена для лейблов.
1. Исчезновение текста плейсхолдера напрягает кратковременную память пользователя
Если пользователь забывает подсказку, а это часто происходит, пока люди заполняют длинные формы, ему приходится удалять то, что он написал, а в некоторых случаях кликать куда-нибудь вне этого поля, чтобы текст плейсхолдера отобразился снова. В идеальном мире пользователи будут полностью сфокусированы при заполнении формы. Но в реальности пользователи могут совершать несколько действий одновременно. У них открыто несколько разных вкладок, или они могут отвлечься на пришедший email или телефонный звонок. Для сложных задач им, возможно, потребуется остановиться, чтобы найти документ или номер заказа. Из нашего исследования юзабилити мобильных устройств, стало известно, что такие пользователи также часто отвлекаются, пока работают со своими устройствами. Таким образом, важно помочь пользователям вернуться к тому месту, где они остановились.
В простых, часто используемых формах с одним или двумя полями, таких как форма поиска или входа, напряжение памяти меньше, чем в случае со сложными или редкими формами. Это связано с тем, что в простых (знакомых) формах пользователь может догадаться, что он должен ввести. Хотя даже в простой форме входа без лейблов они могут не вспомнить, что им доступно для ввода: логин или email или только логин.
2. Без лейблов пользователь не сможет проверить свою работу до отправки формы
В отсутствии лейблов пользователям становится невозможно понять, верно ли они заполнили форму. Помимо этого браузеры, автоматически заполняя поля формы, могут заполнить их неверной информацией. Если не будет лейблов или специальные инструкции перестанут отображаться, пользователям придётся проверять указанное значение, удаляя введённый ранее текст. В действительности же, многие даже не осознают, что существует вероятность ошибки, и они не будут прилагать дополнительные усилия для двойной проверки.
3. Когда появляется сообщение об ошибке, люди не знают как решить проблему
Если форма была заполнена, но нет лейблов или инструкций, находящихся вне полей формы, тогда пользователям придётся поочерёдно возвращаться к каждому полю, чтобы открыть описания и исправить ошибку.
4. Исчезновение текста плейсхолдера, когда курсор помещается в поле формы, раздражает пользователей, которые используют для навигации клавиатуру
Люди используют кнопку табуляции для быстрого перемещения от одного поля к другому, и они не останавливаются для изучения следующего поля, пока не попадут на него.
5. На поля с надписью внутри обращается меньше внимания
Изучение движения глаз показывает, что взгляд пользователей будет сконцентрирован на пустых полях. Как минимум им будет неудобно, так как они потратят больше времени на обнаружение непустых полей. В худшем же случае, полностью пропустят такое поле, а это уже потенциальная убивающая бизнес катастрофа.
6. Пользователи могут перепутать плейсхолдер с данными, которые автоматически заполнили поле
Когда в поле уже есть какой-то текст, пользователи могут не осознать, что им надо туда что-то вводить. Некоторые пользователи могут посчитать, что текст плейсхолдера является значением по умолчанию и полностью пропускают это поле.
7. Иногда пользователям приходится удалить текст плейсхолдера вручную
Иногда плейсхолдеры не исчезают, когда пользователи помещают курсор в поле. Если плейсхолдер остаётся внутри поля как редактируемый текст, пользователям придётся вручную выделять его и удалять. Это создаёт ненужную нагрузку на пользователей и увеличивает стоимость взаимодействия с заполняемой формой.
Бывает, что плейсхолдер тускнеет при размещении курсора в текстовом поле. К сожалению, такой шаблон взаимодействия достаточно редок и пользователи незнакомы с ним: некоторые до сих пор считают, что им придётся вручную удалять этот текст. Это обычно приводит к нескольким неудачным попыткам и множеству кликов до того, как они поймут, что можно начать печатать прямо по потускневшему тексту.
Текст плейсхолдера в дополнении к лейблам
Использование плейсхолдера совместно с лейблами — это шаг в правильном направлении. Лейблы вне полей формы делают важную информацию видимой всё время, в то время как текст плейсхолдера оставлен для дополнительной информации. Однако, даже при использовании лейблов размещение важных подсказок и инструкций внутри полей формы всё ещё может стать причиной одной из 7 проблем отмеченных выше, хотя и в меньшей степени. Если в некоторых полях требуется специальное описание важное для корректного заполнения формы, лучшим решением будет разместить этот текст вне поля так, чтобы он всегда был виден.
Лучше: здесь, текст плейсхолдера используется как подсказка в дополнении к лейблу
Плейсхолдеры и доступность
Последняя важная проблема, которую надо рассмотреть, заключается в том, что текст плейсхолдера в целом плох для доступности. Конечно, специальное ПО и современные браузеры улучшаются, но впереди у них ещё долгий путь. Вот три крупнейшие проблемы, связанные с доступностью:
Заключение
Чтобы не было риска получить пользователей, застрявших на заполнении форм или теряющих драгоценной время на понимании, как они работают, лучшим решением будет иметь понятные и видимые лейблы, располагающиеся вне пустых полей формы.
Самый лучший вариант: лейблы и подсказки расположены вне поля формы и всегда видны для пользователя
Подсказки и инструкции также должны быть видны постоянно и должны располагаться вне поля для ввода. Формы являются важной составляющей многих конверсионных целей, и вам стоит убедиться, что ваши пользователи могут заполнить их быстро и аккуратно.