ejemplo-imagen-formulario

Un usuario me preguntó como podía insertar una imagen en un campo de texto. Bien, es muy sencillo, y en esta entrada se explicará paso a paso.

Código HTML

Como vemos es un formulario (form) formado por 3 input de tipo texto con sus respectivas clases.

<form action="myaction.php" method="post" id="myid">

<p><input type="text" name="author" class="author" value="Autor" size="22" tabindex="1" /></p>

<p><input type="text" name="email" class="mail"  value="Email/>" size="22" tabindex="2" /></p>

<p><input type="text" name="url" class="website" value="Url" size="22" tabindex="3" /></p>

</form>

Código CSS

El código CSS se divide en dos partes. Una es la parte cuando no estamos presionando el formulario, y otra cuando clickamos en el formulario (hover -aunque esta parte es más secundaria y no hace falta a menos que queramos dar más estética al formulario-).

Si no estamos presionando el formulario, el código CSS es este (solo nos fijaremos en la clase “author”:

#commentform input.author{

background-position: left center;

padding-left: 17px;

width:183px;

background-image: url(images/user.gif);

background-repeat: no-repeat;

}

Si nos fijamos vemos una imagen de fondo (el icono del formulario que aparece al principio) orientado hacia la izquierda (background-position) con un padding a la izquierda de 17 px. Este padding es necesario especificarlo ya que si no, el texto se “montará” encima del fondo (icono). El padding debe ser 1 o 2 píxeles superior al ancho total del icono que vayamos a añadir. Finalmente indicamos el ancho de todo el formulario, que en este caso es de 183 píxeles.

El código CSS cuando hemos presionado el formulario es este:

#commentform input.author[type="text"]:focus {

background-color: #FFF;

background-position: left center;

padding-left: 17px;

width:183px;

background-image: url(images/user2.gif);

background-repeat: no-repeat;

}

Aplicando focus al formulario podemos asignarle un nuevo fondo a la caja de texto, con un nuevo icono (como es este caso, ya que puede haber muchas variantes) y con esto ya tendríamos nuestro formulario más estilizado y acabado.

Este hack tiene XHTML 1.0 Transitional válido y funciona tanto en Safari 3+. 4+, como en Firefox 3.x e Internet Explorer.