FORMULARIOS EN PHP
1. Introducción
Un formulario sencillo con dos campos a rellenar y un botón para enviar
en HTML es de la siguiente forma:
<html>
<body>
<form action="formpost.php" method="post">
Nombre: <input type="text" name="nombre"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Cuando un usuario rellena los datos y hace click en enviar, los datos del
formulario se envían para ser procesados al archivo formpost.php. Los
datos se envían a través de HTTP con el método HTTP Post.
Una vez los datos están en formpost.php pueden mostrarse, guardarse
en una base de datos o lo que se necesite. En formpost.php vamos a
mostrarlos con echo:
<html>
<body>
Hola <?php echo $_POST["nombre"]; ?><br>
Tu email es: <?php echo $_POST["email"]; ?>
</body>
</html>
Lo mismo se puede conseguir con el método HTTP GET:
<html>
<body>
<form action="formget.php" method="get">
Nombre: <input type="text" name="nombre"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
Ahora el archivo donde recibimos los datos es formget.php:
<html>
<body>
Hola <?php echo $_GET["nombre"]; ?><br>
Tu email es: <?php echo $_GET["email"]; ?>
</body>
</html>
Estos han sido dos ejemplos muy sencillos para ver el funcionamiento
básico de un formulario. Siempre que se crean formularios hay que
tener muy en cuenta la seguridad, y para ello se utiliza la validación de
formularios.
Las superglobals $_GET y $_POST sirven para coleccionar datos de
formularios, y vamos a ver las diferencias a continuación.
2. GET y POST
$_GET y $_POST son variables superglobales que forman arrays
de keys y values, donde los keys son los nombres del formulario
(atributo "name") y los values son los datos de entrada de los usuarios.
El hecho de que sean superglobals hace que sean accesibles desde el
script independientemente del ámbito.
$_GET es un array de variables que se pasan al script a través de
los parámetros de URL. La información que se envía es visible para todo
el mundo y tiene limitada la cantidad de información que se puede
enviar a 2000 caracteres. Las URLs con los datos enviados pueden
guardarse en marcadores, lo que puede ser útil en ciertos casos. $_GET
sólo se emplea para el envío de información reducida y no sensible.
$_POST es un array de variables que se pasan al script a través del
método HTTP POST. La información que se envía no es visible para los
demás ya que los nombres y variables van embebidas en
el body del HTTP request. No tiene límites en la cantidad de información
a enviar. Soporta datos de entrada multi-part binary a la hora se subir
archivos al servidor (lo que permite subir múltiples archivos a la vez).
3. Tipos de elementos
Los 10 tipos de elementos más importantes para los formularios HTML
con PHP son:
Elemento Descripción
input type="text" Caja de texto
input Caja de texto donde se muestran asteriscos en lugar de los
type="password" caracteres escritos
input
Cajas seleccionables que permite escoger múltiples opciones
type="checkbox"
Cajas seleccionables en grupos que sólo permiten escoger
input type="radio"
una opción
input type="submit" Botón para enviar el formulario
input type="file" Cajas de texto y botón que permite subir archivos
Elemento escondido. Especialmente útil para tokens de
input type="hidden"
seguridad
option Una opción posible dentro de un elemento element
select Lista de opciones de elementos option
textarea Texto multilínea
4. Validación
La validación de formularios es algo fundamental ya que previene
posibles ataques de intrusos, además de asegurar que los datos que se
reciben son realmente del tipo deseado.
Existen dos formas de validación de formularios: en el lado del cliente y
en el lado del servidor. En el lado del cliente la validación suele ser
mediante JavaScript, es más rápida y evita enviar más trabajo al servidor.
En el lado del servidor se emplea PHP para verificar que se envían
valores correctos, es más seguro pero es más lento y da un poco de
trabajo al servidor.
El siguiente es un sencillo formulario algo más complejo con los
siguiente datos: Nombre, Contraseña, Educacion, Nacionalidad, Idiomas,
Email y Sitio web:
<h2>Formulario:</h2>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?
>" method="post">
Nombre:
<input type="text" name="nombre" maxlength="50"><br>
Contraseña:
<input type="password" name="password"><br>
Educacion:
<select name="educacion">
<option value="sin-estudios">Sin estudios</option>
<option value="educacion-obligatoria"
selected="selected">Educación Obligatoria</option>
<option value="formacion-profesional">Formación
profesional</option>
<option value="universidad">Universidad</option>
</select> <br>
Nacionalidad:
<input type="radio" name="nacionalidad"
value="hispana">Hispana</input>
<input type="radio" name="nacionalidad"
value="otra">Otra</input><br>
Idiomas:
<input type="checkbox" name="idiomas[]" value="español"
checked="checked">Español</input>
<input type="checkbox" name="idiomas[]"
value="inglés">Inglés</input>
<input type="checkbox" name="idiomas[]"
value="francés">Francés</input>
<input type="checkbox" name="idiomas[]"
value="aleman">Alemán</input><br>
Email:
<input type="text" name="email"><br>
Sitio Web:
<input type="text" name="sitioweb"><br>
// Botón de enviar
<input type="submit" name="submit" value="Enviar">
</form>
</body>
</html>
Vamos a ver los aspectos más característicos:
El atributo maxlength limita el número de caracteres para una caja
de texto.
Contraseña es del tipo password, lo que permite ocultar los
caracteres con * cuando se escribe.
Educación es un elemento select, que permite
seleccionar options en una lista. El texto en el atributo value es el
que se enviará a través del formulario. El atributo selected permite
mostrar el seleccionado por defecto.
Nacionalidad es del tipo radio, los elementos radio del mismo
grupo han de tener un único atributo name y sólo se puede
seleccionar uno.
Los idiomas están en un elemento checkbox, que permite enviar
varios datos en forma de array si se indica en el atributo name con
corchetes. Se puede añadir un atributo checked como
seleccionado por defecto.
En action se ha puesto _<?php echo
htmlespecialchars($_SERVER["PHPSELF"]); ?
>. $_SERVER["PHP_SELF"] es una superglobal que devuelve el
nombre del archivo en el que se encuentra el formulario, lo que
hace que los datos se envíen al mismo archivo, en lugar de
llevarlos a otro archivo para tratarlos. Si se emplea esta forma de
indicar el archivo para action, es necesario usar la
función htmlespecialchars(), que convierte caracteres especiales
en entidades HTML previniendo posibles ataques Cross-site
Scripting.
En este ejemplo todas las acciones de validar, enviar y recibir datos se
hacen en el mismo archivo form.php.
Primero vamos a crear un filtrado común para todos los campos con la
función filtrado():
function filtrado($datos){
$datos = trim($datos); // Elimina espacios antes y después de
los datos
$datos = stripslashes($datos); // Elimina backslashes \
$datos = htmlspecialchars($datos); // Traduce caracteres
especiales en entidades HTML
return $datos;
}
Esta función se aplicaría a cada campo a la hora de recibir los datos:
if(isset($_POST["submit"]) && $_SERVER["REQUEST_METHOD"] == "POST")
{
$nombre = filtrado($_POST["nombre"]);
$password = filtrado($_POST["password"]);
$educacion = filtrado($_POST["educacion"]);
$nacionalidad = filtrado($_POST["nacionalidad"]);
// Utilizamos implode para pasar el array a string
$idiomas = filtrado(implode(", ", $_POST["idiomas"]));
$email = filtrado($_POST["email"]);
$sitioweb = filtrado($_POST["sitioweb"]);
}
Para aceptar los datos se ha puesto _isset($POST["submit"]), que crea
la key submit cuando se hace click en el botón, y
_$_SERVER["REQUESTMETHOD"] == "post", que especifica que
el método request ha de ser POST. Se puede usar una de las dos formas
o las dos a la vez.
Para mostrar los datos:
<?php if(isset($_POST["submit"])): ?>
<h2>Mostrar datos enviados</h2>
Nombre : <?php isset($nombre) ? print $nombre : ""; ?> <br>
Contraseña : <?php isset($password) ? print $password : ""; ?> <br>
Educación : <?php isset($educacion) ? print $educacion : ""; ?>
<br>
Nacionalidad : <?php isset($nacionalidad) ? print $nacionalidad :
"";?> <br>
Idiomas : <?php isset($idiomas) ? print $idiomas : ""; ?> <br>
Email : <?php isset($email) ? print $email : ""; ?> <br>
Sitio web : <?php isset($sitioweb) ? print $sitioweb : ""; ?> <br>
<?php endif; ?>
Todos los campos anteriores son opcionales. La validación más básica
consiste en exigir que se rellene un campo, y comprobaremos también
que el email tiene un formato de email, que el sitio web es una URL
correcta y que password tiene un mínimo de 5 caracteres.
Las validaciones de formatos pueden realizarse mediante expresiones
regulares o con filtros. Siempre que sea posible, es mejor utilizar
los filtros de PHP.
if(isset($_POST["submit"]) && $_SERVER["REQUEST_METHOD"] == "POST")
{
// El nombre y contraseña son campos obligatorios
if(empty($_POST["nombre"])){
$errores[] = "El nombre es requerido";
}
if(empty($_POST["password"]) || strlen($_POST["password"]) < 5)
{
$errores[] = "La contraseña es requerida y ha de ser mayor
a 5 caracteres";
}
// El email es obligatorio y ha de tener formato adecuado
if(!filter_var($_POST["email"], FILTER_VALIDATE_EMAIL) ||
empty($_POST["email"])){
$errores[] = "No se ha indicado email o el formato no es
correcto";
}
// El sitio web es obligatorio y ha de tener formato adecuado
if(!filter_var($_POST["sitioweb"], FILTER_VALIDATE_URL) ||
empty($_POST["sitioweb"])){
$errores[] = "No se ha indicado sitio web o el formato no
es correcto";
}
// Si el array $errores está vacío, se aceptan los datos y se
asignan a variables
if(empty($errores)) {
$nombre = filtrado($_POST["nombre"]);
$password = filtrado($_POST["password"]);
$educacion = filtrado($_POST["educacion"]);
$nacionalidad = filtrado($_POST["nacionalidad"]);
// Utilizamos implode para pasar el array a string
$idiomas = filtrado(implode(", ", $_POST["idiomas"]));
$email = filtrado($_POST["email"]);
$sitioweb = filtrado($_POST["sitioweb"]);
}
}
El array de errores $errores guarda cada uno de los errores que se
registran para luego mostrarlos. Si el array tiene algún elemento, el
formulario no será aceptado. Para mostrarlos podemos hacerlo así:
<ul>
<?php if(isset($errores)){
foreach ($errores as $error){
echo "<li> $error </li>";
}
}
?>
</ul>
5. Subida de archivos
Lo más laborioso a la hora de hacer un formulario que permita la subida
de archivos es manejarlos y organizarlos una vez están en el servidor.
Inicialmente los archivos se suben a un directorio temporal y luego se
relocalizan.
Configuración en PHP para la subida de archivos:
Debe estar On la variable file_uploads en php.ini.
En php.ini también se encuentra la variable upload_tmp_dir, que
indica el directorio donde se dirigirán los archivos cuando se
suban. El tamaño máximo viene indicado en el mismo archivo de
configuración por upload_max_filesize. Para ver estos valores se
puede
utilizar ini_get('upload_tmp_dir') e ini_get('upload_max_filesize').
upload_tmp_dir sólo es manipulable desde el php.ini o
httpf.conf, upload_max_filesize puede también desde .htaccess o
un user.ini (tienen
modo PHP_INI_SYSTEM y PHP_INI_PERDIR respectivamente).
Es necesario que los permisos tanto del directorio temporal como
del directorio final sean de escritura.
Para que un formulario tenga la capacidad de aceptar archivos se
añade el atributo enctype="multipart/form-data" al elemento
form.
De nuevo en este ejemplo pondremos todo el contenido en un
archivo form2.php:
<h2>Formulario subida de archivos</h2>
<html>
<body>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?
>" method="POST" enctype="multipart/form-data">
<input type="hidden" name="MAX_FILE_SIZE" value="<?php echo
$max_file_size; ?>" />
<input type="file" name="imagen" />
<input type="submit" name="submit" />
</form>
</body>
</html>
Se incluye un input del tipo hidden que limita el tamaño máximo del
archivo que se puede subir (en bytes).
La información sobre un archivo subido la proporciona el array
multidimensional $_FILES. Este array se crea con el key que se indique
en el input del formulario, en este caso "imagen":
$_FILES["imagen"]["name"]. Guarda el nombre original del archivo
del cliente.
$_FILES["imagen"]["type"]. Guarda el MIME type del archivo.
$_FILES["imagen"]["size"]. Guarda el tamaño del archivo en bytes.
$_FILES["imagen"]["tmp_name"]. Guarda el nombre del archivo
temporal.
$_FILES["imagen"]["error"]. Guarda cualquier código de error que
pueda provocar la subida del archivo.
La función move_uploaded_file() mueve un archivo subido del directorio
temporal al directorio que se indique.
$directorioSubida = "uploads/";
$max_file_size = "51200";
$extensionesValidas = array("jpg", "png", "gif");
if(isset($_POST["submit"]) && isset($_FILES['imagen'])){
$errores = array();
$nombreArchivo = $_FILES['imagen']['name'];
$filesize = $_FILES['imagen']['size'];
$directorioTemp = $_FILES['imagen']['tmp_name'];
$tipoArchivo = $_FILES['imagen']['type'];
$arrayArchivo = pathinfo($nombreArchivo);
$extension = $arrayArchivo['extension'];
// Comprobamos la extensión del archivo
if(!in_array($extension, $extensionesValidas)){
$errores[] = "La extensión del archivo no es válida o no se
ha subido ningún archivo";
}
// Comprobamos el tamaño del archivo
if($filesize > $max_file_size){
$errores[] = "La imagen debe de tener un tamaño inferior a
50 kb";
}
// Comprobamos y renombramos el nombre del archivo
$nombreArchivo = $arrayArchivo['filename'];
$nombreArchivo = preg_replace("/[^A-Z0-9._-]/i", "_",
$nombreArchivo);
$nombreArchivo = $nombreArchivo . rand(1, 100);
// Desplazamos el archivo si no hay errores
if(empty($errores)){
$nombreCompleto = $directorioSubida.$nombreArchivo.".".
$extension;
move_uploaded_file($directorioTemp, $nombreCompleto);
print "El archivo se ha subido correctamente";
}
}
El array $_FILES['imagen']['error'] especifica por qué no se ha podido
subir el archivo, lo que permite especificar un mensaje de vuelta para
cada tipo de error. Devuelve un integer con el número de error:
Error Valor Significado
UPLOAD_ERR_OK 0 No hay errores
UPLOAD_ERR_INI_SIZE 1 Supera el tamaño máximo indicado en php.ini
Supera el tamaño máximo indicado en
UPLOAD_ERR_FORM_SIZE 2
MAX_FILE_SIZE de html
UPLOAD_ERR_PARTIAL 3 Sólo se ha subido el archivo parcialmente
UPLOAD_ERR_NO_FILE 4 No se ha subido ningún archivo
UPLOAD_ERR_NO_TMP_DI
6 Falta la carpeta temporal
R
UPLOAD_ERR_CANT_WRITE 7 No se puede escribir en el directorio especificado
UPLOAD_ERR_EXTENSION 8 Una extensión de PHP ha detenido la subida
6. Subida múltiple de archivos
Una subida múltiple de archivos en PHP en la práctica se hace
normalmente con ayuda de JavaScript. Una buena librería para subir
archivos es DropzoneJS.
En el formulario HTML lo único que cambia es que se añade un
atributo multiple y que en el atributo name del input file se añade
corchetes para indicar que es un array:
<input type="file" name="imagenes[]" multiple="multiple" />
En cuanto al backend, omitiendo validaciones esta puede ser una forma
de hacerlo:
$directorioSubida = "uploads/";
$max_file_size = "51200";
if(isset($_POST["submit"]) && isset($_FILES['imagenes'])){
$nombres = $_FILES['imagenes']['name'];
$temporales = $_FILES['imagenes']['tmp_name'];
$tipos = $_FILES['imagenes']['type'];
$errores = $_FILES['imagenes']['error'];
// Iteramos sobre los arrays creados
for ($i = 0; $i < count($temporales); $i++){
if(move_uploaded_file($temporales[$i], $directorioSubida.
$nombres[$i])){
echo "Se ha subido {$nombres[$i]} correctamente <br>";
} else {
echo "Ha habido algún error al subir algún archivo";
}
}
}
