Всплывающие метки в формах на чистом CSS

[Ockonal]

Как по мне, то бессмысленно, но идея интересная. :)

[meta4]

Честно говоря именно «трюк» довольно трививален, и было бы интересно как раз увидеть грамотное применение такого UI-паттерна. У того же неста все не слишком хорошо: выплывающий текст меняет лэйаут, из-за чего элементы ниже скачут. У вашего примера все невероятно двигается и смысла относительно классического плейсхолдера, который не исчезает при фокусе не вижу. Единственный вариант, где это хорошо сделано (на мой взгляд) — у Брэда Фореста, на которого вы ссылаетесь.

[SirD]

Вариант Мэтта мне кажется наиболее правильным и менее раздражающим.

[mr47]

Хотя и вариант Мэтта можно было тоже сделать менее раздражающим, возможно уменьшив скорость анимации.

[StreetStrider]

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

[ksider]

если input обернуть в span(так делает например contact form 7 для wp) то на чистом css не работает…

[andy_joyful]

А есть готовое для bootstrap?

[Meliborn]

А вообще идея, конечно, интересная.

[Mirantus]

Получается, что либо поле не имеет метки, либо оно обязательно должно быть заполнено. Хотелось бы увидеть вариант без required.

[drokov]

Как вариант в форме внизу.

[freekir]

На вашем примере, если понизить скорость анимации, гораздо приятнее выглядит.

PS А вот по ссылке blog.mahardi.me/2013/10/14/jvfloatjs---the-experiment-with-form-accessbility-and-ux-in-html5/ ростелеком выдал, «Доступ ограничен по решению суда или по иным основаниям, установленным законодательством Российской Федерации.» печаль.