Saltar a contenido

Formularios

A la hora de enviar un formulario, debemos tener claro cuándo usar GET o POST.

  • GET: los parámetros se pasan en la URL

    • Máximo de 2048 caracteres y solo en ASCII.
    • Permite almacenar la dirección completa en el marcador o historial.
    • Es idempotente: dos llamadas con los mismos datos siempre deben dar el mismo resultado.
    • El navegador puede almacenar en caché las llamadas.
  • POST: los parámetros se envían de manera oculta (aunque no encriptada).

    • Sin límite de datos, permite datos binarios.
    • No se puede almacenar en caché.
    • No es idempotente: puede provocar cambios, como actualizar la base de datos.

Para recoger los datos, accedemos al array adecuado dependiendo del método del formulario:

<?php
$par = $_GET["parametro_get"]
$par = $_POST["parametro_post"]

Para los siguientes apartados, utilizaremos el siguiente ejemplo de formulario:

formulario.php
<form action="formulario.php" method="GET">
    <p><label for="nombre">Nombre del alumno:</label>
        <input type="text" name="nombre" id="nombre" value="" />
    </p>

    <p><input type="checkbox" name="modulos[]" id="modulosDWES" value="DWES" />
        <label for="modulosDWES">Desarrollo web en entorno servidor</label>
    </p>

    <p><input type="checkbox" name="modulos[]" id="modulosDWEC" value="DWEC" />
        <label for="modulosDWEC">Desarrollo web en entorno cliente</label>
    </p>

    <input type="submit" value="Enviar" name="enviar" />
</form>

Validación

Para la validación, es importante implementar validación doble:

  • En el cliente, mediante JavaScript.
  • En el servidor, antes de procesar la lógica de negocio, conviene volver a validar los datos para seguridad.
<?php
if (isset($_GET["parametro_get"])) {
    $par = $_GET["parametro_get"];
    // comprobar si $par tiene el formato adecuado, su valor, etc...
}

Librerías de validación

Existen diversas librerías que facilitan la validación de los formularios, como respect/validation o particle/validator.

Cuando estudiemos Laravel, profundizaremos en la validación de forma declarativa.

Parámetro multivalor

Algunos elementos HTML, como select multiple o checkbox, envían múltiples valores. Para recoger los datos de estos elementos, el nombre debe ser un array.

formulario.php
<select name="lenguajes[]" multiple="true">
    <option value="c">C</option>
    <option value="java">Java</option>
    <option value="php">PHP</option>
    <option value="python">Python</option>
</select>

<input type="checkbox" name="lenguajes[]" value="c" /> C<br />
<input type="checkbox" name="lenguajes[]" value="java" /> Java<br />
<input type="checkbox" name="lenguajes[]" value="php" /> Php<br />
<input type="checkbox" name="lenguajes[]" value="python" /> Python<br />

Para recuperar los datos:

formulario.php
<?php
$lenguajes = $_GET["lenguajes"];

foreach ($lenguajes as $lenguaje) {
    echo "$lenguaje <br />";
}

Volviendo a rellenar un formulario

Un sticky form es un formulario que conserva los valores ingresados. Para lograr esto, rellenamos los atributos value de los elementos HTML con la información previa:

formulario.php
<?php
if (!empty($_POST['modulos']) && !empty($_POST['nombre'])) {
  // Aquí se incluye el código a ejecutar cuando los datos son correctos
} else {
  // Generamos el formulario
  $nombre = $_POST['nombre'] ?? "";
  $modulos = $_POST['modulos'] ?? [];
  ?>
  <form action="<?php echo $_SERVER['PHP_SELF'];?>" method="POST">
   <p><label for="nombre">Nombre del alumno:</label>
    <input type="text" name="nombre" id="nombre" value="<?= $nombre ?>" /> 
   </p>
   <p><input type="checkbox" name="modulos[]" id="modulosDWES" value="DWES"
    <?php if(in_array("DWES",$modulos)) echo 'checked="checked"'; ?> />
    <label for="modulosDWES">Desarrollo web en entorno servidor</label>
   </p>
   <p><input type="checkbox" name="modulos[]" id="modulosDWEC" value="DWEC"
    <?php if(in_array("DWEC",$modulos)) echo 'checked="checked"'; ?> />
    <label for="modulosDWEC">Desarrollo web en entorno cliente</label>
   </p>
   <input type="submit" value="Enviar" name="enviar"/>
  </form>
<?php } ?>

Formulario

Formulario

Formulario

Subiendo archivos

Los archivos subidos se almacenan en el servidor en el array $_FILES , en la clave correspondiente al campo de tipo file del formulario.

formulario.php
<form enctype="multipart/form-data" action="<?php echo $_SERVER['PHP_SELF']; ?>"  method="POST">
    Archivo: <input name="archivoEnviado" type="file" />
    <br />
    <input type="submit" name="btnSubir" value="Subir" />
</form>

Configuración en php.ini

  • file_uploads: on / off
  • upload_max_filesize: 2M
  • upload_tmp_dir: directorio temporal (si no se configura, toma el predeterminado del sistema).
  • post_max_size: tamaño máximo de los datos POST, mayor que upload_max_filesize.
  • max_file_uploads: número máximo de archivos que se pueden cargar simultáneamente.
  • max_input_time: tiempo máximo para recibir datos (normalmente 60 segundos).
  • memory_limit: 128M
  • max_execution_time: tiempo de ejecución máximo del script (no incluye la carga de archivos).

Para procesar archivos subidos, accedemos a $_FILES:

formulario.php
<?php
if (isset($_POST['btnSubir']) && $_POST['btnSubir'] == 'Subir') {
    if (is_uploaded_file($_FILES['archivoEnviado']['tmp_name'])) {
        // subido con éxito
        $nombre = $_FILES['archivoEnviado']['name'];
        move_uploaded_file($_FILES['archivoEnviado']['tmp_name'], "./uploads/{$nombre}");

        echo "<p>Archivo $nombre subido con éxito</p>";
    }
}

Cada archivo cargado en $_FILES tiene:

  • name: nombre
  • tmp_name: ruta temporal
  • size: tamaño en bytes
  • type: tipo MIME1
  • error: indica si ocurrió un error; si fue exitoso, muestra 0.

Actividades

  • 📝 AC 402. (RA4 / CE4a CE4b / IC1 / 3p) - Utilizando el paso por parámetros GET, se solicita la creación de un formulario con los siguientes campos:

    • Nombre y apellidos.
    • Email.
    • URL página personal.
    • Sexo (radio).
    • Número de convivientes en el domicilio.
    • Aficiones (checkboxes) – poner mínimo 4 valores.
    • Menú favorito (lista selección múltiple) – poner mínimo 4 valores.

    Se han de formatear los valores obtenidos en una tabla-resumen.

  • 📝 AC 403. (RA4 / CE4a CE4b / IC1 / 3p) - Utilizando el paso por parámetros POST, duplica la AC 402 y realiza las siguientes acciones:

    • Elimina la URL de la página personal y los convivientes en el domicilio.
    • Añade los cubiertos que necesita el usuario.

    Se han de formatear los valores obtenidos en una tabla-resumen.

  • ⚓ AR 404. (RA4 / CE4a CE4b / IC1 / 3p) - Una vez que se ha trabajado con formularios, un compañero solicita que, a partir del formulario anterior, se introduzcan validaciones en HTML mediante el atributo required de los campos (uso los tipos adecuados para cada campo), y se compruebe los tipos de los datos y que cumplen los valores esperados (por ejemplo, en los checkboxes que los valores recogidos forman parte de todos los posibles). Se puede probar a pasar datos erróneos via URL y comprobar su comportamiento.

    Ayuda

    Investiga el uso de la función filter_var.

  • 🧪 PR 405. (RA4 / CE4a CE4b / IC2 / 5p) - El CTO solicita crear un formulario que permita subir un archivo al servidor para una futura implementación del proyecto. Además del fichero, se debe solicitar en el mismo formulario dos campos numéricos que soliciten la anchura y la altura. Se solicita la comprobación de que tanto el fichero como los datos llegan correctamente.

  • 🔬 AP 406. (RA4 / CE4a CE4b / IC1 / 3p) - Ahora, se solicita una modificación sobre el ejercicio anterior para que únicamente se permita subir imágenes. Si el usuario selecciona otro tipo de archivos, se le debe informar del error y permitir que suba un nuevo archivo. En el caso de subir el tipo correcto, visualizar la imagen con el tamaño de anchura y altura recibido como parámetro.


  1. Forma estandarizada de indicar la naturaleza y el formato de un documento, archivo o conjunto de datos. Puedes encontrar la lista más actualizada y completa en la página de tipos de medios (Media Types)