Atribito placeholder en formularios HTML5

Atribito placeholder en formularios HTML5

Otra útil propiedad que podemos colocar dentro del código de la etiqueta input es placeholder=”Texto que se mostrara”. Mediante esta propiedad del Html5 podemos definir el texto que queremos que aparezca dentro del campo del formulario a modo de ayuda para las visitas. Por ejemplo, se suele colocar un texto explicativo acerca de la información que se debe rellenar en ese campo. Es decir, que este atributo permite al usuario ver una especie de leyenda o label dentro del input.

Placeholder

El texto definido dentro de la propiedad placeholder aparecerá dentro del campo correspondiente con un tono gris claro, indicando que no es realmente el texto que se va a enviar, sino un comentario, una ayuda para informar de lo que debe contener ese campo. Lo habrás visto por ejemplo en las casillas de buscador de Google que tienen algunas páginas para buscar en su interior, en las que aparece el texto “Buscar en Google” o algo similar.

Este texto al que me refiero desaparece totalmente al hacer focus dentro del campo, es decir, cuando colocamos el puntero de escritura o hacemos clic dentro del hueco en el que se escribe el dato de ese campo. Además, si lo dejáramos en blanco (bueno no en blanco sino con ese texto), al enviar los datos del formulario ese texto desaparecería, no formaría parte de la información enviada con el formulario, pues es solo un texto indicativo o informativo.

Te muestro acá abajo un ejemplo de cómo se vería un campo en cuya línea se ha definido un placeholder=”Escriba su nombre”:

<form>
   <input type="text" id="ejemplo" name="ejemplo" placeholder="Escriba su nombre">
   <input id="enviar" name="enviar" type="submit" value="enviar">
</form>

Compatibilidad del atributo placeholder HTML5

Este atributo es placeholder compatible con los siguientes input:

  • text
  • search
  • url
  • tel
  • email
  • password
  • number

Puede que te interese tambien:
El atributo required en formlarios Html5
Atributo pattern en formularios Html5

Suscribir
Notificar a
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios