Placeholder, texto en el campo de un formulario

Explicación del nuevo atributo placeholder que incorpora HTML5, con el cual se puede escribir un texto dentro del campo de un formulario.

archivado en: HTML/CSS / 10 octubre, 2012

Escribir una explicación adicional dentro del campo de un formulario contribuye a mejorar la usabilidad de un sitio. Es más, se puede incluso escribir directamente el nombre en el campo (aunque no es muy recomendable por accesibilidad):

[singlepic id=8 w=362 h=469 float=center]

Esto antes se podía hacer con JavaScript, limpiando el campo con los eventos onFocus y onBlur. Así, por ejemplo, en este campo:

  • <input id="signup_first_name" name="signup_first_name" type="text"  value="First Name" onfocus="vaciar(this, 'First Name')" onblur="verificar_vacio(this, 'First Name')">

se puede llamar llamar este script cuando se comienza a escribir para que lo deje en blanco:

  • function vaciar(control, text_input) {
  • if (control.value==First Name') {
  • control.value='';
  • }

y este que chequee que se ha escrito algo cuando pierde el foco:

  • function verificar_vacio(control, text_input) {
  • if (control.value=='')
  • control.value=text_input;
  • }

Pero ahora es mucho más sencillo gracias a un nuevo atributo que incorpora HTML5 en los campos del formulario y se puede escribir directamente en el campo:

  • <form action="miformulario.php">
  •   <input type="text" name="fname" placeholder="First name" /><br />
  •   <input type="submit" value="Submit" />
  • </form>

Mola  😆

|| Tags: , ,

valoración de los lectores sobre Placeholder, texto en el campo de un formulario

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 4 sobre 5 (6 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

2 respuestas a “Placeholder, texto en el campo de un formulario

  1. Creo que este nuevo atributo da algún problema en Firefox… si no recuerdo mal, simplemente lo ignora y no aparece dicho texto dentro del campo ¿no es así?

  2. Hola Rafa, gracias por preguntar. Sí funciona, al menos en la última versión, que en Firefox es la habitual pq se actualiza solo.

    Lo que da problemas es aplicarle estilos, al igual que pasa con Safari, y hay que hacer un apaño en las CSS. Algo así:

    input::-webkit-input-placeholder {color: #555;} /* Webkit browsers */
    input:-moz-input-placeholder {color: #555;} /* Firefox 4 */