Повышаем удобство использования html форм путем правильного использования placeholder-а
Правильное и неправильное использование placeholder-а
Placeholder используется в качестве атрибута практически в каждой веб-форме, и не стоит забывать о нем ни одному дизайнеру или разработчику. Легче всего подать справочную информацию в виде короткой заметки непосредственно в полях сложной формы, или даже заменить таким образом метки (label). Другое дело, что неправильное использование текстового input placeholder-а вызывает много проблем с удобством использования.
В этой статье будут показаны примеры неправильного использования placeholder-ов, и предложены уместные альтернативы.
Placeholder как метка
Разместите пояснение над полем ввода вместо того, чтобы использовать placeholder в качестве пояснения
В целях уменьшения размеров формы или устранения визуального «шума», дизайнеры используют текстовый form placeholder как пояснение к полю ввода.
Это, конечно, красиво, но нагружает кратковременную память – стоит лишь пользователю поставить курсор в поле и/или начать набор, как placeholder пропадает, и для того, чтобы его увидеть, нужно удалить уже набранное содержимое.
Посему пояснение лучше разместить над полем ввода. Одно пустое поле ввода без информации после постановки курсора вводит пользователя в ступор – становится непонятно, что делать дальше, ибо подсказок нет.
Placeholder в качестве примера
Вынесите пример вводимого текста под поле ввода, а не используйте его как placeholder
Пример того, что необходимо ввести в поле форму, помогает пользователю понять, что от него хотят. Но если использовать шаблонный текст как placeholder, это создаст некоторые трудности при вводе – текст примера исчезнет из центра внимания, пользователь немного застопорится на вводе и забудет, что же требовалось указать.
Поэтому в качестве альтернативы можно разместить вспомогательный текст под полем ввода.
Placeholder в качестве подсказки
Placeholder не стоит делать в качестве подсказки к полю
Часто placeholder используют для указания дополнительной информации о том, что нужно ввести в поле. Это тоже ошибочно – как по причинам, указанным выше, так и из-за количества текста в placeholder-е. Начинающие дизайнеры и разработчики часто ошибаются, используя placeholder как достаточно длинное текстовое предложение со справочной информацией. Благо дело, этому способу есть много альтернатив, три из которых указаны выше.
Placeholder как заголовок поля
Используйте label-ы как дополнительные заголовки полей, а не placeholder-ы
Сделать дополнительные заголовки в виде placeholder-ов – идея заманчивая, но лучше повысить простоту и удобство использования формы путем применения каких-то альтернатив вроде обычного label-а.
Обычно форма выглядит куда удобнее и красивее, если placeholder-ы не используются и/или заменены на указанные выше альтернативы. Но если они необходимы…
Placeholder-ы должны быть менее заметны, чем вводимый текст
Более светлый цвет делает текст placeholder—a менее отвлекающим и отличает его от уже введенного текста.
Как известно и понятно, пользователи заполняют пустые поля – это логично, ведь там где пусто, там нужно заполнить. Но в некоторых случаях placeholder ставить необязательно, так как он путает посетителя, и особенно – если он того же цвета, что и основной вводимый текст, ведь легко запутаться и подумать, что текст уже введен.
Placeholder должен быть виден на любом экране
Если цвет placeholder-а слишком светлый, он может быть незаметным на некоторых экранах.
Placeholder вызывает неудобства и в том случае, если его цвет слишком светлый, ибо в таком случае он плохо читается на некоторых экранах, и пользователю приходится напрягать зрение.
Placeholder не должен исчезать при постановке курсора в поле ввода
Оставляйте
Исчезновение placeholder-а дополнительно нагружает кратковременную память, потому как теряется фокус на необходимую информацию.
Как показывает практика, форма ввода более удобна без использования placeholder-ов.
Если эта статья показалась вам стоящей, нажмите «Like» ниже, дабы другие тоже могли найти для себя что-то интересное.
Источник: uxdesign.cc
Стилизуем placeholder при помощи CSS
Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea.
Итак, начнем с примера для тех, кто не знает, что такое placeholder.
<input type="text" placeholder="Оставьте сообщение здесь">
Стиль placeholder-a можно изменить с помощью такого набора css правил:
::-webkit-input-placeholder {color:#c0392b;} ::-moz-placeholder {color:#c0392b;}/* Firefox 19+ */ :-moz-placeholder {color:#c0392b;}/* Firefox 18- */ :-ms-input-placeholder {color:#c0392b;}
Выглядит страшновато, не правда ли? Дело в том, что этого до сих пор нет в стандартах. Каждый браузер по-своему реализовал поддержку стилизации 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. Такой синтаксис будет работать во всех новых браузерах.
input[placeholder] {text-overflow:ellipsis;}
input::-moz-placeholder {text-overflow:ellipsis;}
input:-moz-placeholder {text-overflow:ellipsis;}
input:-ms-input-placeholder {text-overflow:ellipsis;}
Как скрыть placeholder при фокусе?
Скрывание placeholder-а происходит по-разному.
- в некоторых браузерах при получении фокуса инпутом
- в других браузерах при наличии хотя бы одного введенного символа
Мне больше нравится первый вариант. Для того, чтобы задать такое поведение во всех браузерах, поддерживающих placeholder, определим следующие css правила:
:focus::-webkit-input-placeholder {color: transparent}
:focus::-moz-placeholder {color: transparent}
:focus:-moz-placeholder {color: transparent}
:focus:-ms-input-placeholder {color: transparent}
Скрываем placeholder красиво
/* плавное изменение прозрачности placeholder-а при фокусе */
.input1::-webkit-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1::-moz-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:-moz-placeholder {opacity: 1; transition: opacity 0.
3s ease;}
.input1:-ms-input-placeholder {opacity: 1; transition: opacity 0.3s ease;}
.input1:focus::-webkit-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus::-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-moz-placeholder {opacity: 0; transition: opacity 0.3s ease;}
.input1:focus:-ms-input-placeholder {opacity: 0; transition: opacity 0.3s ease;}
/* сдвиг placeholder-а вправо при фокусе*/
.input2::-webkit-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2::-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:-moz-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:-ms-input-placeholder {text-indent: 0px; transition: text-indent 0.3s ease;}
.input2:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0. 3s ease;}
.input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
/* сдвиг placeholder-а вниз при фокусе*/
.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0. 5s ease;}
.input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
3s ease;}
.input2:focus::-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-moz-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
.input2:focus:-ms-input-placeholder {text-indent: 500px; transition: text-indent 0.3s ease;}
/* сдвиг placeholder-а вниз при фокусе*/
.input3::-webkit-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3::-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-moz-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:-ms-input-placeholder {line-height: 20px; transition: line-height 0.5s ease;}
.input3:focus::-webkit-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus::-moz-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
.input3:focus:-moz-placeholder {line-height: 100px; transition: line-height 0.
5s ease;}
.input3:focus:-ms-input-placeholder {line-height: 100px; transition: line-height 0.5s ease;}
Оригинал статьи был взят с сайта html5.by
- 2.87
- 1
- 2
- 3
- 4
- 5
Голосов: 1114 | Просмотров: 7593
HTML-заполнитель для ввода Атрибут
❮ HTML-тег
Пример
Поле ввода телефона с текстом-заполнителем:
Попробуйте сами »
Определение и использование
Атрибут заполнитель указывает краткую подсказку, описывающую ожидаемое значение
поля ввода (например, образец значения или краткое описание ожидаемого формата).
Короткая подсказка отображается в поле ввода перед вводом пользователем ценить.
Примечание: Атрибут заполнителя работает со следующими типами ввода: текст, поиск, URL-адрес, телефон, электронная почта и пароль.
Поддержка браузера
Числа в таблице указывают первую версию браузера, которая полностью поддерживает атрибут.
| Атрибут | |||||
|---|---|---|---|---|---|
| заполнитель | 10,0 | 10,0 | 4,0 | 5,0 | 11,0 |
Синтаксис
Значения атрибутов
| Значение | Описание |
|---|---|
| текст | Указывает короткую подсказку, описывающую ожидаемое значение поля ввода |
❮ Тег HTML
ВЫБОР ЦВЕТА
Лучшие учебники
Учебное пособие по HTMLУчебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебник по Python
Учебник по W3.
CSS Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
900 92 Лучшие примеры Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
ФОРУМ | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.
Заполнитель для ввода HTML | Изучите примеры заполнителя ввода HTML
Заполнитель ввода HTML работает как подсказка к данному элементу, которая помогает определить требуемое значение данного поля ввода. Это можно использовать для ввода текстового поля или текстовой области до того, как пользователь фактически введет свой ввод. Он выбирает значение из соответствующего элемента селектора, включенного в качестве текста-заполнителя, и отображает его как предложение, когда пользователь вводит ввод в поле ввода. Размещение заполнителей в поле ввода позволяет пользователю легко ввести требуемое значение в данное поле ввода. Таким образом, это сводит к минимуму усилия пользователя. По сути, заполнитель светло-серого цвета, но мы также можем изменить его цвет, используя некоторые свойства CSS.
Синтаксис:
Давайте посмотрим синтаксис заполнителя, как именно он будет использоваться в поле ввода.
Атрибут для элементов