Marcadores de posición
Un placeholder ( o marcador de posición ) es el texto que puede aparecer en un input de tipo text, search, url, tel, email, o password, antes de que el usuario haya insertado algo.
En el HTML el placeholder aparece como atributo del elemento input, y el soporte para placeholder es bastante bueno.
<input type="email" name="correo" required placeholder="Díganos tu email" >Pero hay más: en CSS3 podemos dar estilo al marcador de texto, aunque todavía necesitamos prefijos:
input::-webkit-input-placeholder { color: red; } input:-moz-placeholder { color: red; }/* Firefox 18- */ input::-moz-placeholder { color: red; }/* Firefox 19+ */ input:-ms-input-placeholder { color: red; }
También podemos dar estilo al placeholder cuando el usuario esta enfocando el input, y esto es muy interesante. Podemos utilizar opacity: 0 o color: white, y el placeholder desaparece sin necesidad de utilizar JavaScript.
input:focus::-webkit-input-placeholder { opacity:0; } input:focus:-moz-placeholder { opacity:0; }/* Firefox 18- */ input:focus::-moz-placeholder { opacity:0; }/* Firefox 19+ */ input:focus:-ms-input-placeholder { opacity:0; }
El pseudo-elemento placeholder soporta las siguientes propiedades CSS:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- text-indent
- opacity
Un caso práctico
El código habla por si mismo. Sin embargo me gustaría hacer un comentario: la pseudo-clase :invalid de CSS es aplicada automáticamente a cualquier elemento <input> cuyo contenido no valida según la configuración del input.
Firefox aplica en este caso un brillo rojizo ( de hecho box-shadow ) a los elementos inválidos. Para eliminar este brillo tenemos que eliminar la sombra de caja en los inputs:
input{box-shadow: none;}
.contenedor{
width: 500px;
padding:30px;
box-sizing:border-box;
margin:20px auto;
border:1px solid #d9d9d9;
font-size:16px;
}
input{ border:1px solid #d9d9d9; margin:10px 0; padding:0 .7em; height:2.6em; background-color:white; outline:none; font-size:80%; box-shadow: none;}
[type=email],[type=password]{-webkit-appearance: textfield; width:100%;}
input:focus{box-shadow : 0px 0px 5px 1px rgba(0,0,0,.3); border-color:#aaa;}
input::-webkit-input-placeholder {
color: red;
}
input:focus::-webkit-input-placeholder {
opacity:0;
}
input:-moz-placeholder {
color: red;
}
input:focus:-moz-placeholder {
opacity:0;
}
input::-moz-placeholder {
color: red;
}
input:focus::-moz-placeholder {
opacity:0;
}
input:-ms-input-placeholder {
color: red;
}
inputfocus:-ms-input-placeholder {
opacity:0;
}
El JavaScript que aparece a continuación no tiene nada que ver con los marcadores de texto, No obstante puede ser de gran ayuda si queremos validar el formulario utilizando HTML5.
Lea más acerca de cómo validar los emails, y no se olvide:
JavaScript puede ser deshabilitado fácilmente, por lo cual no hay que confiar demasiado en la validación de direcciones de email ( o de lo que sea ) con expresiones regulares. Validamos mediante JavaScript para que todo vaya muy rápido y el usuario tenga una experiencia agradable.
Al insertar el contenido de los input en una base de datos, tendremos que volver a validar el formulario mediante un script del lado del servidor (server-side scripting) como ASP, ColdFusion, PHP, Ruby on Rails etc...
var email = document.querySelector("#email");
var psw = document.querySelector("#contrasena");
email.addEventListener("input", function(){this.setCustomValidity("");},false);
email.addEventListener("activate", function(){this.setCustomValidity("");},false);
email.addEventListener("invalid", function(){this.setCustomValidity("D\355ganos tu email");},false);
var pswPattern = new RegExp("^(?=\w*\d)(?=\w*[A-Z])(?=\w*[a-z])\S{8,16}$", "");
if (pswPattern.test(psw.value)) {
psw.setCustomValidity("");
}
else {
psw.setCustomValidity("Contrase\361a incorrecta");
}Vea una demonstración en Codepen