En el desarrollo de aplicaciones web con Laravel, la creación y gestión de formularios es una tarea fundamental. Aunque la última versión de Laravel no incluye ninguna utilidad para la generación de formularios, trabajar con HTML y Blade nos permite construir interfaces robustas y funcionales.
Estructura Básica de un Formulario en Laravel
Los formularios son esenciales para recoger datos de los usuarios. Antes de adentrarnos en la declaración de campos de texto, es importante comprender cómo configurar un formulario en un proyecto Laravel.
La función url generará la dirección a la ruta indicada. Por ejemplo, podemos definir la ruta "user" de tipo GET para que nos devuelva la página con el formulario para crear un usuario, y por otro lado definir la ruta "user" de tipo POST para procesar el envío del formulario. De esta forma cada ruta apuntará a un método distinto de un controlador y nos facilitará la separación del código.
HTML solo permite el uso de formularios de tipo GET o POST. Si queremos enviar un formulario usando otros de los métodos (o verbos) definidos en el protocolo REST, como son PUT, PATCH o DELETE, tendremos que añadir un campo oculto para indicarlo. Laravel se encargará de recoger el valor de dicho campo y de procesarlo como una petición tipo PUT (o la que indiquemos). Además, para facilitar más la definición de este tipo de formularios ha añadido la función method_field que directamente creará este campo oculto:
<form action="/foo/bar" method="POST"> <?php echo method_field('PUT'); ?> ...</form>Protección CSRF en Formularios Laravel
El CSRF (del inglés Cross-site request forgery o falsificación de petición en sitios cruzados) es un tipo de exploit malicioso de un sitio web en el que comandos no autorizados son transmitidos por un usuario en el cual el sitio web confía. Laravel proporciona una forma fácil de protegernos de este tipo de ataques. Simplemente tendremos que llamar al método csrf_field después de abrir el formulario, igual que vimos en la sección anterior, este método añadirá un campo oculto ya configurado con los valores necesarios. A continuación se incluye un ejemplo de uso:
Lea también: IVA 21% Excel
<form action="/profile" method="POST"> <?php echo csrf_field(); ?> ...</form>
Elementos de un Formulario: Campos de Entrada de Texto
A continuación vamos a ver los diferentes elementos que podemos añadir a un formulario. En todos los tipos de campos en los que tengamos que recoger datos es importante añadir sus atributos name e id, ya que nos servirán después para recoger los valores rellenados por el usuario.
Campo de Texto Simple (<input type="text">)
Para crear un campo de texto usamos la etiqueta de HTML input, para la cual tenemos que indicar el tipo text y su nombre e identificador de la forma:
<input type="text" name="nombre" id="nombre">
En este ejemplo hemos creado un campo de texto vacío cuyo nombre e identificador es "nombre". El atributo name indica el nombre de variable donde se guardará el texto introducido por el usuario y que después utilizaremos desde el controlador para acceder al valor.
Valores por Defecto y Pre-rellenado de Campos de Texto
Si queremos podemos especificar un valor por defecto usando el atributo value:
<input type="text" name="nombre" id="nombre" value="Un nombre">
Desde una vista con Blade podemos asignar el contenido de una variable (en el ejemplo $nombre) para que aparezca el campo de texto con dicho valor. Esta opción es muy útil para crear formularios en los que tenemos que editar un contenido ya existente, como por ejemplo editar los datos de usuario. A continuación se muestra un ejemplo:
Lea también: Guía IVA reducido
<input type="text" name="nombre" id="nombre" value="{{ $nombre }}">Para mostrar los valores introducidos en una petición anterior podemos usar el método old, el cual recuperará las variables almacenadas en la petición anterior. Por ejemplo, imaginad que creáis un formulario para el registro de usuarios y al enviar el formulario comprobáis que el usuario introducido está repetido. En ese caso se tendría que volver a mostrar el formulario con los datos introducidos y marcar dicho campo como erróneo. Para esto, después de comprobar que hay un error en el controlador, habría que realizar una redirección a la página anterior añadiendo la entrada como ya vimos con withInput(), por ejemplo: return back()->withInput();. El método withInput() añade todas las variables de entrada a la sesión, y esto nos permite recuperarlas después de la forma:
<input type="text" name="nombre" id="nombre" value="{{ old('nombre') }}">Otros Tipos de Campos de Entrada <input>
Utilizando la etiqueta input podemos crear más tipos de campos relacionados con texto, como contraseñas o campos ocultos:
- Campos de Contraseña: Los campos para contraseñas lo único que hacen es ocultar las letras escritas.
- Campos Ocultos (Hidden): Los campos ocultos se suelen utilizar para almacenar opciones o valores que se desean enviar junto con los datos del formulario pero que no se tienen que mostrar al usuario. En las secciones anteriores ya hemos visto que Laravel lo utiliza internamente para almacenar un hash o código para la protección contra ataques tipo CSRF y que también lo utiliza para indicar si el tipo de envío del formulario es distinto de POST o GET. Para definir estos campos se hace exactamente igual que para un campo de texto pero cambiando el tipo por el deseado, por ejemplo:
<input type="password" name="password" id="password"><input type="hidden" name="user_id" value="123">
Áreas de Texto Multilínea (<textarea>)
Para crear un área de texto simplemente tenemos que usar la etiqueta HTML textarea de la forma:
<textarea name="mensaje" id="mensaje"></textarea>
Esta etiqueta además permite indicar el número de filas (rows) y columnas (cols) del área de texto. Para insertar un texto o valor inicial lo tenemos que poner entre la etiqueta de apertura y la de cierre. A continuación se puede ver un ejemplo completo:
<textarea name="descripcion" id="descripcion" rows="5" cols="40">Contenido inicial del área de texto.</textarea>
Asociación de Etiquetas con Campos de Formulario (<label>)
Las etiquetas nos permiten poner un texto asociado a un campo de un formulario para indicar el tipo de contenido que se espera en dicho campo. Por ejemplo añadir el texto "Nombre" antes de un input tipo texto donde el usuario tendrá que escribir su nombre.
Lea también: ¿Cómo localizar tus XML del SAT?
Para crear una etiqueta tenemos que usar el tag "label" de HTML: Donde el atributo for se utiliza para especificar el identificador del campo relacionado con la etiqueta. De esta forma, al pulsar sobre la etiqueta se marcará automáticamente el campo relacionado. A continuación se muestra un ejemplo completo:
<label for="nombre">Nombre:</label><input type="text" name="nombre" id="nombre">
Campos de Entrada Especiales en Formularios
Subida de Archivos
Para generar un campo para subir ficheros utilizamos también la etiqueta input indicando en su tipo el valor file, por ejemplo:
<input type="file" name="documento" id="documento">
Para enviar ficheros la etiqueta de apertura del formulario tiene que cumplir dos requisitos importantes:
- El método de envío tiene que ser POST o PUT.
- Tenemos que añadir el atributo enctype="multipart/form-data" para indicar la codificación.
A continuación se incluye un ejemplo completo:
<form action="/upload" method="POST" enctype="multipart/form-data"> <?php echo csrf_field(); ?> <label for="imagen">Seleccionar imagen:</label> <input type="file" name="imagen" id="imagen"> <button type="submit">Subir</button></form>