Formularios de búsqueda 🔍 — JS: Desarrollo web

• Formularios de búsqueda
• Atributos de los formularios de búsqueda

Los formularios HTML son la herramienta principal para crear sitios web interactivos. A través de ellos se lleva a cabo el registro del usuario, la adición de amigos, el pago de compras, la filtración de productos en una tienda y similares. En esta lección, nos familiarizaremos con el tipo más simple de formularios.

Formularios de búsqueda

Los formularios más simples son los de búsqueda. No cambian ni crean nada, solo se utilizan para filtrar datos. Estos formularios a menudo se utilizan en los sistemas de búsqueda. Un ejemplo de un formulario de búsqueda es el siguiente:

Así es como se ve este formulario en el código:

<form action="/courses" method="get">
  <input type="search" required name="term">
  <input type="submit" value="Buscar">
</form>

El elemento principal del formulario es la etiqueta <form>. Todos los elementos del formulario deben estar anidados en él. Esta etiqueta tiene dos atributos importantes:

• action. Aquí puedes especificar la dirección para enviar los datos del formulario. Por defecto se utiliza la dirección de la página actual
• method. Acepta dos posibles parámetros: get o post, que corresponden a los métodos HTTP

El valor predeterminado del atributo method es get. Después de enviar el formulario de esta manera, sus datos se transmiten como parámetros de la solicitud.

• input.
• button.
• select.
• textarea.

Gracias al atributo type, la etiqueta <input> toma muchas formas diferentes:

• Selección múltiple checkbox.
• Selección individual radio.
• Botón de envío del formulario submit.
• Campo para introducir la contraseña password.
• Campos para introducir el teléfono tel o el correo electrónico email.

Atributos de los formularios de búsqueda

Todos los elementos del formulario tienen atributos comunes y específicos.

Un atributo común es el nombre. Debe especificarse para todos los elementos del formulario a excepción de los botones, porque el nombre se utiliza para acceder al contenido. En el ejemplo anterior se utiliza un campo de texto de tipo search con el nombre term, por eso, después de enviar el formulario, aparece la entrada ?term=sql en la dirección.

Además, casi todos los formularios tienen siempre un botón de tipo submit, que es responsable de enviar los datos. El nombre del botón se establece a través del atributo value.

Veamos un ejemplo de formulario:

<input type="submit" value="Buscar">

No es necesario agregar un botón de envío. Por defecto, simplemente presionar Enter es suficiente, y el navegador enviará el formulario al servidor.

Otro atributo común es required. Este activa la verificación de completitud en el lado del cliente, por ejemplo, en el navegador. Imagina que un usuario no ha llenado los elementos con este atributo e intenta enviar el formulario. En tal caso, verá un mensaje que le pedirá que llene el campo obligatorio.

Desde el punto de vista del servidor, no existe tal formulario. El servidor ejecuta un controlador normal que recibe una petición típica con un conjunto adicional de parámetros:

import fastify from 'fastify';
import view from '@fastify/view';
import pug from 'pug';

const app = fastify();
const port = 3000;

await app.register(view, { engine: { pug } });
const state = {
  courses: [
    // ...
  ],
};

app.get('/courses', (req, res) => {
  const term = req.query.term;
  if (term !== null) {
    // Filtramos los cursos por term
  } else {
    // Extraemos todos los cursos que queremos mostrar
  }

  const data = { term, courses: state.courses };

  res.view('courses/index', data);
});

app.listen({ port }, () => {
  console.log(`La aplicación de ejemplo está escuchando en el puerto ${port}`);
});

El último detalle en el trabajo de los formularios de búsqueda es la sustitución de los valores actuales.

Imagina que un usuario ha introducido algún valor en el formulario de búsqueda. Cuando le mostremos la página de resultados, en ella todavía debe estar el formulario de búsqueda con el valor que el usuario introdujo. Así es como funcionan la mayoría de los sitios web.

Para implementar esta posibilidad, necesitas hacer dos cosas:

1. Pasar los datos al modelo:

  const data = { term, courses: state.courses };

  res.view('courses/index', data);

1. Insertar los datos en el formulario:

  form(role = 'form' method = 'GET' action = '/courses')
    input(type = 'search', name = 'term', value = term)
    input(type = 'submit' value = 'search')

Ahora todo funcionará como el usuario espera: introducirá la consulta y la enviará, luego recibirá una página con los resultados, en la que sigue estando el formulario de búsqueda y el texto de la consulta.

Trabajo independiente

1. Realiza todos los pasos del tutorial en tu computadora. Añade a la página de visualización de todos los cursos la capacidad de filtrar los cursos por título.
2. Añade también la capacidad de buscar un curso por descripción, para filtrar todos los cursos que contienen en su descripción la subcadena ingresada en el campo.

Usa cualquier lista de cursos de las lecciones anteriores o crea la tuya propia.