3. Formularios. Comunicación entre páginas
PHP
3. Formularios. Comunicación entre páginas
Casi cualquier programa "real" necesita tener datos de entrada que manipular. Más adelante veremos cómo tomarlos a partir de las fecha y la hora del sistema, de una base de datos, de un fichero, de otra página web... pero por ahora comenzaremos pidiendo esos datos al usuario a través de un formulario.
Un formulario básico en HTML tendría esta apariencia (fichero "envia.html"):
<html>
<body>
<form action="saludador.php" method="get">
Introduce tu nombre: <input name="nombre" type="text"> <br /> <br />
<input value="Saludar" type="submit"><br />
</form>
</body>
</html>Que en pantalla se vería algo así:
Introduce tu nombre: Es decir, contiene un texto normal, una casilla de introducción de texto (tipo "text", llamada "nombre") y un botón (tipo "submit", que muestra el texto "Saludar"). Cuando se hace clic, se salta a una página llamada "saludador.php", y se le pasan los datos que hayamos indicado en el formulario (en nuestro caso, el nombre).
Estamos usando la forma de comunicación conocida como "get", lo que se refleja en que los datos que pasamos de una página a otra se pueden leer en la barra de direcciones:
saludador.php?nombre=Juan
Nuestro "saludador" podría ser algo así:
<html>
<body>
Bienvenido!<br />
<?php
echo "Hola " . $_GET["nombre"] . ", Como estas?";
?>
</body>
</html>De modo que en pantalla obtendríamos
Bienvenido!
Hola Juan, Como estas?Es decir, desde PHP leemos los datos pasados usando $_GET e indicando entre corchetes y comillas el nombre del campo correspondiente.
Vamos a mejorarlo un poco. Una página que leyera dos números para sumarlos después podría ser así (sumar.html):
<html>
<body>
<form action="sumador.php" method="get">
Primer numero: <input name="n1" type="text"> <br /> <br />
Segundo numero: <input name="n2" type="text"> <br /> <br />
<input value="Sumar" type="submit"><br />
</form>
</body>
</html>Y el programa PHP encargado de recibir los datos y sumar podría ser éste:
<html>
<body>
<?php
$primerNumero = $_GET["n1"];
$segundoNumero = $_GET["n2"];
echo "$primerNumero + $segundoNumero es ";
echo $primerNumero+$segundoNumero;
?>
</body>
</html>Si el usuario teclea los números 25 y 31, en la barra de direcciones del navegador se podría leer:
sumador.php?n1=25&n2=31
Y en pantalla se vería
25 + 31 es 56
Esta forma de pasar parámetros es cómoda cuando el usuario realiza búsquedas, por ejemplo, porque puede modificar los datos en la propia barra de direcciones, y hacer una nueva búsqueda sin necesidad de volver a rellenar el formulario. Pero es totalmente inapropiada si hay datos que no deban ser visibles, como una contraseña. Enseguida veremos una alternativa que es útil para estos casos.
Ejercicio propuesto 3.1: Crea un formulario que te pida dos números y una página en PHP que muestre su suma, su diferencia, su producto y el resultado de dividir el primero entre el segundo.
Ejercicio propuesto 3.2: Crea un formulario que te pida el radio de una circunferencia y una página en PHP que muestre la longitud de la circunferencia (2*PI*radio) y la superficie del círculo correspondiente (PI*radio2.
Ahora es el momento de conocer una alternativa que nos permite pasar datos sin que se vean en la barra del navegador (el método POST), así como más elementos que pueden aparecer en los formularios: casillas para contraseñas, recuadros para escribir varias líneas, listas desplegables y "botones de radio".
Vamos a hacerlo directamente con un ejemplo. Nuestro nuevo formulario (envia2.html) podría ser así:
<html>
<body>
<form action="saludador2.php" method="post">
Introduce tu nombre: <input name="nombre" type="text"> <br />
Y tu contraseña: <input name="clave" type="password"> <br />
Prefieres que te diga...<br />
<input name="tipoSaludo" value="hola"
checked="checked" type="radio">Hola<br />
<input name="tipoSaludo" value="adios"
type="radio">Adios<br />
Opción extra: <select name="posibilidad" size="1">
<option value="opcion1">Primera posibilidad </option>
<option value="opcion2">Segunda posibilidad </option>
<option value="opcion3">Tercera posibilidad </option>
</select> <br />
Comentario: <br />
<textarea rows="10" name="texto" cols="40"></textarea>
<br />
<input value="Saludar otra vez" type="submit"><br />
</form>
</body>
</html>En este ejemplo, hemos usado:
- Un campo "password" para la contraseña (el valor introducido no se verá en pantalla).
- Varias opciones de tipo "radio", excluyentes (sólo se puede escoger una de ellas).
- Una lista "select", que tiene tamaño (size) 1, por lo que las demás opciones se despliegan, en vez de verse continuamente en pantalla.
- Un área de introducción de varias líneas de texto, "textarea", en concreto pensado para mostrar 10 filas y 40 columnas.
Podríamos acceder a los datos con un fuente en PHP como este
<html>
<body>
Bienvenido!<br />
<?php
echo "Hola " . $_POST["nombre"] . ", Como estas?";
echo "<br />Tu contraseña era " . $_POST["clave"];
echo "<br />Querías que te dijera " . $_POST["tipoSaludo"];
echo "<br />Y en la lista has elegido " . $_POST["posibilidad"];
echo "<br />Finalmente, en el area de texto has escrito:<br />" . $_POST["texto"];
?>
</body>
</html>Así, si rellenamos el formulario así
(donde la contraseña, que no se puede leer, es "1234"), obtendríamos este resultado:
Bienvenido! Hola juan, Como estas? Tu contraseña era 1234 Querías que te dijera adios Y en la lista has elegido opcion2 Finalmente, en el area de texto has escrito: Esta es una frase de ejemplo
Ejercicio propuesto 3.3: Crea un formulario que te pida introducir un número de día (1 a 31) y escoger el nombre de un mes (usando una lista desplegable, o "select"). Crea también una página en PHP que muestre el día y el mes que se han escogido.
Un último detalle algo más avanzado: si queremos que una página se llame a sí misma, en vez de tener una página con el formulario y otra página que recibe los datos, no necesitamos hacer grandes cambios:
- La página deberá tener un "if" ("si", condicional) que compruebe el valor de una variable recibida por POST (o por GET) y según eso, muestre el formulario o analice los datos. En el próximo apartado veremos los detalles de la orden "if".
- En el "action" del formulario deberemos poner el nombre de la misma página que muestra el formulario.
Puede ser preferible usar "$_SERVER['PHP_SELF']" en vez del nombre de la página, en el "action", de modo que se siga comportando correctamente aunque cambiemos el nombre del fichero (de lo contrario, podemos olvidar cambiarlo en el "action" y dejar la página "huérfana").
Un ejemplo de formulario (saludar.php) que se llame a sí mismo para saludar a la persona que haya introducido su nombre sería así:
<html>
<body>
<?php
if ( ! isset($_POST["nombre"]) )
{
?>
<form action="saludar.php" method="post">
Dime tu nombre: <input type="text" name="nombre" /> <br />
<input type="submit" value="Saludar" /><br />
</form>
<?php
}
else
echo "Hola " . $_POST["cuantos"];
?>
</body>
</html>Y este sería un ejemplo más completo, que usara "PHP_SELF" para funcionar correctamente aunque cambiáramos el nombre del fichero que contiene el formulario:
<html><body>
<?php
if (!isset($_POST["nombre"])) // Si no se ha indicado nombre
{
?>
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<p>Dime tu nombre: <input type="text" name="nombre" /></p>
<p>Y tu edad: <input type="text" name="edad" /></p>
<p><input type="submit" value="Saludar"/></p>
</form>
<?php
}
else // Si ya se ha indicado nombre
{
?>
Hola <?php echo $_POST["nombre"]; ?>. <br />
Así que tienes <?php echo $_POST["edad"]; ?> años de edad.
<?php
}
?>
</body></html>Ejercicio propuesto 3.4: Crea un formulario que permita sumar dos números.
Ejercicio propuesto 3.5: Crea una versión mejorada del ejercicio 3.4: un formulario que permita sumar dos números, que debe dirigir a la misma página y que, cuando muestre el resultado de la operación, también se debe mostrar tras ella el formulario otra vez, de modo que el usuario pueda realizar una nueva operación.