Foros del Web » Diseño web » HTML »

lupa para un buscador con un form

Estas en el tema de lupa para un buscador con un form en el foro de HTML en Foros del Web. Hola, tengo una caja (input), dentro de un formulario. La uso para buscar por el término que se introduce en la caja. El tema es ...
  #1 (permalink)  
Antiguo 28/11/2011, 15:25
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 867
Antigüedad: 9 años, 8 meses
Puntos: 15
lupa para un buscador con un form

Hola, tengo una caja (input), dentro de un formulario. La uso para buscar por el término que se introduce en la caja.

El tema es que tengo la caja y justo pegado a su derecha he puesto una lupa para que quede chulo. La lupa por supuesto también está dentro de form.

El caso es que si introduzco un término para buscar y en lugar de pulsar al intro pulso la lupa, no me hace nada, no me busca como lo hace si pulso intro.

Qué puedo hacer para que tanto el intro como al hacer click en la lupa tengan el mismo comportamiento?
  #2 (permalink)  
Antiguo 28/11/2011, 15:28
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 8.967
Antigüedad: 6 años, 9 meses
Puntos: 1177
Respuesta: lupa para un buscador con un form

La mejor forma es que el botón de submit tenga la imagen de la lupa, con un fondo mediante CSS.

Saludos
__________________
Aprender sin pensar es inútil. Pensar sin aprender, peligroso.
  #3 (permalink)  
Antiguo 28/11/2011, 17:15
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 867
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: lupa para un buscador con un form

vale, he usado input type image pero en la url a la que me manda me salen las coordenadas x e y de donde he pinchado en la imagen (botón).

cómo sería con button submit? pq lo he intentado y no me ejecuta el formulario

Código HTML:
Ver original
  1. <button name="xxx" type="button" style="background-image:url(imagen.jpg);">
  #4 (permalink)  
Antiguo 28/11/2011, 17:25
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.679
Antigüedad: 6 años, 6 meses
Puntos: 943
Respuesta: lupa para un buscador con un form

lee esto
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #5 (permalink)  
Antiguo 28/11/2011, 17:57
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.403
Antigüedad: 7 años, 5 meses
Puntos: 1566
Respuesta: lupa para un buscador con un form

Es que para eso está específicamente un input image, para pasar las coordenadas x e y de una imagen, lo que te aconsejo, y siguiendo la linea de carlangueitor es que estilices un imput submit con una imagen de fondo.
Algo así

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8. input.lupa{
  9. width: 17px;
  10. height: 17px;
  11. background-image: url('http://foros.emprear.com/img/fdw/loupe.png');
  12. background-color: transparent;
  13. color: transparent;
  14. border: none;
  15. outline: none;
  16. cursor: pointer;
  17. }
  18. /*]]>*/
  19. </head>
  20. <form action="#">
  21. <p>
  22. <input type="text" name="buscar" />
  23. <input type="submit" class="lupa" value="." title="buscar" />
  24. </p>
  25. </form>
  26. </body>
  27. </html>

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 28/11/2011, 17:59
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 867
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: lupa para un buscador con un form

vale gracias, me va bien pero es raro... cuando sitúo el cursor sobre la imagen se me mueve como un par de pixels hacia la derecha y se me subraya en un recuadro azul como si fuese un link o algo así. Tanto en el Chrome, IE, Opera, FireFox y Safari.
  #7 (permalink)  
Antiguo 28/11/2011, 18:05
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.403
Antigüedad: 7 años, 5 meses
Puntos: 1566
Respuesta: lupa para un buscador con un form

yo lo uso en ie9/8 , FF, opera, Chrome, safari y no se mueve nada, quizás tengas algo más en tu css, ó un reset, que esté afectando .

Te dejo una demo para que compares

http://foros.emprear.com/css/buscar-lupa.html


saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #8 (permalink)  
Antiguo 28/11/2011, 18:11
Avatar de humanista  
Fecha de Ingreso: abril-2005
Mensajes: 867
Antigüedad: 9 años, 8 meses
Puntos: 15
Respuesta: lupa para un buscador con un form

genial emprear!, tu ejemplo me fue perfecto
  #9 (permalink)  
Antiguo 29/11/2011, 06:24
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.679
Antigüedad: 6 años, 6 meses
Puntos: 943
Respuesta: lupa para un buscador con un form

aunque ya no hay caso y sólo por aclarar el por qué de mi respuesta

usar <button> tiene varias ventaja
  • con una sola regla se puede crear tantos botones con imágenes como queramos
Cita:
<form action="">
<input type="text" value="" name="busc" id="busc" />
<button type="submit" value=".">
<img src="img1.png" alt="submit" border="0" />
</button>
</form>
<br />
<form action="">
<input type="text" value="" name="enc" id="enc" />
<button type="submit" value=".">
<img src="img2.png" alt="submit" border="0" />
</button>
</form>
Cita:
button{
background: transparent;
border: none;
outline: none;
vertical-align: middle;
}
  • se le puede insertar texto
  • podemos insertarle un buen manojo de tags
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Última edición por IsaBelM; 29/11/2011 a las 06:30

Etiquetas: lupa, buscadores, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:19.
SEO by vBSEO 3.3.2