Tema 3: Formularios

3.1. Campos de texto

Enviar datos
Los formularios son la manera ms comn de recoger datos del usuario. Si usamos slo el lenguaje HTML La nica forma posible de mandarlos es por email, tal como se explica en nuestro curso de HTML leccin 7: Formularios . Tambin podemos recoger los datos de un formulario mediante Javascript, pero stos slo los podemos utilizar en la propia pgina en que estn escritos, o pasarlos a otra pgina utilizando cookies. (Ver nuestro curso de Javascript: Tema 7. Formularios y Tema 14. Cookies Sin embargo, con PHP podemos enviar los datos directamente a otra pgina, tal como veremos a continuacion, o podemos con PHP y MySQL guardar los datos en una base, para poder utilizarlos posteriormente; esto lo veremos en temas posteriores.

Mandar un formulario a otra pgina

Para poder mandar los datos de un formulario a otra pgina, el formulario lo escribiremos de manera normal, en lenguaje HTML, y la pgina del formulario puede ser perfectamente una pgina HTML, sin cdigo en PHP Recordemos que la etiqueta form debe llevar siempre los atributos action ymethod. El atributo action indica el lugar al que se enva el formulario, por lo que escribiremos la ruta al archivo que recoge el formulario, el cual sera una pgina en php. El atributo method solo admite los valores "post" y "get" en principio utilizaremos el valor "post" aunque tambin puede enviarse el formulario con el mtodo "get" La etiqueta <form ...> quedar de la siguiente manera: <form action="ruta_archivo.php" method="post"> Por ltimo cada campo del formulario debe llevar el atributoname="nombre_del_campo". Con este atributo identificaremos cada campo para crear una variable donde se guarde el dato aportado por el usuario. Por tanto el valor de esta etiqueta debe ser distinto para cada campo.

Datos en campos de texto.

Veamos un ejemplo sencillo, con el que explicaremos de momento cmo recoger los datos que aporta el usuario en los campos de texto. Tenemos el siguiente formulario:
<form action="form.php" method="post"> <p>Nombre: <input type="text" name="nombre" /></p> <p>Contrasea: <input type="password" name="contras" /></p> <p>Tu opinin: <textarea name="opinion">Mi opinin: </textarea></p> <p><input type="submit" value="enviar" /></p> </form>

El atributo action nos indicar la ruta del archivo en PHP donde se recogern los datos. El atributo method debe tener siempre el valor "post". y los atributos nameson la referencia para guardar el dato dado por el usuario. El siguiente paso consiste en crear el archivo PHP, al que en este ejemplo llamaremos form.php y que ubicaremos en la misma carpeta que el archivo que contiene el formulario anterior. los datos que ha introducido el usuario en el formulario se recogen en una variable que tendr la siguiente forma: $_POST['valor_de_name'] Donde pone valor_de_name escribiremos el valor que le hayamos dado al atributo name. De esta forma esta variable recoger el texto escrito por el usuario en ese campo. El cdigo PHP siguiente nos mostrar en una segunda pgina (form.php) los datos que el usuario ha introducido en la primera:
<?php echo "Tu nombre: "; echo $_POST['nombre']; echo "<br/>"; echo "Tu contrasea: "; echo $_POST['contras']; echo "<br/>"; echo "Tu opinin: "; echo $_POST['opinion']; echo "<br/>"; ?>

3.2. Campos de opciones

Esta pgina es continuacin de la anterior, en donde hemos visto cmo recoger los datos de un formulario mediante php. Aqu veremos cmo recoger los datos de los campos de botones y tipo "option".

Botones tipo radio

Los botones tipo radio que corresponden a un mismo campo deben llevar el atributo name en todos ellos con el mismo valor. Tambin deben llevar el atributovalue que indica el texto a mostrar en el caso de que est seleccionado. Ejemplo: sexo<br/> <input type="radio" name="sexo" value="V"/> Varn<br/> <input type="radio" name="sexo" value="M"/> Mujer El cdigo php de la pgina donde se recogen los datos lo obtendremos mediante la variable $_POST['valor_de_name'], tal cmo hicimos con los campos de texto en la pgina anterior. El dato recogido ser el valor de la etiqueta value del elemento seleccionado. Si no estuviera seleccionado ningn botn, la variable quedar vaca. En el ejemplo anterior usaremos el siguiente cdigo php para mostrar el valor en la pgina de recogida de datos: <?php echo "Sexo: "; echo $_POST['sexo']; ?>

Botones checkbox
Los botones checkbox son independientes unos de otros, por tanto el atributo namedebe ser distinto e identificativo en cada uno de ellos. Para poder pasar los datos a otra pgina estos botones deben llevar el atributo name. El atributo value no es obligatiorio, aunque s recomendable. Veamos un ejemplo:

<input type="checkbox" name="musica"/> Msica<br/> <input type="checkbox" name="deportes" value="SI"/> Deportes <br/> Como en el caso anterior en la pgina de recogida de datos usaremos la variable$_POST['valor_de_name'] en el cdigo php: <?php echo "Musica: "; echo $_POST['musica']; echo "<br/>"; echo "Deportes: "; echo $_POST['deportes']; echo "<br/>"; ?> Si el botn no se ha seleccionado se devolvera como valor una variable vaca, Si est seleccionado nos devolvera el valor " on" si no lleva el atributo value. Si lleva este atributo el valor devuelto ser el que ste tenga.

Listas select
Las listas tipo "select" empiezan siempre por la etiqueta <select..>. Es en esta etiqueta donde debemos poner el atributo name para identificarla. Recordemos que las distintas opciones que puede elegir el usuario van marcadas por las etiquetas <option> ...</option>. veamos la siguiente lista:
<select name="color"> <option>ninguno</option> <option value="red">rojo</option> <option value="blue">azul</option> <option value="green">verde</option> <option value="yellow">amarillo</option> </select>

Como en los campos anteriores en la pgina php pondremos la variable$_POST['valor_de_name'] para obtener el dato. <?php echo "Color: "; echo $_POST['color']; ?> el dato que recoge la variable es el valor de la etiqueta value. Si la opcin no lleva esta etiqueta el dato ser el texto de la opcin. En el ejemplo anterior, si se selecciona la primera opcin, el dato recogido ser "ninguno", y si seleccionamos la segunda ser "red".

Metodo get
Podemos emplear tambin el metodo get para recoger los datos del formulario, la forma es similar a la vista anteriormente. En la etiqueta <form ... > pondremos en atributo: method="get" <form action="pagina.php" method="get"> En los campos del formulario podremos la etiqueta name que nos identificar el nombre del campo. Para recoger los datos utilizaremos en la pgina PHP la variable$_GET['valor_de_name'], de la misma forma vista para el mtodo POST. Por ltimo al principio de la pgina de recogida debemos poner el siguiente script:

<?php $HTTP_GET_VARS; ?> Este script no es necesario con las versiones ms recientes de PHP. El metodo GET es menos recomendable ya que los datos pueden verse tambin en la barra de navegacin del navegador.

datos no guardados
Los datos aportados por las variables no se guardan, stos desaparecen al cerrar la pgina, ya cualquier usuario al volver a rellenar el formulario y enviarlo cambia los datos aportados. Sin embargo nos pueden servir para mostrarlos o trabajar con ellos, como veremos ms adelante. De momento lo importante es saber cmo recoger los datos que nos aporta el usuario. Ms adelante veremos cmo guardarlos y dnde.

3.3. Ejemplo de formulario

Formulario en HTML
Veremos aqu un ejemplo en el que aplicaremos lo visto hasta ahora para recoger los datos de un formulario. Lo primero es hacer un formulario en HTML. este es la pgina de nuestro formulario de ejemplo.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Suscripcin boletn</title> <style type="text/css"> h1 { text-align: center; } td { padding: 0.2em 2em ; } </style> </head> <body> <h1>Suscripcin electronica a nuestro boletn.</h1> <p>Nota: Este es un formulario de ejemplo en el que los datos aqu escritos se trasladan a otra pgina.</p> <form action="comprobar.php" method="post"/> <p>Nombre: <input type="text" name="nombre"/> Apellidos: <input type="text" name="apellidos" size="40"/> e-mail: <input type="text" name="email" size="35"/></p> <p>contrasea: <input type="password" name="contras"/><br/> <table> <tr> <td> sexo<br/> <input type="radio" name="sexo" value="V"/> Varn<br/> <input type="radio" name="sexo" value="M"/> Mujer</p> </td> <td> Nivel de estudios<br/>

<input type="radio" name="estudios" value="elemental" checked="checked"> Certificado escolar<br/> <input type="radio" name="estudios" value="basico"/> Graduado en E.S.O.<br/> <input type="radio" name="estudios" value="bachiller"/> Bachiller - Formacin Profesional <br/> <input type="radio" name="estudios" value="Diplomado"/> Diplomado<br/> <input type="radio" name="estudios" value="licenciado"/> Licenciado o Doctorado<br/> </td> <td> Interesado en los siguientes temas: <br/> <input type="checkbox" name="musica"/> Msica<br/> <input type="checkbox" name="deportes"/> Deportes<br/> <input type="checkbox" name="cine"/> Cine<br/> <input type="checkbox" name="libros"/> Libros<br/> <input type="checkbox" name="ciencia"/> Ciencia</p> </td> </tr> </table> <p>Da de la semana que le interesa recibirlo:</p> <select name="dia"> <option>da de la semana:</option> <option value="">lunes</option> <option value="Martes">martes</option> <option value="Mircoles">miercoles</option> <option value="Jueves">jueves</option> <option value="Viernes">viernes</option> <option value="Sbado">sbado</option> <option value="Domingo">domingo</option> </select> </p> <p>Su opinin: <br/> <textarea name="comentario" rows="5" cols="50">Comentario: </textarea> <p><input type="submit" value="Comprobar el formulario"> <input type="reset" value="borrar todo"></p> </form> </body> </html>

En este formulario hemos querido incluir al menos un campo de cada tipo, para que se vean los resultados del traslado de datos.

Pgina de comprobacin de datos

Los resultados los veremos en la pgina "comprobar.php" la cual la colocaremos en la misma carpeta que el archivo anterior (por supuesto dentro del directorio "XAMPP/htdocs"). Est ser la pgina "comprobar.php".
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Comprobar datos</title>

</head> <body> <h1>Tus Datos de suscripcin: </h1> <p>Estos son los datos que nos has enviado:</p> <?php echo "Nombre: "; echo $_POST['nombre']; echo "<br/>"; echo "apellidos: "; echo $_POST['apellidos']; echo "<br/>"; echo "E-mail: "; echo $_POST['email']; echo "<br/>"; echo "contrasea: "; echo $_POST['contras']; echo "<br/>"; echo "Sexo: "; echo $_POST['sexo']; echo "<br/>"; echo "Estudios: "; echo $_POST['estudios']; echo "<br/>"; echo "Aficiones: \"on\" seleccionado, sin marcar, no seleccionado<br/>"; echo "Musica: "; echo $_POST['musica']; echo "<br/>"; echo "Deportes: "; echo $_POST['deportes']; echo "<br/>"; echo "Cine: "; echo $_POST['cine']; echo "<br/>"; echo "Libros: "; echo $_POST['libros']; echo "<br/>"; echo "Ciencia: "; echo $_POST['ciencia']; echo "<br/><br/>"; echo "Da de la semana: "; echo $_POST['dia']; echo "<br/>"; echo "Tu comentario: "; echo $_POST['comentario']; echo "<br/>"; ?> <p>Comprueba tus datos antes de enviarlos, si no estn bien vuelve a escribirlos.</p> <p>Los datos son correctos: <a href="form.html">Enviar</a> <p>Los datos no son correctos: <a href="enviar.html">Volver a escribirlos</a> </body> </html>

Pr ltimo colocaremos la pgina que nos dice que los datos han sido enviados, para ello crearemos la sigiente pgina llamada "enviar.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>comprobado</title> </head> <body> <h1>Tu solicitud ha sido admitida.</h1> <p>Tus datos han sido registrados... </p> </body> </html>

Pasar variables por URL

Ambito de las variables
El mbito de una variable es el lugar en el que surgir efecto, es decir en donde la variable tiene validez. De no decir otra cosa, la variable tendr su mbito dentro de la pgina en la que fue creada. Sin embargo, existren mtodos, tal como hemos visto en los

formularios, para pasar los valores o datos que almacena una variable a otra pgina.

Traspaso de variables por enlaces

Podemos pasar una variable a otra pgina cuando la abrimos con un enlace, mediante el siguiente cdigo: <a href="destino.php?variable1=valor1&variable2=valor2&... "> pasar variables</a> En el siguiente cdigo nos fijamos en el atributo href del enlace. En primer lugar escribimos la ruta o URL del destino de manera normal. Despus escribimos el signo de interrogacion ? y las variables que queremos pasar a la otra pgina. cada variable va separada de las dems por el signo &. De cada variable escribiremos su nombre, sin el signo dolar $, el signo igual, =, y despus su valor. El valor de la variable no debe ir entrecomillado, aunque esta sea una variable de texto. Por lo tanto las variables son definidas al mismo tiempo que las mandamos. Veamos un ejemplo: <a href="bienvenida.php?var1=Hola, &var2=Bienvenido a esta pgina."> pgina de bienvenida</a> Este es un enlace hacia la pgina "bienvenida.php" que est en la misma carpeta que la pgina de envio. En este enlace mandamos dos variables, la variable$var1="Hola " y la variable $var2="Bienvenido a esta pgina.".

Recoger datos en pgina de destino

La segunda parte consiste en recoger las variables en la pgina de destino. Estas son traspasadas mediante el mtodo GET por lo que para recogerlas utilizaremos la variable del tipo $_GET['variable1']. En el ejemplo anterior, en la pgina "bienvenida.php" (pgina de destino) pondremos el siguiente cdigo para que aparezcan en pantalla:
<?php $v1=$_GET['var1']; $v2=$_GET['var2']; echo $v1.$v2; ?>

Mediante este mtodo creamos la variable a la vez que el enlace, por lo que no podemos pasar variables que tenamos creadas anteriormente, ya que el valor de stas no es reconocido en el valor que ponemos en el enlace. veamos cual es la solucin:

Pasar variables ya definidas.

Supongamos que en una pgina definimos una variable: $saludo="Hola a todos."; Una vez que est definida queremos mandarla a otra pgina mediante un enlace. No podemos escribir el enlace directamente con la expresin: <a href="destino,php?saludo=$saludo">Recibir saludo</a>

Lo que recibiremos en la pgina de destino es una variable cuyo valor ser la palabra "$saludo", y no el contenido de la variable. para solucionar esto, debemos mandar el enlace dentro del cdigo PHP, como una instruccin echo; es decir en la pgina de envo para mandar el enlace escribiremos: <?php echo "<a href='destino,php?saludo=$saludo'>Recibir saludo</a>"; ?> Ahora el valor de la variable que mandamos ser en la pgina de destino el mismo que el de la pgina de origen, por lo que si lo cambiamos en la pgina de origen, cambiar tambin en la de destino.

Ejemplo de paso de variables

Veamos cmo queda el ejemplo anterior: En la pgina de envo : "envio.php", escribimos las variables y las mandamos mediante un enlace. Esta es la pgina de envo;
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Pgina de envo</title> </head> <body> <h1>Envo de variables a otra pgina.</h1> <?php $a="Hola, "; $b="bienvenido a mi pgina"; echo "Enviar las siguientes variables:<br/>"; echo "\$a = $a <br/>"; echo "\$b = $b <br/>"; ?> <p>Pulsar el siguiente enlace</p> <?php echo "<a href='destino.php?a=$a&b=$b'>Enviar variables</a>"; ?> </body> </html>

En la pgina de destino recibiremos las variables mediante el mtodo GET y las sacamos en pantalla:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>pgina de destino</title> </head> <body> <h1>Al abrir esta pgina se han pasado las siguientes variables:</h1> <?php

$a=$_GET['a']; $b=$_GET['b']; echo "<p>variable \$a : $a"; echo "<p>variable \$b : $b"; ?> </body> </html>