En estos últimos años, después del auge de aplicaciones móviles, cada vez se está usando más el poner los labels dentro de los inputs para los formularios de validación.
Estos ejemplos los puedes ver en aplicaciones y webs tan importantes como facebook, evernote… :
¿Por qué se ponen los labels dentros de estas cajas de texto?
Cuando diseñamos para aplicaciones móviles el espacio es algo muy privilegiado por lo que dejar un input vacio parace un espacio desaprovechado. Sobretodo estas cajas de texto deben ser bastante grandes, más de lo normal ya que van a tener interacción táctil. Si ponemos el label fuera del input esto nos hará tener que agrupar más los elementos y no habrá tantos márgenes o espacios vacios, Lukew, un gran conferenciante sobre mobile, es un gran defensor de este tipo de práctica.
Problemas de poner labels dentro de un input
Cuando el usuario quiere acceder a una zona privada de una web lo ideal es que visualmente vea los inputs vacios donde van a tener que introducir información, según puedes leer en UXmatters, este espacio está reservado para los usuarios.
También ocurre que cuando el usuario pulsa dentro del input el label desaparece y el usuario no recuerda si tiene que introducir un email o un nombre de usuario (esto me ha pasado a mí muchas veces), visualmente no encuentra ningún sitio donde diga que dato tiene que introducir y lo único que puede hacer es borrar la información que ha introducido en el input y visualizar de nuevo el label.
Entiendo que esta situación en móvil se realice ya que el espacio es muy preciado pero en un formulario de validación de una web, donde suele haber sitio, no veo sentido hacer esta práctica. También tenemos que tener en cuenta que en un móvil hay muchos factores del entorno que nos hacen distraernos, quien no consulta facebook mientras va andando, y si tienes que validarte, a veces no eres capaz de rellenar un formulario entero manteniendo la mirada fija en el móvil por lo que las distracciones externas no te hacen recordar que tipo de campo era si usuario o e-mail.
Ejemplos de aplicaciones y webs que usan correctamente los labels, inputs y shareholders:
Otro punto a tener en cuenta es que los usuarios normalmente ven el texto dentro de los inputs como si fuera un texto de ayuda y lo suelen ignorar, además suele tener un color gris claro para que el usuario sepa que puede escribir encima por lo que no destaca.
En este caso se está mezclando labels con placeholders con lo que al final puede haber problemas de accesibilidad y por lo tanto una confusión para los usuarios.