PHP: Crear un Formulario Web

En la siguiente entrada titulada «PHP: Crear un Formulario Web», aprenderemos como crear un formulario web y como recolectar información de este.

Para ello, realizaremos el siguiente proceso:

  1. Envio de datos del Formulario Web
  2. Crear Formulario Web con Radio
  3. Insertar Formulario web con Checkbox
  4. Crear Formulario Web con Select
  5. Implementar Formulario Web con Textarea

Envio de datos del formulario Web

Para comenzar el proceso, debemos crear dos archivos: uno que implementa el formulario y otro que procesa los datos cargados en el formulario web.

Al primer archivo, lo llamaremos «formulario-web-de-entrada.html» y constará del siguiente código:

<html>
    <head>
        <title>Formulario web de entrada de datos</title>
    </head>
    
    <body>
        <form method="post" action="formulario-web-captura-de-datos.php">
        <p><input type="text" name="nombre" value="Nombre"></p>
        <p><input type="sumit" value="Enviar Datos"></p>
        </form>
    </body>
</html>

De esta forma, estamos creando un formulario el cual envía y almacena la variable «Nombre» en la pagina » formulario-web-captura-de-datos.php». Como se puede observar, el archivo creado es html, ya que en este paso estamos creando la estructura sin funcionalidad.

El segundo archivo que debemos crear lo llamaremos «formulario-web-captura-de-datos.php» y será el encargado de recibir los datos insertados en el formulario. Este contendrá la un pequeño código PHP como se muestra a continuación.

<html>
    <head>
        <title>Formulario web de captura de datos</title>
    </head>
    
    <body>
        <?php
        echo "Tu nombre es";
        echo $_REQUEST['nombre'];
        ?>
    </body>
</html>

Con este código, ya podríamos enviar y recibir los datos de un formulario. Para comprobar que realmente funciona, insertaré a continuación el archivo que hemos creado en primer lugar.

Si todo funciona correctamente, al insertar nuestro nombre y hacer click en el botón nos debe llevar a una pagina en la que pone nuestro nombre.

De esta forma, hemos conseguido realizar el primer paso a la hora de crear un Formulario Web, lograr el envio de datos del formulario web de forma exitosa.

Crear Formulario Web con Radio

Para crear operaciones en el formulario web, que nos permita sumar o restar valores crearemos dos archivos como en el punto anterior, uno para la entrada de datos y otro para la carga de estos.

El primer formulario, constará de la siguiente programación:

<html>
    <head>
        <title>Formulario web de entrada de datos 2</title>
    </head>
    
    <body>
        <form method="post" target="_blank" action="formulario-web-captura-de-datosv2.php">
        <p><input placeholder="number 1" type="number" value="Valor 1" name="valor1"></p>
        <p><input placeholder="number 2" type="number" value="Valor 2" name="valor2"></p>
        <p><input  type="radio" value="suma" name="radio1">Suma</p>
        <p><input type="radio" value="resta" name="radio1">Resta</p>
        <input type="submit" value="Operar">
        </form>
    </body>
</html>

Como en el caso anterior, este archivo es puro html, que nos proporciona la estructura que nos va a permitir realizar las acciones.

Destacar la importancia de que los operadores tengan el mismo nombre en imput radio, en este caso «radio1». Además solo se podrá realizar una selección.

Para continuar, realizaremos el siguiente archivo, el cual será php y contará con la siguiente estructura.

<html>
    <head>
        <title>Formulario web de captura de datos 2</title>
    </head>
    
    <body>
        <?php
        if ($_REQUEST['radio1']=="suma")
        {
            $suma= $_REQUEST['valor1'] +
            $_REQUEST['valor2'];
            echo"La suma es: ".$suma;
        }
        
        else
        
        {
        if ($_REQUEST['radio1']=="resta")
        
        {
            $resta= $_REQUEST['valor1'] -
            $_REQUEST['valor2'];
            echo"La resta es: ".$resta;
        }
        
        }
        ?>
    </body>
</html>

Con este código podemos cargar la resta y suma de los dos valores, permitiendo operar con estos. Esto puede ser de gran ayuda para ampliar nuestras opciones de formulario.

De este modo, a continuación podemos ver como quedaría en un caso practico lo aplicado en este apartado.

Suma

Resta

¿ Continuamos con opciones interesantes para los formularios? Vamos a ya!

Insertar Formulario Web con Checkbox

Para aprender el caso de los checkbox, utilizaremos el mismo ejemplo anterior, por lo que no volveré a repetir la misma información. Sin mas preámbulos, pasemos a examinar el archivo html y php de este ejemplo.

<html>
    <head>
        <title>Formulario web de entrada de datos 3</title>
    </head>
    
    <body>
        <form method="post" target="_blank" action="formulario-web-captura-de-datosv2.php">
        <p><input placeholder="number 1" type="number" value="Valor 1" name="valor1"></p>
        <p><input placeholder="number 2" type="number" value="Valor 2" name="valor2"></p>
        <p><input  type="checkbox" value="suma" name="checkbox1">Suma</p>
        <p><input type="checkbox" value="resta" name="checkbox2">Resta</p>
        <input type="submit" value="Operar">
        </form>
    </body>
</html>

Como se puede observar, los imput checkbox necesitan nombres diferentes.

<html>
    <head>
        <title>Formulario web de captura de datos 3</title>
    </head>
    
    <body>
        <?php
        if (isset($_REQUEST['checkbox1']))
        {
            $suma= $_REQUEST['valor1'] +
            $_REQUEST['valor2'];
            echo"La suma es: ".$suma;
        }

        if (isset($_REQUEST['checkbox2']))
        
        {
            $resta= $_REQUEST['valor1'] -
            $_REQUEST['valor2'];
            echo"La resta es: ".$resta;
        }
        
        ?>
    </body>
</html>

Como se puede observar, el procedimiento es muy similar al del factor radio, pero con otro diseño como se muestra en el ejemplo practico.

Sin embargo, con el checkbox podemos marcar las dos opciones a la vez mientras que en el radio solo podíamos marcar 1.

Suma

Resta

Crear Formulario Web con Select

Al igual que hemos realizado con el checkbox, voy a pasar directamente a presentar como realizar un formulario web con un select.

El documento HTML tendría el siguiente aspecto.

<html>
    <head>
        <title>Formulario web de entrada de datos 4</title>
    </head>
    
    <body>
        <form method="post" target="_blank" action="formulario-web-captura-de-datosv4.php">
        <p><input placeholder="number 1" type="number" value="Valor 1" name="valor1"></p>
        <p><input placeholder="number 2" type="number" value="Valor 2" name="valor2"></p>
        <select name="operacion">
        <option value="suma">Suma</option>
        <option value="resta">Resta</option>
        </select>
        <input type="submit" value="Operar">
        </form>
    </body>
</html>

En el código, podemos ver que el select funciona con varias opciones, escogiendo la que se desee. A diferencia del checkbox, no se pueden seleccionar varias a la vez.

La funcionalidad PHP que le acompaña será el siguiente código.

<html>
    <head>
        <title>Formulario web de captura de datos 4</title>
    </head>
    
    <body>
        <?php
        if ($_REQUEST['operacion']=="suma")
        {
            $suma= $_REQUEST['valor1'] +
            $_REQUEST['valor2'];
            echo"La suma es: ".$suma;
        }
        else
        {
        if ($_REQUEST['operacion']=="resta")
        
        {
            $resta= $_REQUEST['valor1'] -
            $_REQUEST['valor2'];
            echo"La resta es: ".$resta;
        }
        }
        ?>
    </body>
</html>

Con este apartado, terminamos con las diferentes opciones que tenemos para operar con PHP en un formulario. Sin mas demora, realizaremos el caso desarrollado.

Implementar Formulario Web con Textarea

En este apartado, vamos a aprender a exportar un párrafo o textarea. Para ello realizaremos un caso practico en el cual incluiremos una variable texto y otra para insertar un mensaje, además de crear sus respectivas funcionalidad y caso practico como en los apartados anteriores.

Su estructura (archivo HTML) sería el siguiente:

<html>
    <head>
        <title>Formulario web de entrada de datos 2</title>
    </head>
    
    <body>
        <form method="post" target="_blank" action="formulario-web-captura-de-datosv5.php">
        <p><input placeholder="Nombre" type="text" name="nombre"></p>
        <p><textarea placeholder="Mesanje" name="mensaje"></textarea></p>
        <input type="submit" value="Enviar">
        </form>
    </body>
</html>

Y el archivo que cargaría los datos insertados sería el siguiente:

<html>
    <head>
        <title>Formulario web de captura de datos 5</title>
    </head>
    
    <body>
        <?php
        echo "Su nombre es :" .$_REQUEST['nombre'];
        echo "</br>";
        echo "Su mensaje es :" .$_REQUEST['mensaje'];
        ?>
    </body>
</html>

De esta manera, el desarrollo de este código tendría el siguiente resultado:

En conclusión…

Hemos dado herramientas para realizar un formulario muy completo, con distintas formas de realizar acciones. Estas opciones pueden ser usadas para insertar nombre, sexo, edad, etc… en definitiva cualquier variable.

En el siguiente enlace, se dan mas herramientas en formularios: https://diego.com.es/formularios-en-php.

¿Te ha servido de ayuda esta entrada? Deja en comentarios cualquier duda o ampliación de contenido.

Si estas interesado en aprender mas sobre este lenguaje de programación accede a PHP.

Valoración

2 comentarios sobre «PHP: Crear un Formulario Web»

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *