Input placeholder не работает

О кроссбраузерности placeholder

Теория

placeholder — атрибут, который отображает текст-подсказку в поле формы и который пропадает автоматически при получении поле фокуса. Для браузеров, поддерживающие этот атрибут, отпадает необходимость использования Javascript-решений для очистки поля. Но разработчики столкнулись с некоторыми проблемами при использовании placeholder.

Проблема №1 — оформление placeholder

По умолчанию браузеры отображают текст подсказки серым цветом и шрифт (имя, размер, стиль) соответствует заданным для самого поля. Но допустим нам нужно оформить текст подсказки как-то не обычно, например, сделать его курсивом и красным цветом. Для этого используем следующий код:

Демо пример. Чтобы placeholder появился в браузерах, которые нативно его не поддерживают (например, IE6-9, Firefox версий ниже 3.7), можно воспользоваться плагином jQuery-Placeholder.

Что не поддается

• задать свои стили подсказкам в Opera 11 (как это обойти я пока не нашел);
• сделать отступы подсказкам: отступы от границ полей для placeholder такие же как и для value. Можно пробовать это обойти правилами вроде:

Проблема № 2 — не отображается placeholder

Даже те браузеры, которые поддерживают подсказки в полях, не для всех типов полей их выводят. Таблица отображения placeholder в зависимости от типа поля и браузера:

Firefox 4.0	Opera 11	Chrome 11	Safari 5
input type=text	+	+	+	+
input type=password	+	+	+	+
input type=tel	+	+	+	+
input type=email	+	+	+	+
input type=number	+	+	—	+
input type=url	+	+	+	+
input type=search	+	+	+	+
input type=date	+	—	—	+
input type=color	+	—	—	+
textarea	+	—	+	+

Для одних полей объяснимо почему нет placeholder (вроде color). Для других спорно (date). Для третьих вообще непонятно почему нет (textarea, number). Бороться с этим придется пока то ли старыми методами, то ли как-то еще. Решать думаю стоит в каждом конкретном случае. Так же я пока особо не радовался на счет отображения везде подсказок в Firefox и Safari: они просто еще не поддерживают многие типы полей.

Выводы

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

Во-вторых, дизайнеру хоть иногда следует консультироваться с frond-end девелопером, о возможности реализации той или иной фичи.

В-третих, если уже приходится работать с такой формой, остается или делать костыли для некоторых браузеров, чтобы не потерять новых возможностей форм, или отказываться от новых типов, а значит и удобства для некоторых пользователей в пользу «эстетической красоты».

Источник

Доступность форм: Проблемы с заполнителями 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 свойства. Большинство современных браузеров позволяют изменить:

• font (и сопутствующие свойства)
• background (и сопутствующие свойства)
• color
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• text-indent
• text-overflow
• opacity

А если placeholder не вмещается?

Иногда поля для ввода текста сокращаются по ширине из-за особенностей лейаута, в частности на мобильных девайсах. В этом случае длинный текст placeholder-а будет некрасиво обрезан. Чтобы предотвратить это, вы можете использовать text-overflow: ellipsis . Такой синтаксис будет работать во всех новых браузерах.

Как скрыть placeholder при фокусе?

Скрывание placeholder-а происходит по-разному.

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

Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:

Скрываем placeholder красиво

Можно также добавить transition для появления и скрытия placeholder-a:

Надеюсь, вам это пригодится. Пишите замечания и предложения в комментариях.

Источник

Почему не меняется шрифт для placeholder`а?

Использую sass, хочу стилизовать input

Для вёрстки воспользовалась Google Fonts, выбрала там шрифт Raleway, выбрала нужные начертаний и вставила сгенерированную ссылку. Супер, шрифт работает. Ставлю его на input, то, что ввожу (value) выглядит так, как мне надо, но не плейсхолдер. В первый раз с таким сталкиваюсь. И это при том, что второй шрифт на проекте подхватывается плейсхолдером. Не могу понять в чём причина. Мб потому что шрифт не локальный? Не понимаю, подскажите пожалуйста.

• Вопрос задан более трёх лет назад
• 743 просмотра

::placeholder < /* Chrome, Firefox, Opera, Safari 10.1+ */
font-size: 14px
font-family: «Raleway», sans-serif !important
font-weight: 400
>

:-ms-input-placeholder < /* Internet Explorer 10-11 */
font-size: 14px
font-family: «Raleway», sans-serif !important
font-weight: 400
>

::-ms-input-placeholder < /* Microsoft Edge */
font-size: 14px
font-family: «Raleway», sans-serif !important
font-weight: 400
>

input::placeholder < /* Chrome, Firefox, Opera, Safari 10.1+ */
font-size: 12px;
font-family: «Montserrat», sans-serif !important;
font-weight: 500;
>

input:-ms-input-placeholder < /* Internet Explorer 10-11 */
font-size: 12px;
font-family: «Montserrat», sans-serif !important;
font-weight: 500;
>

input::-ms-input-placeholder < /* Microsoft Edge */
font-size: 12px;
font-family: «Montserrat», sans-serif !important;
font-weight: 500;
>
Не забывайте про ;

Источник

Атрибут ::placeholder CSS

Псевдоэлемент ::placeholder color ( в некоторых случаях псевдокласс ) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : .

Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:

Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.

Как и в случае с любым псевдоэлементом, его вы можно применять к определенным элементам следующим образом:

Разница между :placeholder-shown и ::placeholder

:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.

Взгляните на диаграмму:

Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .

Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него родительским элементом ( например, можно изменять font-size ).

Обратите внимание: :placeholder-shown – псевдокласс ( элемент в конкретном состоянии ), а ::placeholder – это псевдоэлемент ( видимая часть, которая находится не в DOM ). Отличаются они одинарными и дойными кавычками.

Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.

Элемент или класс?

В этом плане input placeholder color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.

Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.

IE10 поддерживает этот функционал в качестве псевдокласса, а не элемента. Во всех остальных браузерах он расценивается как псевдоэлемент.

Цвет заглушки в Firefox

Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :

Так происходит потому, что по умолчанию все « заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится следующая строка кода:

Попробуйте открыть это демо в браузере Firefox .

Поддержка стилей

Псевдоэлемент поддерживает следующие свойства:

• font properties ;
• color ;
• background properties ;
• word-spacing ;
• letter-spacing ;
• text-decoration ;
• vertical-align ;
• text-transform ;
• line-height ;
• text-indent ;
• opacity ;

Дополнительные ресурсы

Документация MDN
Документация IE
Развёрнутая статья на блоге Treehouse

Браузерная поддержка

Здесь имеется в виду как нативная поддержка CSS input placeholder color , так и поддержка, реализуемая с помощью префиксов.

Chrome	Safari	Firefox	Opera	IE	Android	iOS
4+	5+	4+	15+	10+	Любой	Любой

Firefox поддерживает псевдоклассы до 18 версии. Версии 19+ поддерживают псевдоэлемент, но не класс.

Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!

Источник