Как в select поставить placeholder

Введение

Веб-формы являются неотъемлемой частью многих веб-сайтов. Они позволяют пользователю ввести те или иные данные, которые затем отправляются на сервер или обрабатываются на стороне клиента, например, для изменения интерфейса.

Веб-формы также часто называют HTML-формами. Их проектирование осуществляется с помощью элементов управления форм (текстовых полей, выпадающих списков, кнопок, чекбоксов и т.д.) и некоторых дополнительных элементов, которые используются для придание форме определённой структуры.

Стилизация формы выполняется через CSS. В этом руководстве остановимся и подробно рассмотрим различные варианты оформления её текстовых полей.

Исходные коды примеров расположены на GitHub в папке text-field проекта «ui-components».

FAQ

Select — for, предложение (transact-sql)

Если у плейсхолдера столько минусов, зачем его использовать? Несмотря на минусы, подсказка может оказаться полезной и даже незаменимой

Важно качественно адаптировать плейсхолдер с точки зрения юзабилити, учесть дизайн и ясность запрашиваемой информации. Тогда плейсхолдер будет полезен для пользователя и владельца ресурса

Чем отличается плейсхолдер от лейбла? Лейбл находится снаружи строки для заполнения, а плейсхолдер – внутри. В чём опасность использования плейсхолдера? Неправильно сконструированный плейсхолдер может снизить конверсию форм в заявки. Пользователь может забыть подсказку, потому что она исчезнет. Также заполняющий человек может подумать, что поле уже заполнено, приняв подсказку за автозаполнение.

Плейсхолдеры и доступность

Сss свойство background-image

Последняя важная проблема, которую надо рассмотреть, заключается в том, что текст плейсхолдера в целом плох для доступности. Конечно, специальное ПО и современные браузеры улучшаются, но впереди у них ещё долгий путь. Вот три крупнейшие проблемы, связанные с доступностью:

Светло-серый цвет текста плейсхолдера по умолчанию имеет слабый контраст по сравнению с цветом большинства фонов. Для пользователей со зрительным нарушением слабый контраст цвета делает такой текст сложным для восприятия. Поскольку не все браузеры позволяют изменить стиль текста плейсхолдера, используя CSS, это остаётся важным моментом.
Пользователи с когнитивными или двигательными нарушениями сильнее обременены. Как мы уже видели, у всех пользователей могут быть проблемы с плейсхолдерами: исчезающие плейсхолдеры увеличивают нагрузку на память; постоянные затемнённые плейсхолдеры вызывают замешательство, когда выглядят кликабельными, но таковыми не являются, и плейсхолдеры, которые не исчезают, требуют больше действий с клавиатурой или мышкой для их удаления. Эти сложности имеют большее значение для людей с когнитивными или двигательными нарушениями.
Не все средства для чтения с экрана озвучивают текст плейсхолдера. Слепые пользователи или пользователи с нарушением зрения могут полностью пропустить подсказку, если их ПО не озвучивает содержимое плейсхолдера.

Подытожим наши попытки

Helm делает изменения наименее инвазивным способом, поэтому любое изменение на уровне образа приложения в Docker Registry не приведёт к обновлению: после выполнения команды ничего не произойдёт.
Ключ используется для восстановления проблемных релизов и не связан с принудительным обновлением.
Ключ принудительно обновит приложения, но сделает это вандальным способом: резко выключит все контейнеры. От этого пострадают пользователи, на проде так делать не стоит.
Напрямую вносить изменения в кластер Kubernetes с помощью команды не надо: нарушим консистентность, а поведение будет отличаться в зависимости от версии Helm.
С выходом новой версии Helm появилось много нюансов. Issues в репозитории Helm описаны понятным языком, они помогут разобраться в деталях.
Добавление изменяемой аннотации в чарт сделает его более гибким. Это позволит выкатывать приложение правильно, без простоя.

Свойство css text-decoration

Другие ссылки по теме:@Kubernetes ConferenceвидеоВокруг Kubernetes в Mail.ru Group

CSS:

.placeholder-form {
box-sizing: border-box;
width: 320px;
margin: 20px auto;
}
.placeholder-container {
position: relative;
width: 100%;
margin-bottom: 20px;
}
.placeholder-container input {
background-color: #FFF;
border: 2px solid #BFE2FF;
box-sizing: border-box;
color: #000;
font-size: 16px;
line-height: 16px;
height: 50px;
outline: 0;
padding: 0 20px;
width: 100%;
}
.placeholder-container label {
color: #000;
font-family: Verdana, sans-serif;
background-color: #FFF;
font-size: 16px;
line-height: 16px;
padding: 5px 10px;
pointer-events: none;
position: absolute;
transition: all 200ms;
top: 12px;
left: 10px;
background-color: #FFF;
}
.placeholder-container input:focus + label,
.placeholder-container input:not(:placeholder-shown) + label{
top: -10px;
left: 10px;
font-size: 11px;
background-color: #BFE2FF;
padding: 2px 10px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

.placeholder-form {

box-sizingborder-box;

width320px;

margin20pxauto;

}

.placeholder-container {

positionrelative;

width100%;

margin-bottom20px;

}

.placeholder-container input {

background-color#FFF;

border2pxsolid#BFE2FF;

box-sizingborder-box;

color#000;

font-size16px;

line-height16px;

height50px;

outline;

padding20px;

width100%;

}

.placeholder-container label {

color#000;

font-familyVerdana,sans-serif;

background-color#FFF;

font-size16px;

line-height16px;

padding5px10px;

pointer-eventsnone;

positionabsolute;

transitionall200ms;

top12px;

left10px;

background-color#FFF;

}
.placeholder-container input:focus + label,

.placeholder-container input:not(:placeholder-shown) + label{

top-10px;

left10px;

font-size11px;

background-color#BFE2FF;

padding2px10px;

}

Убираем placeholder при нажатии на поле

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

  :focus::-webkit-input-placeholder {opacity:0;}/* webkit */
  :focus::-moz-placeholder          {opacity:0;}/* Firefox 19+ */
  :focus:-moz-placeholder           {opacity:0;}/* Firefox 18- */
  :focus:-ms-input-placeholder      {opacity:0;}/* IE */

Скрывать плейсхолдер при форкусе можно по разному, например, плавно изменяя прозрачность или цвет. А можно настроить и css анимацию, когда подсказка будет плавно уезжать за пределы поля. Всё это возможно благодаря CSS, но большого смысла я в этом не вижу, так как кроссбраузерность таких прелестей будет страдать, а пользы от этих эффектов практически никакой.

JavaScript

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Features

Placeholders.js works on both input and textarea elements. It only requires a
single line of HTML. It does its best to simulate native styles, and
exposes a class name so you can style the placeholder as you choose.

It works for elements added to the page by JavaScript, and also for placeholder
attributes that are changed by a script sometime after page load, and it makes sure that placeholder
text isn’t submitted as form data — a common issue with other placeholder solutions.

It works in a massive range of browsers, including Internet Explorer 6, and it does it
without any dependencies, so there’s no need to include jQuery if you don’t want to! What’s
more, it manages to do all this in just 4kB of JavaScript.

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

Изменение цвета placeholder

Браузеры на разных движках по разному отображают плейсхолдер. Чаще всего это чёрный текст с прозрачностью, что в итоге смотрится как серый. Чтобы изменить цвет и прозрачность необходимо в CSS стилях к элементам ввода указывать дополнительные директивы для движков браузеров. Изменим цвет на красный без прозрачности.

<style>
  ::-webkit-input-placeholder {color:#f00; opacity:1;}/* webkit */
  ::-moz-placeholder          {color:#f00; opacity:1;}/* Firefox 19+ */
  :-moz-placeholder           {color:#f00; opacity:1;}/* Firefox 18- */
  :-ms-input-placeholder      {color:#f00; opacity:1;}/* IE */
</style>

<input type="text" placeholder="Начните вводить текст" value="" />

Если не указать «opacity», то цвет в браузерах, поддерживающих прозрачность, будет розовым. Так же можно указать для разных полей разные цвета. Для этого используйте классы.

 .input-1::-webkit-input-placeholder { color:red; }
 .input-2::-webkit-input-placeholder { color:green; }
 ...
 и.т.д.

Что делать с особенностями плейсхолдеров

Есть выход из ситуации – текст-заполнитель стоит разместить между лейблом и полем для ввода. Такое решение позволит решить сразу несколько проблем. Браузер будет воспринимать подсказку как обычный текст, поэтому переведёт её на другой язык, если такая необходимость появится. А блок для заполнения будет пустым, поэтому неопытный пользователь не решит, что он уже заполнен.

Текст не должен исчезать во время заполнения, тогда пользователю не придётся вспоминать, что от него прежде требовалось, и удалять уже введённые данные для повторного появления подсказки. Необходимо стилизовать плейсхолдер с учётом дизайна всего ресурса, учесть цвета и контраст

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

Учитывая вышеописанные моменты, можно сделать вывод, что данный вариант использования плейсхолдера – оптимальный. Подсказка окажется полезной для людей и сразу снимет возможные вопросы. Что значит – пользователю не придётся обращаться в службу поддержки или покидать ресурс в поисках более удобного сайта. При этом текст подсказки не будет исчезать, его всегда будет хорошо видно.

Preocupaciones por la accesibilidad

Contraste de color

El texto temporal generalmente tiene un color más claro para indicar que es una sugerencia para el tipo de entrada que será válido, y no es una entrada real de cualquier tipo.

Es importante asegurarse que el radio de contraste entre el color del texto provisional y el fondo de la entrada es lo suficientemente alto para que las personas que experimenten condiciones de visión baja sean capaces de leer el texto mientras también asegurarse que hay diferencia suficiente entre el color del texto temporal y el color del texto de entrada para que los usuarios no confundad el texto provisional con la información de ingreso.

El radio del color de contraste es determinado al comparar la luminosidad entre dos colores. Para cumplir las actuales Pautas de Accesibilidad para el Contenido Web (WCAG), un radio de 4.5:1 es requerido para el contenido de un texto y 3:1 para textos más grandes como encabezados. Un texto grando es definido como 18.66px o mayor en negritas; o 24px o mayor.

WebAIM: Comprobador de contraste de color
Entendiendo críterios exitósos 1.4.3 | W3C Entendiendo WCAG 2.0

Usabilidad

Un texto temporal con suficiente contraste puede ser interpretado como una entrada. El texto provisional podría desaparecer cuando una persona ingresa contenido en un elemento . Ámbas circunstancias pueden interferir con el correcto llenado de un formulario, especialmente para personas con dificultades cogniticas.

Un acercamiento alternativo para proveer información provisional es incluirla afuera del campo de entrada en proximidad visual, entonces usar para programáticamente asociar la entrada con su sugerencia.

Con esta implementación, el contenido de la sugerencia, esta disponible incluso cuando información es ingresada en el campo de entrada, y la entrada aparece libre de una entrada preexistente cuando la página ha cargado. Muchas de las tecnologías de lectores de pantalla usan para leer la sugerencia después de que la etiqueta de la entrada de texto hay sido anunciada, y la persona utilizando el lector de pantalla puede silenciarla si encuentra la información adicional innecesaria..

Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group

El campo temporal puede aparecer con el mismo estilo como el texto ingresado por el usuario cuando se utiliza el Modo de alto contraste de Windows. Eso hará difícil para algunas personas determinar que contenido ha sido ingresado y que contenido es un texto temporal

Greg Whitworth — Cómo usar -ms-high-contrast (How to use -ms-high-contrast)

El texto provisional no es un reemplazo para el elemento . Sin una etiqueta que ha sido programaticamente asociada con la entrada usando una combinación de los atributos y , tecnología asistiva como los lectores de pantalla no pueden leer los elementos .

Sugerencias básicas de formularios (MDN Basic form hints)
Los textos provisionales en los campos del formulario son dañinos (Placeholders in Form Fields Are Harmful) — Nielsen Norman Group

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

gap
grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right
row-gap

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

JavaScript

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

The Argument Against Filler Text

If you’re thinking that filler text seems pretty boring and uncontroversial, you’d be wrong.

Surprisingly, there is a very vocal faction of the design community that wants to see filler text banished to the original sources from whence it came. Perhaps not surprisingly, in an era of endless quibbling, there is an equally vocal contingent of designers leaping to defend the use of the time-honored tradition of greeking.

The argument in favor of using filler text goes something like this: If you use real content in the design process, anytime you reach a review point you’ll end up reviewing and negotiating the content itself and not the design. This will just slow down the design process. Design first, with real content in mind (of course!), but don’t drop in the real content until the design is well on its way. Using filler text avoids the inevitable argumentation that accompanies the use of real content in the design process.

Adapters

Placeholders.js is available as a basic standalone script or alternatively bundled with a DOM library
adapter. If you’re using one of the DOM libraries listed below it is recommended that you use a version of
Placeholders.js bundled with the appropriate adapter.

The adapters patch methods of DOM libraries so you don’t end up with the placeholder text as the return value
of, for example, the jQuery method.

Available adapters

Library	Description	Downloads
jQuery	Patches the method to return the empty string when the element in question has an active placeholder	placeholders.jquery.min.js (v3.0.2 minified, 4kb)placeholders.jquery.js (v3.0.2 unminified, 18kb)
Prototype	Patches the method (instance and static), as well as the utility function to return the empty string when the element in question has an active placeholder.	placeholders.prototype.min.js (v3.0.2 minified, 4kb)placeholders.prototype.js (v3.0.2 unminified, 19kb)
YUI3	Patches the method of the module to return the empty string when the element in question has an active placeholder. You must require the module in your app for this to work.	placeholders.yui3.min.js (v3.0.2 minified, 4kb)placeholders.yui3.js (v3.0.2 unminified, 19kb)

Цветной placeholder в input

Скачать

Естественно, что у подсказки placeholder цвет по умолчанию должен быть! и он есть -> черный!

Но, что делать если мы хотим заменить стандартный цвет placeholder на какой-то другой!?
Есть отдельная страница с предопределенными цветами.

Или же можно подобрать через генератор цвета
Для данного параграфа у нас есть:

Для того, чтобы продемонстрировать изменение цвета placeholder нам понадобится поле ввода input

В инпуте прописываем атрибут placeholder, с каким-то текстом :

placeholder=»Здесь текст внутри инпута»

Далее добавим какой-то класс нашему инпуту:

<input class=»example_1″ placeholder=»Здесь текст внутри инпута»>

Теперь зададим цвет placeholder-у :

input.example_1::-webkit-input-placeholder {color:red ; opacity:1;}/* webkit */
input.example_1::-moz-placeholder {color:red ; opacity:1;}/* Firefox 19+ */
input.example_1:-moz-placeholder {color:red ; opacity:1;}/* Firefox 18- */
input.example_1:-ms-input-placeholder {color:red ; opacity:1;}/* IE */

Пользуйтесь на здоровье! Не забудьте сказать

Название скрипта :Цвет placeholder внутри поля ввода
Ссылка на скачивание : Все скрипты на

Теги :цвет placeholder цвет placeholder css input цвет placeholder как изменить цвет placeholder поменять цвет placeholder placeholder цвет текста как изменить цвет placeholder css задать цвет placeholder css цвет placeholder в input как поменять цвет placeholder input placeholder изменить цвет текста css цвет текста placeholder поменять цвет placeholder css задать цвет placeholder css как изменить цвет текста placeholder css как изменить цвет placeholder input как задать цвет placeholder в input css изменить цвет placeholder input css как сделать placeholder другим цветом как поменять цвет placeholder input css как изменить цвет подсказки в placeholder

Images

SlideshowSlideshow GalleryModal ImagesLightboxResponsive Image GridImage GridTab GalleryImage Overlay FadeImage Overlay SlideImage Overlay ZoomImage Overlay TitleImage Overlay IconImage EffectsBlack and White ImageImage TextImage Text BlocksTransparent Image TextFull Page ImageForm on ImageHero ImageBlur Background ImageChange Bg on ScrollSide-by-Side ImagesRounded ImagesAvatar ImagesResponsive ImagesCenter ImagesThumbnailsBorder Around ImageMeet the TeamSticky ImageFlip an ImageShake an ImagePortfolio GalleryPortfolio with FilteringImage ZoomImage Magnifier GlassImage Comparison Slider

4 проблемы плейсхолдеров в юзабилити

Подсказки при вводе данных появились относительно недавно. Поэтому пока еще существуют проблемы с юзабилити сайта, которые часто возникают во время использования плейсхолдеров. Можно выделить 4 вещи, отрицательно влияющих на использование ресурса:

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

Придётся очень внимательно заполнять поля на сайте, так как важно всю информацию удержать в голове. В итоге есть большая вероятность, что занятой человек не заполнит форму просто из-за отсутствия необходимого количества внимания.

HTML:

<div class=»placeholder-form»>
<div class=»placeholder-container»>
<input type=»text» placeholder=» » />
<label>Фамилия</label>
</div>
<div class=»placeholder-container»>
<input type=»text» placeholder=» » />
<label>Имя</label>
</div>
<div class=»placeholder-container»>
<input type=»text» placeholder=» » />
<label>Отчество</label>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<label>Фамилия</label>

</div>

</div>

<label>Отчество</label>

</div>

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