что такое 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 при помощи 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 проблем отмеченных выше, хотя и в меньшей степени. Если в некоторых полях требуется специальное описание важное для корректного заполнения формы, лучшим решением будет разместить этот текст вне поля так, чтобы он всегда был виден.
Лучше: здесь, текст плейсхолдера используется как подсказка в дополнении к лейблу
Плейсхолдеры и доступность
Последняя важная проблема, которую надо рассмотреть, заключается в том, что текст плейсхолдера в целом плох для доступности. Конечно, специальное ПО и современные браузеры улучшаются, но впереди у них ещё долгий путь. Вот три крупнейшие проблемы, связанные с доступностью:
Заключение
Чтобы не было риска получить пользователей, застрявших на заполнении форм или теряющих драгоценной время на понимании, как они работают, лучшим решением будет иметь понятные и видимые лейблы, располагающиеся вне пустых полей формы.
Самый лучший вариант: лейблы и подсказки расположены вне поля формы и всегда видны для пользователя
Подсказки и инструкции также должны быть видны постоянно и должны располагаться вне поля для ввода. Формы являются важной составляющей многих конверсионных целей, и вам стоит убедиться, что ваши пользователи могут заполнить их быстро и аккуратно.