Empiezo con el atributo placeholder HTML5 el apartado de nuevos atributos tras haber hablado de todos los nuevos inputs HTML5.
Este nuevo atributo permite al usuario ver una especie de leyenda o label dentro del input. Cuando el usuario comience a escribir sobre él este placeholder desaparecerá. Es muy útil para guiar al usuario sobre el tipo de contenido a rellenar en el formulario.
Sintaxis de placeholder HTML5
Insertar el atributo placeholder en un input es muy sencillo, os pongo su sintaxis básica extraída de su web oficial en la W3C.
|
1 |
<input type="text" name="nombre" placeholder="inserta tu nombre"> |
En la imagen inferior podemos ver un ejemplo.
Es compatible con los siguientes tipos de input:
La ultilización de placeholder es totálmente compatible son el uso de leyendas y labels
Ejemplo del atributo placeholder HTML5
Vamos a ver el funcionamiento de este atributo en el siguiente ejemplo:
|
1 2 3 4 |
<form action="https://www.anerbarrena.com/demos/2014/010-atributo-placeholder-html5.php" name="formulario"> <input type="text" name="nombre" placeholder="inserta tu nombre"> <input type="submit" value="enviar"> </form> |
El código fuente del ejemplo no tiene mucho misterio, es el mismo que el que puse en la sintaxis pero insertado en un formulario.
Listado de los nuevos atributos HTML5
En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios.
Listado de los nuevos input HTML5
En esta url tenéis el listado completo de los nuevos input de HTML5.