Html placeholder attribute

Убираем 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, но большого смысла я в этом не вижу, так как кроссбраузерность таких прелестей будет страдать, а пользы от этих эффектов практически никакой.

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

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

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

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

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

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

Текст плейсхолдера в дополнении к лейблам

Использование плейсхолдера совместно с лейблами — это шаг в правильном направлении. Лейблы вне полей формы делают важную информацию видимой всё время, в то время как текст плейсхолдера оставлен для дополнительной информации. Однако, даже при использовании лейблов размещение важных подсказок и инструкций внутри полей формы всё ещё может стать причиной одной из 7 проблем отмеченных выше, хотя и в меньшей степени

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

Лучше: здесь, текст плейсхолдера используется как подсказка в дополнении к лейблу

Photographer-Run Sources

The websites listed here could have been included in the section above feature sites offering high-resolution images, but because these sites feature work by a smaller number of photographers (whose biographies and portfolios are likely available to you), we have chosen to list these separately. There are also a number of agencies and photography collectives on this list.

If you need professional-quality images, look no further.

1. PDPhoto: PD Photo features images taken over the years by a single photographer.
2. MMT Stock: High-resolution photos free to use by photographer Jeffrey Betts.
3. Deviant Art’s Stock Art: Not photographer-run, but artist-run. Features work created by people all around the world.
4. Font Play: Offers free-to-use images taken by the website’s owner and his friends.
5. Freerange Stock: Site where photographers can share their photos and earn revenue whenever users click on ads next to their images.
6. The Photographs of Ricardo Martin Herrero: Features photographs taken by Spanish photographer Ricardo Martin Herrero.
7. Life of Pix: Stunning photographs put out by a Canadian advertising agency and its affiliated photographers.
8. AMG Media: Photos by professional photography that are free to use (attribution required).
9. Aarin Free Photo: 950 images for personal and commercial use taken by photographer Aarin Yu.
10. BigFoto: Free downloads of images created by amateur photographers who have opted to release ownership of the work they’ve created.
11. Little Visuals: Sadly, the photographer (and owner of the site) whose work was featured passed away unexpectedly in 2013. However, his family has left his work available for use, free of charge.
12. Free to Use Photography by Daria: Exactly as it sounds. Daria, a visual and UX designer, creates a lot of content which she enjoys sharing for public use.

Need professional photos of food? The FoodiesFeed site offers a collection of professionally shot food photos.

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>

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

Multi-Functional Sources

The photo sources listed in this section offer stock images, but they also come with additional tools or services that you might find helpful. For example, you might get things like access to an editor that allows you to customize your image.

1. Canva: Offers stock images and editing tools, making it easy to create custom images. Ideal for social media or ads and flyers. There are also a number of alternatives to Canva.
2. Snappa: Site allowing you to create online graphics for social media, ads, blogs, and more.
3. Creative Commons: This is actually a search engine from nonprofit Creative Commons that allows you to search for images based on license type. It includes information on how to attribute appropriately when using those images.
4. Iso Republic: Offers a large number of free stock images and videos.
5. Snapwire Snaps: Allows you to license and commission photos from any of the 200,000 photographers affiliated with the site. Offers seven free photos every seven days.
6. Free Pixels: Searchable source of free stock images, as well as background images and signs, symbols, and icons.
7. Obsidian Dawn: This isn’t, strictly speaking, a source for images. Instead, it’s a source for artist tools that can be helpful when making images.
8. Storyblocks Video: Stock images aren’t the only thing that’s available to you — you can get stock videos as well.
9. Freepik: Free graphics resources, including vectors, stock photos, and icons.
10. Kaboom Pics: Free stock photography and color palettes for all of your art projects.

A subscription to StoryBlocks gives you access to stock video clips like this one of downtown Havana.

Images in the Public Domain

A lot of the sites mentioned elsewhere in this article contain some images in the public domain, but the following sites focus on such images.

1. Archive.org: The ultimate source for all things public domain — with lots of book and magazine covers. You may have to search for a while, but you will find lots of useful stuff, including videos.
2. SkitterPhoto: A place for people to find and share images in the public domain.
3. Public Domain Stock Photos: Lots of stock photos in the public domain, all organized by categories like backgrounds, communication, objects, and people.
4. Public Domain Photos: Site with 5,000 free stock photos in the public domain.
5. New Old Stock: Vintage photos in the public domain.
6. WPClipart: An extremely large collection of public domain images — over 80,000. Great for simple design images.

Плейсхолдер: определение термина и его роль в маркетинге

В маркетинге плейсхолдер – это подсказка, которая находится внутри поля формы. Например, можно добавить её в строке «Пароль». Тогда пользователю появится сообщение о том, что необходимо ввести не меньше 6 символов или выполнить иные условия для успешного заполнения данного пункта регистрации. Указанная технология задумывалась как опция, способная упростить ввод данных.

Лейбл

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

More

Fullscreen VideoModal BoxesDelete ModalTimelineScroll IndicatorProgress BarsSkill BarRange SlidersTooltipsDisplay Element HoverPopupsCollapsibleCalendarHTML IncludesTo Do ListLoadersStar RatingUser RatingOverlay EffectContact ChipsCardsFlip CardProfile CardProduct CardAlertsCalloutNotesLabelsCirclesStyle HRCouponList GroupList Without BulletsResponsive TextCutout TextGlowing TextFixed FooterSticky ElementEqual HeightClearfixResponsive FloatsSnackbarFullscreen WindowScroll DrawingSmooth ScrollGradient Bg ScrollSticky HeaderShrink Header on ScrollPricing TableParallaxAspect RatioResponsive IframesToggle Like/DislikeToggle Hide/ShowToggle Dark ModeToggle TextToggle ClassAdd ClassRemove ClassActive ClassTree ViewRemove PropertyOffline DetectionFind Hidden ElementRedirect WebpageZoom HoverFlip BoxCenter VerticallyCenter Button in DIVTransition on HoverArrowsShapesDownload LinkFull Height ElementBrowser WindowCustom ScrollbarHide ScrollbarShow/Force ScrollbarDevice LookContenteditable BorderPlaceholder ColorText Selection ColorBullet ColorVertical LineDividersAnimate IconsCountdown TimerTypewriterComing Soon PageChat MessagesPopup Chat WindowSplit ScreenTestimonialsSection CounterQuotes SlideshowClosable List ItemsTypical Device BreakpointsDraggable HTML ElementJS Media QueriesSyntax HighlighterJS AnimationsJS String LengthJS ExponentiationJS Default ParametersGet Current URLGet Current Screen SizeGet Iframe Elements

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

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

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

Плейсхолдеры, замещающие лейблы

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

Худший вариант: в этом примере, текст плейсхолдера используется вместо лейбла

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

2. Без лейблов пользователь не сможет проверить свою работу до отправки формы

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

3. Когда появляется сообщение об ошибке, люди не знают как решить проблему

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

5. На поля с надписью внутри обращается меньше внимания

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

7. Иногда пользователям приходится удалить текст плейсхолдера вручную

Иногда плейсхолдеры не исчезают, когда пользователи помещают курсор в поле. Если плейсхолдер остаётся внутри поля как редактируемый текст, пользователям придётся вручную выделять его и удалять. Это создаёт ненужную нагрузку на пользователей и увеличивает стоимость взаимодействия с заполняемой формой.Бывает, что плейсхолдер тускнеет при размещении курсора в текстовом поле. К сожалению, такой шаблон взаимодействия достаточно редок и пользователи незнакомы с ним: некоторые до сих пор считают, что им придётся вручную удалять этот текст. Это обычно приводит к нескольким неудачным попыткам и множеству кликов до того, как они поймут, что можно начать печатать прямо по потускневшему тексту.

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

Плейсхолдер вместо заголовка

Худший вариант: плейсхолдер используется вместо заголовка

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

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

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

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

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

Если плейсхолдер исчезает по фокусу на поле ввода, то это создает проблемы для пользователей, переключающихся между полями с помощью клавиатуры
Многие используют клавишу Tab для быстрого перехода к следующему полю, как правило, не читая его содержание до того, как переключиться на него.

Поля с плейсхолдером меньше похожи на поля для ввода
Результаты окулографии говорят о том, что взгляд пользователя сильнее «цепляется» за пустые поля. В лучшем случае, пользователь потратит лишнее время на определение поля для ввода, в худшем же — просто его пропустит, что может серьезно сказаться на конверсии.

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

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

Our Top 3 Stock Image Sources

There are many places to which you can go for stock images, but in our minds, there are three excellent sources that we think are much better than their peers.

Getty’s “editorial” images include photos of newsmakers, news events, and archival images of world leaders.

What makes a great site for stock images? Well, we look for several things:

• Abundance and variety of images: we want to have lots of options; we’re not really interested in smaller or niche websites.
• Ease of use: we want something that allows you to search for and find what you want with ease. Once we’ve found what we want, we then want to be able to download the images without much hassle.
• Cost: some of our favorites are free, while others are not. Regardless, we take cost into consideration even if there isn’t a specific point at which we say, “We’ll never use this site because it is too expensive.”

With that in mind, here are our three favorite stock image sources.

1. Getty Images: a subscription service offering royalty-free images, Getty Images is one of the largest (yet easily searchable) libraries of ultra-high quality stock images (and videos as well). Getty offers creative, historical, and “editorial” (news) photos. (Pro tip: If you have a small business or organization and want to use Getty, contact one of their reps and ask for a custom package. They can negotiate on rates based on the traffic to your site.)
2. iStock: most everything that we’ve said about Getty Images applies to iStock (which is Getty Images’ budget-friendly sister site). If you want quality content, but your budget is limited, there are discounts you can apply.
3. Adobe Stock: Adobe Stock is similar to Getty Images, but its libraries include graphics, 3-D objects, and templates in addition to photographic images and videos. They also offer editorial photos of newsmakers. For all that the site offers, its monthly subscription fee and use limits are very reasonable.

Adobe Stock includes professional quality vectors and illustrations.

You’ll probably notice that all of the options we’ve provided are subscription services. There’s no better price than FREE, but for convenience, ease of use, and access to high-quality content, a small subscription fee is well worth it.

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

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

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

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

Placeholder Color

Try it Yourself »

Step 1) Add HTML:

Use an input element and add the placeholder attribute:

Example

<input type=»text» placeholder=»A red placeholder text..»>

Step 2) Add CSS:

In most browsers, the placeholder text is grey. To change this, style the placeholder with the non-standard selector. Note that Firefox adds a lower opacity to the placeholder, so we use 1 to fix this.

Example

::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */  color: red;  opacity: 1; /* Firefox */}:-ms-input-placeholder { /* Internet
Explorer 10-11 */  color: red;}::-ms-input-placeholder
{ /* Microsoft Edge */  color: red;}

Tip: Read more about the ::placeholder selector in our CSS Reference: CSS ::placeholder Property.

❮ Previous
Next ❯

Let’s Just Agree to Disagree

Before things get too heated, let us jump in and say that both sides make valid points.

Using real content during design can distract designers and design review teams alike away from the design, and insisting on always using publication-ready content can be a real drag on the design process.

On the other hand, if you use poorly formatted filler text you may get a completely false sense of how your design will interact with real content.

We propose a compromise: Only use filler text that has been edited for length and format to match the characteristics of real content as closely as possible, and use real content where possible, and where it doesn’t create too much distraction.

Relax and do whatever fits with your design process. Don’t set a lot of restrictive hard-and-fast rules.

Use filler text where it helps your design process, but use real content if you’ve got it, as long as it doesn’t distract and slow down your design process.

Design is an evolutionary process, and filler text is just one tool in your progress-pushing arsenal. Use it where it makes sense to use it, and pull it once the natural process indicates that it’s time to roll out a descendant built with real content.

Нужно ли пользоваться плейсхолдерами

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

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

• Можно случайно спутать подсказку с уже заполненным полем. Следовательно, юзер посчитает, что текст-заполнитель установлен по умолчанию.
• Использование плейсхолдеров, не подсвечивающихся при некорректном заполнении, может значительно усложнить процесс отправки данных. Если пользователь допустит ошибку, ему станет сложно понять, что именно нужно исправить.
• Из-за того, что подсказка исчезнет, легче запутаться. Во время заполнения поля не все люди запоминают содержание подсказки, поэтому придётся полностью стереть текст, чтобы снова её посмотреть.
• Если отсутствуют заголовки формы, пользователю тяжело понять, правильно ли он заполнил конкретное поле. 
• Низкую конверсию будет иметь форма, в которой пользователям нужно вручную убирать текст с подсказкой, он не исчезает автоматически. Это отнимает время, что отрицательно сказывается на отношении юзера к сайту.
• Часто для плейсхолдера выбираются бледные цвета, чтобы избежать эффекта уже заполненного поля. Блёклые тона, по мнению дизайнеров и разработчиков, дают понять, что информация, написанная таким образом – временная. Однако для слабовидящих такой текст подсказки будет плохо заметен — это связано с низким уровнем контраста цветов.

Следовательно, замена лейблов плейсхолдерами способно привести к некоторым трудностям. Люди могут забыть текст с подсказки или его не разглядеть, если есть проблемы со зрением. Это приведёт к ненужным ошибкам и лишней трате времени на обработку некорректных заявок.