Añadir el atributo placeholder de html5 en un formulario de Twig y Symfony2

marzo 13, 2013

La llegada de HTML5 ha puesto a nuestra disposición nuevos elementos y atributos para añadir en nuestras webs. Uno de ellos es el placeholder que, para resumirlo, es el texto que aparece dentro de un campo de texto antes de que escribamos algo. Es muy útil para indicar al usuario que es lo que queremos que introduzca en ese campo. Es algo parecido a los labels, pero dentro del propio input.

Puntualizar que la W3C recomienda siempre utilizar labels junto a los inputs y que el placeholder no reemplaza al label.

¿Cómo añadir el atributo placeholder a un formulario de Twig en Symfony2?

Vamos a partir de un formulario sencillo:

<form action="" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form.username) }}
</form>

Si queremos añadir el atributo placeholder lo haremos de la siguiente manera:

<form action="" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form.username, { 'attr': {'placeholder': 'Escribe tu nombre de usuario' } }) }}
</form>

Si además queremos que el placeholder sea traducible, solo deberemos utilizar el filtro trans de Twig:

<form action="" method="post" {{ form_enctype(form) }}>
    {{ form_widget(form.username, { 'attr': {'placeholder': 'Escribe tu nombre de usuario' | trans } }) }}
</form>

Tags ; , , , , , , ,

2 comentarios

    Avdarie Nov 15, 2013

    Tb hay que tener en cuenta que el form_widget se usa una vez para cada campo. O sea, sí necesitamos añadir placeholder, class o otro atributo lo tendremos que hacer en la misma llamada del form_widget del campo que especificamos. Sí lo llamamos a la función form_widget dos veces para el mismo campo, la segunda vez que es llamado no añade ningún atributo.

    Saludos,

    Responder

Escribe un comentario

Los comentarios son moderados y se utiliza rel="nofollow" para los enlaces.