Formularios y efectos al Placeholder 10.1.16

Formularios y efectos al Placeholder

Los formularios con sus elementos y campos para que el usuario introduzca valores o datos también han sufrido un proceso de actualización y/o ampliación con la llegada de html5.

Dos de los aspectos que más han sido mentados este tiempo han sido, a mi entender, la validación nativa por el navegador de la información facilitada por el usuario y el atributo placeholder.

Junto a estas novedades, o como respuesta a ellas, CSS también trajo en su día una serie de pseudoclases para manejarlos.

Fruto de esta novedades podemos encontrar realizaciones de lo más variado, en especial centradas en el manejo del valor del atributo placeholder al recibir el :focus. Valor que por defecto debería desaparece al teclear el primer carácter.

En ocasiones sus autores lo consiguen actuando sobre el mismo atributo y en otras utilizando otros elementos. Ya sea sólo con CSS o apoyados en javascript.

A continuación y para que te recrees, disfrutes y si quieres investigues, una pequeña recopilación de pens en los que sus autores juegan con algún aspecto del formulario o de sus elementos. Pero antes de los pens, quizás quieras disfrutar con esta más que veterana demo [2012] de un formulario de contacto animado con puro Css del que yo guardo un más que grato recuerdo.

CSS-Only Animated 'Reminder' Placeholders using label por Sivan

See the Pen CSS-Only Animated Placeholders by Sivan (@sivan) on CodePen.

Temporary Hang-On Placeholders por Chris Coyier

See the Pen Temporary Hang-On Placeholders by Chris Coyier (@chriscoyier) on CodePen.

Text input love por Michael Arestad

See the Pen Text input love by Michael Arestad (@MichaelArestad) on CodePen.

Simple Login Placeholder Transition por Mason Fox

See the Pen Simple Login Placeholder Transition by Mason Fox (@masonfox) on CodePen.

Pseudo Placeholders in Pure CSS por Donny Burnside

See the Pen Pseudo Placeholders in Pure CSS by Donny Burnside (@donnyburnside) on CodePen.

Placeholder con pseudoelementos por Rémi Lacorne

See the Pen -webkit-input-placeholder::after by Rémi Lacorne (@rlacorne) on CodePen.

:focus tooltip por Victor Pegado

See the Pen :focus tooltip by Victor Pegado (@vpegado) on CodePen.

Input Placeholder Fade In/Out por Peter Schmalfeldt

See the Pen CSS3 Input Placeholder Fade In/Out by Peter Schmalfeldt (@manifestinteractive) on CodePen.

Placeholder con iconfont por Jon Fabritius

See the Pen Font Awesome icon inside an INPUT placeholder by Jon Fabritius (@JonFabritius) on CodePen.

Adaptive placeholders por Zell Liew

See the Pen Adaptive placeholders by Zell Liew (@zellwk) on CodePen.

Placeholder text with typing effect por Michael Smart

See the Pen Placeholder Typing Text by Michael Smart (@mikedevelops) on CodePen.

Peeky Placeholders por Luke Reid

See the Pen Peeky Placeholders by Luke Reid (@lukeandrewreid) on CodePen.

Better Placeholders por Matt Hamilton

See the Pen Better Placeholders by Matt Hamilton (@matt159) on CodePen.

Smart Placeholders por Josh Bader

See the Pen Smart Placeholders by Josh Bader (@joshbader) on CodePen.

Form Placeholder Labels por Assaf Gelber

See the Pen Form Placeholder Labels by Assaf Gelber (@agelber) on CodePen.

Floating Labels/Placeholders for Input Fields por Lucas Bebber

See the Pen Floating Labels/Placeholders for Input Fields by Lucas Bebber (@lbebber) on CodePen.

Múltiples líneas en el placeholder por Ryan Gill

Si por alguna razón necesitas mostrar información en el placeholder en más de una línea, en este pen su autor lo hace en base a jQuery

See the Pen multi-line placeholder text (webkit) by Ryan Gill (@ryanjgill) on CodePen.

Neat form por jonathan de montalembert

En este pen, tras el envío, te muestra los valores introducidos en cada campo usando jSon

See the Pen Neat form by jonathan de montalembert (@roine) on CodePen.

A Circular Form por Yogev Ahuvia

Una "locura" de formulario. Quizás te resulte un tanto mareante ;-)

See the Pen A Circular Form by Yogev Ahuvia (@kindofone) on CodePen.

Múltiples Formularios paso a paso por Atakan Goktepe

See the Pen Multi Step Form with Progress Bar using jQuery and CSS3 by Atakan Goktepe (@atakan) on CodePen.

Flying letters por Mladen Stanojevic

See the Pen Flying letters by Mladen Stanojevic (@mladen___) on CodePen.

Kseso

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso