NorfiPC
NorfiPC » Diseño y edición web » Crear formularios

Como crear cuadros o formularios de búsquedas en una página web

Código en HTML5 para un cuadro de buscar con Google en sitios específicos, por distintos tipos de archivos, usando operadores y otros parámetros y opciones.
Como crear cuadros o formularios de búsquedas en una página web

Comparto en este artículo varios códigos para crear cuadros de búsquedas, que pueden ser usados en un blog o sitio web o hasta de forma local en la computadora y personalizarlos para hacer cualquier tipo de búsqueda en internet.
Explico como usar los elementos FORM e INPUT de HTML5, con los nuevos atributos que se introducen, para hacerlos más funcionales.

Uso de los formularios en HTML5


El elemento form de HTML, permite crear e insertar distintos tipos de formularios en una página de internet, para acciones diferentes.
En HTML5 se le han agregados varios atributos que enriquecen sus funcionalidades.
Se pueden crear formularios para varios propósitos, entre ellos registrarse, contactar, enviar información o datos, interactuar, controlar o definir el contenido que se muestra, hacer búsquedas, etc.
En esta página solo comparto como crear distintos formularios o cuadros para buscar en el sitio, en uno específico o en internet.


Crear un formulario de búsqueda


La mejor opción para experimentar y probar los formularios que comparto, es crear un documento HTML que se puede ejecutar en la misma computadora y modificar agregando o quitando elementos.
Para eso copia el siguiente código y pégalo en un documento de texto creado con el Blog de notas u otro editor de texto plano y dale de nombre: "buscar.html".
Formulario base
 <!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Buscar</h1>
<form method="get" action="https://www.google.com/search">
  <input class="entrada" type="search" name="q">
</form>
</body>
</html>


Formulario o cuadro de búsqueda elemental


Un formulario básico como el que incluyo en el código de ejemplo anterior, consta de un elemento form encerrado con dos etiquetas <form> y una entrada input.
El código es el siguiente:
<form method="get" action="https://www.google.com/search">
  <input type="search" name="q">
</form>
En la página creada se muestra un sencillo cuadro, algo similar al siguiente (modificado con CSS para su mejor visualización):
Al escribir un término en el cuadro y presionar la tecla Enter, se envía una solicitud de búsqueda a Google, abriéndose el resultado en la misma pestaña del navegador, por lo que no recomiendo probarlo online ya que saldríamos de esta página.
A continuación explico la función de cada elemento y atributo.

Elemento FORM, atributos necesarios

El elemento form necesita dos atributos: "method" y "action".
- action: Es usado para especificar la dirección URL donde los datos serán enviados. Es opcional, pero obligatorio en formularios de búsquedas.
En el ejemplo anterior se envía la petición de búsqueda a Google, pero también puede hacerse a otros motores de búsquedas de internet o a una base de datos local.
- method: Define el método HTTP usado para enviar los datos, que puede ser POST o GET.
En los formularios de búsquedas generalmente es usado GET, en el que los datos son agregados al final de la dirección URL, después del carácter de interrogación (?).
El largo es limitado a 300 caracteres.
- target: Atributo opcional para definir donde mostrar la respuesta recibida.
Usando target="_blank" (no aparece en el código de ejemplo), podemos mostrar el resultado en una nueva pestaña del navegador.

Elemento INPUT, tipos disponibles en HTML5

Input o entrada en los formularios, es un elemento cuyo uso y apariencia puede cambiar de acuerdo al atributo "type" empleado.
Puede definirse con él una entrada para texto, búsqueda, contraseñas, email, fecha, hora, mes, numero, un botón para enviar o para limpiar (reset), una casilla (checkbox), marca (radio), control deslizante (range), subir archivos.
A continuación muestro algunos ejemplos de las distintas apariencias que puede tener el elemento input.
Da un clic en los elementos tipo color, date, time, number y range y usa las teclas de flecha para comprobar como se puede cambiar su valor.

Ejemplos de elementos INPUT


Los tipos color, date y time no son soportados por todos los buscadores.


Tipo search en formularios de búsquedas

En un formulario de búsqueda es imprescindible un elemento input con el tipo "search", aunque también puede ser "text".
La diferencia del tradicional tipo "text", con el introducido en HTML5 "search", es que en este último el navegador adiciona una pequeña cruz (X), que puede ser usada para aclarar el cuadro.
Hasta la fecha de la publicación de este artículo esta funcionalidad es usada por los navegadores Google Chrome y Safari.

Otros elementos y atributos para perfeccionar el cuadro de búsqueda


El cuadro de búsqueda elemental anterior, podemos perfeccionarlo, agregándole un botón para iniciar la búsqueda y atributos que lo hagan más amigable y funcional.

Agregar botones al cuadro de búsqueda

Un botón para iniciar la búsqueda no es completamente necesario, porque esta se puede iniciar presionando la tecla Enter, tanto en computadoras como en dispositivos móviles, si el foco se encuentra en el formulario.
Las especificaciones para la accesibilidad web declaran que en los formularios el envío de datos es implícito.
No obstante ayuda agregar un botón que lo permita.
Hay dos formas de crear botones para un formulario:
- Un elemento input que puede tener el tipo "button", "submit" o "reset".
- Un elemento button con cualquiera de los tipos anteriores.
Algunos ejemplos del código para crear botones usados para enviar o limpiar el cuadro.
<input type="submit"> 
<input type="reset"> 
<button type="submit">Enviar</button>   
<button type="reset">Limpiar</button> 
El valor "submit" desencadena la acción de enviar la consulta y "reset" aclara los datos introducidos previamente.
En los elementos input si se desea sustituir el nombre predeterminado que mostrará el botón, se puede agregar el atributo "value".


Cuadro de busqueda mejorado


Sustituye el siguiente código en el inicial, para comprobar las funcionalidades agregadas al cuadro de búsqueda.
<form method="get" action="https://www.google.com/search" target="_blank">
<input type="search" name="q" placeholder="Término a buscar" autofocus required>
<input type="submit"> 
</form>
Este si podemos probarlo, porque se abre en una nueva pestaña del navegador.
Le agregamos los siguientes atributos al elemento input, que por supuesto son opcionales:

Placeholder
Con el atributo "placeholder", podemos definir el texto que deseamos se muestre en el cuadro de búsqueda.
En este ejemplo es: "Término a buscar"
Cuando se introduce cualquier caracter, dicho texto desaparece.

Autofocus
Con el atributo "autofocus", se mueve el foco al cuadro de búsqueda, de modo que se puede comenzar a escribir directamente en el, sin que sea necesario dar un clic o tocar para seleccionarlo.
Regarga la página y pruébalo.

Required
Con el atributo "required", se puede especificar que este campo es requerido.
Al presionar el botón Submit o Buscar, si no se ha introducido ningún dato, el navegador mostrará el mensaje: "Completa este campo" o "Por favor llena este campo".
Por supuesto no es necesario, pero explico esta funcionalidad.


Otros atributos que admite el elemento input


De forma predeterminada el elemento input, si se deja en blanco tu tipo o se le da el valor text o search, muestra un cuadro de texto, con un ancho que puede contener hasta 20 caracteres.
Esto depende de la fuente usada.
La cantidad de caracteres se puede definir usando el atributo "size".
Un número mínimo o máximo para los caracteres, también se puede especificar usando los atributos "maxlength" o "minlength".
Otros atributos de input no usados generalmente en formularios de búsquedas son: "spellcheck", "readonly" y "pattern".
Los dispositivos móviles con iOS (iPhone e iPad) requieren que los elementos input, al igual que select y textarea, tengan un tamaño de fuente de 16 px o más.
Si no es así, al presionar en ellos, se activa el zoom automático deformando el ancho de la página.
Lee como solucionarlo: Deshabilitar el auto zoom en campos de entrada en iOS

Agregar variables de búsquedas al formulario


Al formulario anterior podemos agregar otras opciones que nos permitan filtrar y refinar cualquier búsqueda.
Podemos crear un formulario para buscar con Google, pero solo en sitios de internet específicos, incluyendo el nuestro, buscar por tipos de archivos, restringir la fecha de los archivos, el número de resultados que se muestran y muchas opciones más.
Para todo lo anterior debemos crear nuevos elementos input ocultos, que pasen la variable con el valor necesario.
A continuación muestro algunos ejemplos.
Todos usan la base de datos de Google.
Solo cópialos, agrégalos al formulario inicial, sustituye los valores necesarios y pruébalos.

Agregar al formulario la opción de buscar solo en un sitio de internet

Para buscar en la base de datos de Google, pero solo la información indexada en un sitio web, necesitamos agregar al formulario solo una de las siguientes etiquetas.
<input type="hidden" name="q" value="site:norfipc.com">
<input type="hidden" name="as_sitesearch" value="norfipc.com">
Solo sustituye "norfipc.com", por el nombre de dominio del sitio donde deseas buscar.
Esta opción podemos aprovecharla para crear un cuadro de búsqueda para insertar en las páginas de nuestro blog o sitio web, que les permita a los lectores hacer búsquedas solo en nuestro sitio.

Agregar al formulario la opción de buscar por tipos de archivos específicos

Otra posibilidad es la de crear un formulario o agregar al existente, una opción que nos permita buscar en internet o en un sitio especifico, distintos tipos de archivos.
Para eso agrega la siguiente etiqueta y especifica en el atributo "value", el valor del tipo de archivo a buscar.
<input type="hidden" name="as_filetype" value="DOC">
Por ejemplo, podemos de esta forma buscar archivos de texto, documentos de Microsoft Word, presentaciones de PowerPoint, libros en formato EPUB, ETC. La lista es bastante amplia.
Usa las extensiones de estos archivos sin el punto, como: TXT, DOC, DOCX, PPT, EPUB, etc.

Definir la cantidad de resultados

Para establecer el numero de resultados que debemos recibir al realizar una busqueda, usa la siguiente etiqueta.
<input type="hidden" name="num" value="10">
Sustituye el valor del atributo "value", que en este ejemplo es 10, por el necesario.


Definir el idioma del resultado

<input type="hidden" name="lr" value="lang_es">
Sustituye el valor del atributo "value", que en este ejemplo "es" (español), por el código correspondiente a otro lenguaje, si fuera necesario.

Restringir fecha de los datos a buscar

Es posible agregar una variable que permita restringir la fecha de los datos a buscar a un periodo determinado, para eso copia y pega la siguiente etiqueta:
<input type="hidden" name="as_qdr" value="m6">
En este caso la variable utilizada reduce la búsqueda a archivos modificados solo en los últimos seis meses, sustitúyelo por el periodo que te interese.

Agregar operadores de Google para las búsquedas

Google permite el uso de los llamados operadores.
Son términos que al incluirse en la URL a la que se hace la consulta, permiten filtrar esta y reducir los resultados a preferencias determinadas.
Algunos de los operadores son los siguientes:
Allinurl: Buscar palabras y que solo aparezcan en una dirección web o URL.
Allintitle: Buscar palabras y que solo aparezcan en el título.
Allintext: Buscar palabras y que aparezcan todas en el cuerpo de la página.
Allinanchor: Buscar palabras y que aparezcan todas en vínculos de la página.
Inurl: Buscar palabras pero que no sea necesario que aparezcan todas en una dirección web o URL.
Intitle: Buscar palabras pero que no sea necesario que aparezcan todas en el título.
Hay multitud de combinaciones que se pueden utilizar, para agregar esta variable copia y pega igual que en el paso anterior la siguiente etiqueta al formulario de busqueda:
<input type="hidden" name="hq" value="-inurl:htm -inurl:html intitle:'index of'">
En este caso de ejemplo se incluyen los operadores: -inurl:htm -inurl:html intitle: e index.of, lo que significa que el término que escribas en el cuadro de búsqueda, Google lo buscará en páginas web en las que aparezca en la dirección url, pero que solo tengan las extensiones de archivo htm y html, además en el título y en el index de cualquier directorio.
Es solo un ejemplo, puedes experimentar con distintas combinaciones.


Formulario completo con opciones de búsquedas


Agrupando las opciones explicadas anteriormente se puede crear un formulario para buscar con Google, que permita buscar de forma general o en distintos sitios y que permita hacer una búsqueda de distintos tipos de archivos.

Buscar con Google


Tipos de archivos:

Sitios web:

Para seleccionar las distintas opciones incluimos dos elementos "select"
Usa el siguiente código y personalízalo de acuerdo a tus intereses.
<!DOCTYPE html>
<html lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
.entrada{margin:8px 0 8px 0;padding:6px;font-size:1em;border: 5px solid #3892dd;width:260px;}
.select{margin:6px 0 12px 0;padding:6px;font-size:1em;border: 2px solid #3892dd;width:260px;}
.botb{margin:8px 0 8px 0;padding:9px;font-size:1em;background-color:#3892dd;border:0;color:#fff;}
</style>
</head>
<body>
<h2>Buscar con Google</h2>
<form method="get" action="https://www.google.com/search" target="_blank">
<fieldset>
<input class="entrada" type="search" name="q" placeholder="Término a buscar" autofocus required><br>
<b>Tipos de archivos:</b><br> 
    <select class="select" name="as_filetype">
	   <option label="Todos" value="" selected="selected"></option>
       <option value="ppt">PowerPoint</option>
       <option value="xls">Excel</option>
       <option value="doc">Word</option>
    </select><br>
<b>Sitios web:</b><br> 
    <select class="select" name="as_sitesearch">
	   <option label="Todos" value="" selected="selected"></option>
       <option value="norfipc.com">NorfiPC.com</option>
       <option value="es.wikipedia.org/">Wikipedia</option>
       <option value="github.com">Github</option>
    </select><br>
<input type="hidden" name="num" value="50"> 
<input class="botb" type="submit" value="Buscar">  
</fieldset>  
</form>
</body>
</html>    
El código incluye la hoja de estilo CSS.
Consulta en la siguiente página el código HTML y CSS para crear un formulario para un sitio web, con el estilo de Google: Cuadro de búsqueda con el estilo de Google


Buscar con otros motores de búsquedas de internet


Hasta ahora en los ejemplos he usado la base de datos de Google, pero podemos usar otros motores, como el de Bing, Ask, DuckDuckGo y otros.
Las direcciones URL para buscar en los motores de búsquedas más populares, son las siguientes:
https://www.bing.com/search?q=
https://search.yahoo.com/search?p=
https://www.ask.com/web?q=
https://www.wolframalpha.com/input/?i=
https://duckduckgo.com/?q=
https://es.wikipedia.org/wiki/
También si poseemos un sitio en WordPress podemos usar nuestra propia base de datos.

Páginas relacionadas