Creación y gestión de formularios con HTML y PHP

Un formulario es una de las herramientas más utilizadas e importante en el desarrollo web, ya que permite recopilar y enviar datos de los usuarios para procesarlos en un servidor.

La interacción entre HTML y PHP en los formularios es necesaria para manejar los datos que envían los usuarios. HTML crea la estructura del formulario, mientras que PHP procesa y maneja esos datos en el servidor.

Además, los formularios son altamente personalizables, ya que permiten adaptar su diseño y funcionalidad a las necesidades específicas del sistema o del usuario, utilizando estilos CSS para integrarse con la estética del sitio.

Una de las principales ventajas de su uso es su capacidad para validar datos. Otra gran ventaja es su capacidad para facilitar la comunicación interactiva entre el usuario y la aplicación, ya sea para búsquedas, registros, comentarios o compras.

En este artículo vamos a ver cómo se puede trabajar con un formulario en PHP (form en PHP), desde su construcción básica, los elementos que se pueden incluir y cómo validar los datos enviados.

Métodos GET y POST

Los formularios HTML envían datos al servidor utilizando los métodos GET o POST. En PHP, podemos identificar el método usado mediante $_SERVER['REQUEST_METHOD'], que nos indica si la solicitud es POST o GET.

Método GET

El método GET envía los datos como una cadena de consulta en la URL. Esto significa que los datos son visibles para el usuario, ya que se muestran directamente en el navegador.

Es útil para formularios que no manejan información confidencial, como formularios de búsqueda o filtros de contenido.

Como principales ventajas son que los datos son fácilmente accesibles y pueden ser compartidos mediante la URL y que es útil para consultas rápidas o pruebas.

Sin embargo, hay un límite en la cantidad de datos que se pueden enviar (dependiendo del navegador) y, además, al ser los datos visibles, hace menos seguro este método para información sensible.

Un ejemplo básico de este método:

Método POST

El método POST envía los datos de manera más segura al incluirlos en el cuerpo de la solicitud HTTP, no en la URL. Esto lo hace ideal para formularios que contienen información sensible, como credenciales o datos personales.

En este caso no hay un límite práctico en la cantidad de datos enviados y es más seguro que el método GET porque los datos no se muestran en la URL.

Pero, al no incluir datos en la URL, no se pueden compartir o guardar directamente los datos.

El código para el mismo formulario mostrado antes, pero con el método POST sería:

Tipos de elementos en un formulario

Los elementos de entrada (input) en un formulario HTML permiten interactuar con el usuario. PHP puede recoger estos datos mediante variables superglobales como $_POST y $_GET.

Algunos de los elementos principales que se pueden incluir en un formulario son:

Campos de texto (text)

Los campos de texto (text) son los más comunes y permiten a los usuarios escribir información textual. Se utilizan para capturar nombres, direcciones o cualquier entrada alfanumérica.

Ejemplo:

En PHP, el valor ingresado se puede capturar con:

Campos de contraseña (password)

Los campos de contraseña (password) ocultan la entrada del usuario reemplazándola con asteriscos o puntos, siendo ideales para contraseñas u otra información confidencial.

Y para capturar el valor en PHP:

Radio Button (radio) y Checkbox

Los elementos Radio Buttons (radio) permiten seleccionar una sola opción entre varias disponibles. En cambio, los elementos Checkbox (checkbox) permiten seleccionar múltiples opciones.

Un ejemplo de uso sería el siguiente:

Y el código php para capturar los valores:

Lista desplegable (select)

Un elemento select permite a los usuarios escoger una opción de los incluidos dentro de una lista desplegable.

Ejemplo:

En PHP:

Su uso principal es para la selección de un valor entre varias opciones dentro de un espacio compacto.

Área de texto (Textarea)

El elemento Textarea permite a los usuarios escribir texto en múltiples líneas. Es útil para comentarios o descripciones.

Ejemplo:

En PHP:

Su principal uso es para recolectar contenido extenso, como mensajes o textos descriptivos.

Botones (Button)

El elemento button puede usarse para acciones personalizadas. Este elemento puede incluir etiquetas HTML dentro.

Ejemplo:

Normalmente se suelen utilizar botones con diseño personalizado o acciones específicas mediante el uso del lenguaje JavaScript.

Campos de fecha y hora (date – time – datetime-local)

Los campos de fecha y hora permiten a los usuarios seleccionar fechas, horas o ambas, de manera fácil y visual. Son ideales para planificaciones o agendas.

Hay varios tipos de formatos disponibles:

Fecha (date):

Hora (time):

Fecha y hora combinadas (datetime-local):

Y, para la recogida de la información en PHP:

Rango (range)

Este input de rango (range) permite seleccionar un valor dentro de un rango mediante un control deslizante.

Ejemplo:

En PHP:

Su principal uso es para configurar valores en un rango, como volumen, edad o porcentaje.

Color

Este elemento de formulario de Color permite seleccionar un color en específico a través del uso de una interfaz gráfica.

Ejemplo:

En PHP:

Normalmente se utiliza para diseños personalizados, selección de paletas o preferencias de colores.

Número (number)

Este campo de números (number) permite introducir únicamente valores numéricos, con la opción de configurar rangos mínimos y máximos.

Ejemplo:

En PHP:

Se utiliza para capturar cantidades, edades o valores numéricos específicos.

Teléfono (tel)

El elemento teléfono (tel) es un campo optimizado para ingresar números de teléfono. No valida automáticamente el formato, pero puede mejorarse con patrones.

Ejemplo:

En PHP:

URL

El campo de URL valida que el usuario ingrese una dirección web válida.

Ejemplo:

En PHP:

Normalmente se usa para capturar URLs para sitios web o recursos en línea.

Email

El campo de email permite capturar direcciones de correo electrónico y las valida automáticamente.

Ejemplo:

En PHP:

Sirve para recolectar correos electrónicos con validación básica integrada.

Botones de reinicio (reset)

Este tipo de botón de reinicio (reset) permite restablecer todos los campos del formulario a sus valores predeterminados.

Ejemplo:

Se utiliza para limpiar rápidamente un formulario.

Campos de búsqueda (search)

El elemento de campos de búsqueda (serach) está optimizado para formularios de búsqueda, aunque funcionalmente es similar a un campo de texto. Sirve para buscar ciertos términos dentro del formulario.

Ejemplo:

Archivos (file)

El campo de archivos (file) permite seleccionar y cargar archivos al servidor.

Ejemplo:

Y, en el caso de que se quiera cargar múltiples archivos:

Ocultos (hidden)

Los campos ocultos (hidden) transmiten datos al servidor sin mostrarlos al usuario.

Ejemplo:

Su uso principal es el de enviar datos adicionales como tokens de seguridad o identificadores de usuario.

Botones de envío (submit)

Para el envío de todos los elementos incluidos en un formulario se hace a través de un botón de envío (submit). El atributo type="submit" es esencial para procesar formularios:

Imagen como botón de envío (image)

También se puede utilizar el elemento de imagen como botón de envío (image), que utiliza una imagen como botón interactivo para enviar el formulario.

Ejemplo:

Todos estos elementos permiten tener flexibilidad y adaptabilidad en la creación de formularios interactivos y funcionales para cualquier aplicación web.

Validación de datos

Antes de procesar los datos de un formulario en PHP, es fundamental validarlos. Esto garantiza que los datos sean seguros y estén en el formato correcto.

¿Por qué validar datos?

1. Seguridad: evita la inyección de código malicioso.
2. Precisión: asegura que los datos son correctos y completos.
3. Experiencia del usuario: permite identificar errores antes de enviar el formulario.

Validación básica

Para llevar a cabo una validación básica en PHP se puede controlar que los valores introducidos estén rellenos tal y como se muestra en el siguiente ejemplo:

Validación con filtros

PHP también incluye funciones como filter_var para validar correos electrónicos, URLs, entre otros campos que normalmente se deben validar. Podemos ver un ejemplo en el siguiente código:

Evitar inyecciones de código

Otro aspecto fundamental a la hora de validar datos de un formulario es el intentar evitar ser víctimas de inyecciones de código. Normalmente se suele utilizar el conocido ataque SQL Injection que consiste en insertar dentro de un campo de formulario consultas SQL para explotar vulnerabilidades en las consultas a las bases de datos indicadas.

Para intentar evitar estas inyecciones de código se puede usar, por ejemplo, htmlspecialchars para prevenir la ejecución de código HTML.

Esto permite sanitizar las entradas de información del usuario en el formulario. Por ejemplo:

Validaciones en la subida de archivos

También es importante la validación del tipo de archivos que los usuarios pueden subir en los campos concretos para ello dentro del formulario.

Para ello, hay 2 técnicas fundamentales. Por un lado, estaría el de verificar el tipo de archivo enviado permitiendo solo aquellos que se deseen y evitando de esta forma que se puedan enviar archivos maliciosos. Por ejemplo:

Y, por otro lado, es interesante limitar el tamaño permitido de los archivos enviados a través del formulario para evitar problemas. Por ejemplo:

Form con PHP, entrada de datos segura

Trabajar con formularios es fundamental para cualquier aplicación o página web dinámica. Desde la captura de datos hasta la gestión avanzada de archivos, la combinación de PHP y HTML proporcionan las bases para construir aplicaciones interactivas y seguras.

Y recuerda, es indispensable siempre validar las entradas para garantizar la seguridad de cualquier aplicación.

Si quieres profundizar en el aprendizaje de PHP y saber cómo construir sitios web seguros y dinámicos, te recomiendo nuestro Curso Superior de Programación de Páginas Web con PHP y Javascript.