Autor en Google+
Saltar al contenido

Variable not found. Artículos, noticias, curiosidades, reflexiones... sobre el mundo del desarrollo de software, internet, u otros temas relacionados con la tecnología. C#, ASP.NET, ASP.NET MVC, HTML, Javascript, CSS, jQuery, Ajax, VB.NET, componentes, herramientas...

el blog de José M. Aguilar

Inicio El autor Contactar

Artículos, noticias, curiosidades, reflexiones... sobre el mundo del desarrollo
de software, internet, u otros temas relacionados con la tecnología

¡Microsoft MVP!
domingo, 8 de junio de 2008
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:


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.

Estos contenidos se publican bajo una licencia de Creative Commons Licencia Reconocimiento-No comercial-Compartir bajo la misma licencia 3.0 España de Creative Commons

4 Comentarios:

Dr Verboten dijo...

Oye puse esta pagina en iexplorer y no muestra las imagenes contrario a firefox que si lo hace bien, hay que hacer algo para que se vea en iexplorer?

José M. Aguilar dijo...

Hola!

Pues no, en principio debería verse. De hecho, acabo de hacer una captura con BrowserShots y veo bien las imágenes con todos los navegadores (he probado la mayoría).

Saludos.

Julio Loayza dijo...

Semánticamente no me parece correcto establecer clase "lupa" a una etiqueta input. Sería más correcto establecer clase "busqueda", si ese es el propósito del input.

De otro modo estás condicionando el contenido a la representación gráfica del mismo, y eso es mal asunto.

Lo siento, pero la semántica me pierde :-)

José M. Aguilar dijo...

Hola, Julio!

Pues sí, como indicas, "busqueda" sería más correcto desde el punto de vista semántico, tienes toda la razón. De hecho, lo pensé a la hora de escribir el post, pero al final me decanté por la "lupa" al entender que sería más claro el ejemplo.

Un saludo y gracias por comentar.