Imágenes en cuadros de texto de formularios web

Cuestiones enviadas por lectoresRespondiendo a una consulta que hacía Joaquín hace un par de días, hoy describiremos una forma de hacer más atractivos los cuadros de edición de nuestros formularios web, introduciéndoles iconos o imágenes que, a la vez que adornan bastante, pueden ayudar al usuario a saber qué información debe introducir.

Pero para que quede claro lo que pretendemos, primero un ejemplo del resultado que vamos a conseguir:

Textboxes
 


La forma de conseguirlo es bastante sencilla. Basta con establecer, en las propiedades de estilo de los cuadros de edición una imagen de fondo con el icono que queremos incluir, y dejar un espaciado por la izquierda (padding-left) equivalente al ancho del mismo para que la introducción del texto comience a partir de ese punto.

Por ejemplo, si definimos las siguientes clases en el CSS de nuestra página (y suponiendo que la ruta de las imágenes sea correcta, claro):

 .lupa
{
background: white url(icono_lupa.gif) no-repeat 2px center;
padding: 2px 2px 2px 18px;
}
.telefono
{
background: white url(icono_telefono.gif) no-repeat 2px center;
padding: 2px 2px 2px 18px;
}


Como se puede observar, se establece un fondo blanco con una imagen cuya URL se especifica (icono_xxxx.gif), mostrada sin repetición (no-repeat), posicionada en coordenada horizontal 2px y centrada verticalmente. El padding izquierdo será de 18px para que comience ahí el área de edición, a la derecha de la imagen.

Podremos utilizar después en nuestro HTML un código como el siguiente para conseguir que los cuadros de edición apararezcan «adornados» como nos interese en cada momento eligiendo para cada uno de ellos la clase CSS apropiada:

 <input type=»text» class=»lupa» />
<input type=»text» class=»telefono» />


Espero que esto responda la duda, Joaquín.

Y por cierto, he utilizado esta técnica en el buscador del encabezado del blog, que lo tenía un poco soso…

Publicado en: www.variablenotfound.com.

5 comentarios sobre “Imágenes en cuadros de texto de formularios web”

  1. Saludos hermano, en mi tierra decimos NAGUARA cuando algo es tan buueno como esto execelente buscaba algo para darle vida a los formulario de contacto y esta esta buena………….lo pondre pronto en la pagina

  2. Hola, Alexis, ante todo gracias por comentar.

    Para que los bordes de los cuadros sean redondos vas a tener que trabajarlo un poco más.

    Una forma de hacerlo es crear una imagen con los bordes del cuadro de texto, y ponerla como fondo, quitando mediante estilos el bordeado por defecto de estos controles de edición. Otra forma es introducir el input dentro de un cuadro redondeado, que lo puedes conseguir con imágenes o usando Nifty Corners.

    Espero que te sirva de ayuda.

    Un saludo.

  3. Hola a todos que tal!! està chvr el tutorial les agradezco un monton!! el problema que tengo es que quiero poner una barra de busqueda la quiero poner en mi input type=text como background …
    la puse pero cuando escribo la imagen no es fija … y la verdad soy nuevo con el css no sè q atributos usar.. AYUDEN PORFA!!!
    mi correo es clarens007@hotmail.com

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *