8 abril, 2025
Array de inputs en formularios y procesamiento con php
Una de las formas en las que se puede construir un formulario HTML es usando arrays para los campos input para luego ser recibidos y procesados en PHP.

Suscríbete a nuestro canal en Youtube
Suscríbirse¿Necesitas crear formularios dinámicos en HTML y procesar sus datos en PHP? En el desarrollo web, enviar arrays de campos input generados dinámicamente y recuperar sus valores es una tarea común que puede parecer complicada al principio. En este tutorial, te explico cómo hacerlo paso a paso usando HTML, JavaScript y PHP de forma sencilla y eficiente. Aprenderás a generar campos según las necesidades del usuario y a capturar sus valores en un array con PHP. ¡Ideal para proyectos dinámicos y formularios personalizados!
Índice
- ¿Por Qué Usar Arrays de Inputs Dinámicos?
- ¿Qué Aprenderás en Este Tutorial?
- Paso a Paso: Crear y Procesar un Formulario Dinámico
- Paso 1: Crear una Función en JavaScript para Solicitar la Cantidad
- Paso 2: Generar el Formulario Dinámico con PHP
- Paso 3: Enviar y Recuperar el Array en PHP
- Código Completo: HTML, JavaScript y PHP
- Mejoras y Buenas Prácticas
- Conclusión: Aplica Esta Técnica en Tus Proyectos
¿Por Qué Usar Arrays de Inputs Dinámicos?
En el desarrollo backend, a menudo necesitamos formularios que se adapten a las necesidades del usuario, como añadir múltiples productos, registrar varios nombres o capturar datos variables. Enviar un array de inputs dinámicos desde HTML y procesarlo en PHP te permite:
- Flexibilidad: Crear campos según lo que el usuario necesite.
- Eficiencia: Manejar datos múltiples en una sola solicitud.
- Escalabilidad: Adaptar tu aplicación a requisitos cambiantes.
Preguntas como "¿Cómo enviar un array de inputs generados dinámicamente?" o "¿Cómo recuperar esos valores en PHP?" tienen una solución simple que exploraremos aquí.
¿Qué Aprenderás en Este Tutorial?
- Crear una función en JavaScript para pedir al usuario cuántos campos desea.
- Generar dinámicamente un formulario HTML con la cantidad de campos solicitada.
- Usar cookies para persistir datos entre solicitudes.
- Enviar y procesar un array de inputs en PHP con un bucle.
Paso a Paso: Crear y Procesar un Formulario Dinámico
Paso 1: Crear una Función en JavaScript para Solicitar la Cantidad
Usaremos JavaScript para pedir al usuario cuántos campos quiere generar y almacenaremos ese valor en una cookie:
javascript
function pedirCantidad() {
let cantidad = Number(prompt("¿Cuántos campos deseas crear?", 1));
if (cantidad > 0) {
document.cookie = "campos=" + cantidad;
location.reload(); // Refresca la página para mostrar los campos
} else {
alert("Por favor, ingresa un número válido mayor a 0.");
}
}
- prompt: Solicita un número al usuario.
- document.cookie: Guarda la cantidad en una cookie.
- location.reload(): Actualiza la página para reflejar los cambios.
Paso 2: Generar el Formulario Dinámico con PHP
Con PHP, leemos la cookie y creamos los campos input dinámicamente:
php
<form method="POST" action="">
<?php
$campos = isset($_COOKIE['campos']) ? (int)$_COOKIE['campos'] : 0;
for ($i = 1; $i <= $campos; $i++) {
echo '<input type="text" name="datos[' . $i . ']"><br>';
}
if ($campos > 0) {
echo '<input type="submit" name="enviar" value="Enviar">';
}
?>
</form>
- $_COOKIE['campos']: Recupera la cantidad almacenada.
- name="datos[$i]": Nombra los inputs como un array para que PHP los reciba correctamente.
- Condición: Solo muestra el botón si hay campos.
Paso 3: Enviar y Recuperar el Array en PHP
Procesamos los datos enviados al presionar "Enviar":
php
<?php
if (isset($_POST['enviar'])) {
$datos = $_POST['datos'];
foreach ($datos as $indice => $valor) {
echo "Campo $indice: " . htmlspecialchars($valor) . "<br>";
}
}
?>
- $_POST['datos']: Recibe el array de inputs.
- foreach: Itera sobre los valores y los muestra.
- htmlspecialchars: Protege contra ataques XSS.
Código Completo: HTML, JavaScript y PHP
Aquí tienes el script completo en un solo archivo (por ejemplo, formulario_dinamico.php):
php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario Dinámico con PHP</title>
</head>
<body>
<h1>Crear Campos Dinámicos</h1>
<a href="#" onclick="pedirCantidad()">Definir cantidad de campos</a>
<form method="POST" action="">
<?php
$campos = isset($_COOKIE['campos']) ? (int)$_COOKIE['campos'] : 0;
for ($i = 1; $i <= $campos; $i++) {
echo '<input type="text" name="datos[' . $i . ']"><br>';
}
if ($campos > 0) {
echo '<input type="submit" name="enviar" value="Enviar">';
}
?>
</form>
<?php
if (isset($_POST['enviar'])) {
$datos = $_POST['datos'];
echo "<h2>Valores Recibidos:</h2>";
foreach ($datos as $indice => $valor) {
echo "Campo $indice: " . htmlspecialchars($valor) . "<br>";
}
}
?>
<script>
function pedirCantidad() {
let cantidad = Number(prompt("¿Cuántos campos deseas crear?", 1));
if (cantidad > 0) {
document.cookie = "campos=" + cantidad;
location.reload();
} else {
alert("Por favor, ingresa un número válido mayor a 0.");
}
}
</script>
</body>
</html>
Mejoras y Buenas Prácticas
- Validación: Añadí una verificación en JavaScript para evitar valores inválidos.
- Seguridad: Usé htmlspecialchars() para sanitizar la salida y prevenir XSS.
- Método POST: Cambié de GET a POST para enviar datos de forma más segura y sin límites de URL.
- Flexibilidad: El nombre del array (datos[]) permite índices personalizados.
- Optimización: Podrías reemplazar la cookie por una variable de sesión ($_SESSION) para mayor control y seguridad en producción.
Ejemplo con Sesiones (opcional):
php
session_start();
if (!isset($_SESSION['campos'])) $_SESSION['campos'] = 0;
if (isset($_POST['definir'])) $_SESSION['campos'] = (int)$_POST['cantidad'];
$campos = $_SESSION['campos'];
Conclusión: Aplica Esta Técnica en Tus Proyectos
Con este tutorial, has aprendido a generar formularios dinámicos y procesar arrays en PHP de manera práctica. Esta técnica es perfecta para aplicaciones como encuestas, formularios de productos múltiples o cualquier escenario donde necesites flexibilidad. Amplía el código con validaciones, estilos CSS o integraciones con bases de datos para hacerlo aún más robusto. ¡Empieza a implementarlo en tus proyectos y optimiza tu desarrollo web!
Leido 16283 veces | 1 usuarios
Descarga del código fuente PHP de Array de inputs en formularios y procesamiento con php
Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.
Opciones de descarga
- Usuarios Registrados: Inicia sesión para descarga inmediata.
- Nuevos Usuarios: Regístrate y descarga.
Preguntas de Cómo Enviar y Recibir un Array de Inputs Dinámicos en PHP
...