Tictac Soluciones Informáticas > Diseño web > Placeholders en formularios HTML5

Placeholders en formularios HTML5

Uno de los nuevos atributos de los elementos de formulario en HTML5 es placeholder. Con este atributo podemos especificar un texto a mostrar en los elementos de tipo texto o similares, a modo de información y que desaparece cuando comenzamos a escribir.
Me parece muy útil para poner consejos, un ejemplo o requisitos en los campos a modo de ayuda. Por ejemplo el típico “dd/mm/aaaa” en un campo de fecha, o un “usuario@ejemplo.com” en un campo de correo electrónico.
Eso sí, para ser consecuentes, si usamos placeholders deberíamos hacerlo en todos los campos de un formulario.
El código es muy sencillo:
type=”text” placeholder=”dd/mm/aaaa” />
Y aquí un ejemplo de formulario con varios placeholders:

#ejemplo label{
text-align: right;
display: inline-block;
width: 200px;
margin-right: 20px;
}

#ejemplo textarea{
display:block;
margin-left:auto;
margin-right:auto;
width: 400px;
}

Nombre
Apellidos
Fecha de nacimiento
E-mail
Contraseña

Los placeholders están soportados desde Firefox 4, Chrome 4, Safari 5, Opera 11.6, IOS y Android. El explorer lo hará en su versión 10. Al ser una ayuda adicional, si el navegador no lo soporta tampoco es un drama. Pero si se quiere conseguir que funcione en cualquier navegador, se puede acudir a complementos de Jquery que hagan la misma función, como por ejemplo Jquery-placeholder
2018-07-02T17:38:12+00:0023/05/2012|Diseño web, HTML5|

Deje su comentario