Capítulo 3. Formularios.
Aunque los formularios se tratan en la mayoría de los casos en la creación de páginas Web por tratarse de código HTML, en este curso se van a tratar, por ser parte fundamental de la programación PHP.
Por lo general se usan dos ficheros PHP cuando estamos usando formularios.
– El primero de ellos define la página que tendrá el formulario (con los elementos que tendrá) y la forma de enviar dicho datos a la página que los tratará.
– El segundo fichero se encargará de recibir dichos datos y de realizar las tareas que sean necesarias con ellos.
Veámoslo con un ejemplo. Contenido del fichero con el formulario:
<FORM ACTION=»prueba2.php» METHOD=»POST»>
Nombre: <INPUT TYPE=»text» NAME=»Nombre»>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
</FORM>
Contenido del fichero que va a tratar los datos recibidos del formulario «prueba2.php»:
<?PHP
$TuNombre=$_REQUEST[‘Nombre’];
echo(«Tu nombre es: $TuNombre»);
?>
Tendremos el siguiente contenido en la primera pantalla del explorador:
Y el resultado al pulsar el botón «Aceptar» será:
Tu nombre es: Juan García
Un formulario puede tener diversos tipos de elementos. Estos pueden clasificarse de la siguiente forma:
– Elementos de tipo INPUT
- SUBMIT
- RESET
- TEXT
- PASSWORD
- RADIO
- CHECKBOX
– Elemento SELECT
- SELECT
- SELECT MULTIPLE
– Elemento TEXTAREA
Aunque a continuación los iremos viendo de uno en uno, la sintaxis general de todos es la siguiente:
<INPUT TYPE=»tipo» NAME=»nombre» VALUE=»valor»>
Lo primero que veremos es cómo crear un formulario. Su sintaxis básica es la siguiente:
<FORM ACTION=»fichero.php» METHOD=»método»>
</FORM>
En este caso:
– fichero.php lo sustituiremos por el nombre del fichero en PHP al que se le enviará la información introducida por el usuario en la página Web.
– método lo sustituiremos por una de las palabras: «GET» o «POST». Aunque nos sea indiferente, la diferencia entre estos dos métodos de enviar la información es la siguiente:
- GET: envía los datos usando el URL, es decir, se envían los datos en la línea de direcciones, después del nombre de la página a la que se le envían. El usuario podrá ver que datos se envían, y tienen la siguiente forma:
– www.nombre.com/pagina.php?var1=valor1&var2=valor2 - POST: se incluye en el cuerpo del formulario y se envía al agente procesador, es decir, en principio el usuario no ve en la línea de direcciones que datos se envían.
Los elementos del formulario deberán incluirse entre las dos etiquetas «<FORM>» y «</FORM>». Aquí podremos poner tanto elementos del formulario como cualquier otro texto o etiqueta HTML para dar formato al formulario.
Con este elemento nos aparecerá un botón en la página, con el cual enviaremos los datos que se hayan rellenado en los diversos elementos que hayan en la página a la página que se le indique.
Su sintaxis es la siguiente:
<INPUT TYPE=»SUBMIT» VALUE=»Enviar»>
Y lo único en lo que nos vamos a fijar es el texto «Enviar»», que será el que aparezca dentro del botón.
Con este botón borraremos el contenido de todos los elementos del formulario y en caso de que éstos tengan un valor por defecto (como ya veremos más adelante) se pondrá dicho valor a ese elemento.
<INPUT TYPE=»RESET» VALUE=»Borrar»>
Y lo único en lo que nos vamos a fijar es el texto «Borrar»», que será el que aparezca dentro del botón.
Con este elemento el formulario nos va a permitir escribir texto. Su sintaxis es la siguiente:
<INPUT TYPE=»TEXT» NAME=»Nombre» VALUE=»texto_inicial» SIZE=»10″
MAXLENGTH=»12″>
El significado de las etiquetas es el siguiente:
– TYPE=»TEXT» Nos indica que se trata de un elemento para introducir texto.
– NAME=»Nombre» Le asigna un nombre al elemento para que pueda ser usado por la página Web a la que se le envía la información.
– VALUE=»texto_inicial» Es el texto que tendrá inicialmente el elemento, y que también aparecerá si le damos al botón de borrar (TYPE=»RESET»).
– SIZE=»10″ El tamaño del cuadro en donde podremos escribir sería de 10 letras (aproximadamente).
– MAXLENGTH=»12″ Podremos escribir como máximo 12 letras (en este caso) independientemente del tamaño del cuadro (ver SIZE).
Vamos a ver un ejemplo.
<FORM ACTION=»prueba2.php» METHOD=»POST»>
Nombre:
<INPUT TYPE=»text» NAME=»Nombre» VALUE=»abcd»
SIZE=»30″ MAXLENGTH=»12″>
<BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
Cuyo resultado en pantalla sería el siguiente:
Y cuando llamáramos al fichero «prueba2.php»:
<?PHP
$TuNombre=$_REQUEST[‘Nombre’];
echo(«Tu nombre es: $TuNombre»);
?>
obtendríamos la siguiente pantalla:
Este elemento funciona de igual forma que el «TEXT», con la diferencia de que cuando escribimos el texto no nos aparece, si no que aparecen asteriscos. Como está claro, se usa para cuando pedimos al usuario su contraseña.
La sintaxis es:
<INPUT TYPE=»PASSWORD» NAME=»Clave» VALUE=»texto_inicial»
SIZE=»10″ MAXLENGTH=»12″>
Y para este caso no se verá ningún ejemplo por su semejanza al tipo «TEXT».
Como observación interesante también podemos darle un valor inicial, por ejemplo, para cuando queramos que la contraseña sea una utilizada anteriormente, aunque esto es muy peligroso.
Este tipo de elemento se usa para que el usuario seleccione sólo una entre varias posibles opciones. Su sintaxis es:
<INPUT TYPE=»RADIO» NAME=»nombre» VALUE=»valor» CHECKED>
y las etiquetas tienen el siguiente significado:
– TYPE=»RADIO» Nos indica que se trata de un elemento del tipo que acabamos de explicar.
– NAME=»Nombre» Le asigna un nombre al elemento para que pueda ser usado por la página Web a la que se le envía la información. Todos los elementos que queramos que sean excluyentes (que sólo uno de ellos pueda ser marcado) deberán tener aquí el mismo nombre.
– VALUE=»valor» Con esta etiqueta le damos el valor que se le asignará a la variable «NAME» cuando se le envíe a la página seleccionada en el botón «SUBMIT».
– CHECKED Esta etiqueta sólo debe ponerse en la opción que queramos que aparezca seleccionada por defecto.
Veamos un ejemplo con dos grupos de elementos de este tipo:
<FORM ACTION=»prueba2.php» METHOD=»POST»>
Sexo:
<INPUT TYPE=»RADIO» NAME=»Sexo» VALUE=»hombre» CHECKED>Hombre
<INPUT TYPE=»RADIO» NAME=»Sexo» VALUE=»mujer»>Mujer
<BR><BR>
¿Carnet de conducir?
<INPUT TYPE=»RADIO» NAME=»Carnet» VALUE=»si» CHECKED>Si
<INPUT TYPE=»RADIO» NAME=»Carnet» VALUE=»no»>No
<BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
que nos muestra la siguiente pantalla:
y al pulsar el botón «Aceptar» iremos a la página «prueba2.php», que tiene el siguiente contenido:
<?PHP
$Sexo=$_REQUEST[‘Sexo’];
$Carnet=$_REQUEST[‘Carnet’];
echo(«Sexo: $Sexo»);
echo(«<BR>»);
echo(«Carnet: $Carnet»);
?>
con la que obtenemos el siguiente resultado:
Como puede observarse tenemos dos grupos de elementos de tipo «RADIO», y al pulsar el botón de «Aceptar» se envían a la siguiente página los valores definidos en la etiqueta «VALUE» del elemento seleccionado.
Y también hemos de observar que el texto que aparece junto a los elementos «RADIO» (las palabras «Hombre», «Mujer», etc.) es externo al elemento, es decir, estos elementos no tienen asociado ningún título, al igual que sucedía con «TEXT», «TEXTAREA», etc.
Este elemento nos permite seleccionar opciones independientemente unas de otras, es decir, podremos seleccionar una, varias o incluso ninguna.
Su sintaxis es:
<INPUT TYPE=»CHECKBOX» NAME=»nombre» CHECKED>
y las etiquetas tienen el siguiente significado:
– TYPE=»CHECKBOX» Nos indica que se trata de un elemento del tipo que acabamos de explicar.
– NAME=»Nombre» Le asigna un nombre al elemento para que pueda ser usado por la página Web a la que se le envía la información. En este caso deberemos poner nombres distintos a todos los elementos.
– CHECKED Esta etiqueta hará que nos aparezca seleccionado este elemento por defecto.
Veamos un ejemplo:
<FORM ACTION=»prueba2.php» METHOD=»POST»>
¿Carnet de conducir?
<INPUT TYPE=»CHECKBOX» NAME=»Coche» CHECKED>Coche
<INPUT TYPE=»CHECKBOX» NAME=»Moto»>Moto
<INPUT TYPE=»CHECKBOX» NAME=»Camion»>Camión
<BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
que nos muestra la siguiente pantalla:
y entonces vamos a la página «prueba2.php»:
<?PHP
$Coche=$_REQUEST[‘Coche’];
$Moto=$_REQUEST[‘Moto’];
$Camion=$_REQUEST[‘Camion’];
echo(«Coche: $Coche»);
if ($Coche==»on») echo(» –> Opción COCHE seleccionada.»);
echo(«<BR>»);
echo(«Moto: $Moto»);
if ($Moto==»on») echo(» –> Opción MOTO seleccionada.»);
echo(«<BR>»);
echo(«Camion: $Camion»);
if ($Camion==»on») echo(» –> Opción CAMION seleccionada.»);
?>
que nos mostrará la siguiente página:
Podemos observar que una casilla seleccionada nos envía el valor «on», y de esta forma podemos realizar las acciones que sean oportunas.
En el caso de «TEXT» sólo podemos escribir una línea, es decir, que si pulsamos INTRO lo que sucede normalmente es lo mismo que si pulsamos sobre el botón «SUBMIT», así que si queremos permitir que se introduzcan más líneas usaremos este elemento.
Su sintaxis es:
<TEXTAREA NAME=»nombre» ROWS=»número_de_filas»
COLS=»número_de_columnas»>Texto inicial…
</TEXTAREA>
Y las etiquetas tienen el siguiente significado:
– NAME=»nombre» Nombre que se usará para enviar la información a la otra página.
– ROWS=»número_de_filas» Número de filas que tendrá el área para escribir el texto. Esto no quiere decir que no podamos escribir más. Si escribimos más líneas nos aparecerán las barras de desplazamiento.
– COLS=»número_de_columnas» Número de columnas que tendrá el área para el texto.
– Lo que aparezca después del signo «>» que cierra la etiqueta «TEXTAREA» hasta el delimitador de final de etiqueta «</TEXTAREA>» será el texto inicial que tendremos en la página, incluidos los saltos de línea que hayan.
Veamos un ejemplo:
<FORM ACTION=»prueba2.php» METHOD=»POST»>
Texto:
<TEXTAREA NAME=»Texto» ROWS=»5″ COLS=»7″>12345</TEXTAREA>
<BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
que genera la siguiente pantalla:
Y cuando llamáramos al fichero «prueba2.php»:
<?PHP
$TextoEscrito=$_REQUEST[‘Texto’];
echo(«Has escrito el texto: $TextoEscrito»);
?>
obtendríamos la siguiente pantalla:
Como se ha comentado antes, podemos escribir varias líneas, incluso aunque no queden visibles, ya que automáticamente muestra las barras de desplazamiento:
Que nos mostrará el contenido que ha recibido:
Pero ojo, aunque en el «TEXTAREA» hayamos pulsado la tecla INTRO, cuando lo enviemos a la página «prueba2.php» aparecerá todo seguido y ocupando toda la ventana a lo largo. Eso es debido a que en HTML se ignoran los saltos de línea o «INTRO», así que si queremos que los ponga deberemos convertir los saltos de línea a la etiqueta «<BR>» con la función «str_replace» de la siguiente forma (en el fichero «prueba2.php»):
<?PHP
$TextoEscrito=$_REQUEST[‘Texto’];
$TextoEscrito=str_replace(chr(13),'<BR>’,$TextoEscrito);
echo(«Has escrito el texto: $TextoEscrito»);
?>
y nos aparecerá el texto en pantalla como se muestra a continuación:
que, como podemos observar, hay un salto de línea después del texto «…que son visibles.»
Con este elemento nos muestra una lista desplegable de la cual sólo podremos elegir una de las opciones que aparecen.
Su sintaxis es la siguiente:
<SELECT NAME=»Nombre»>
<OPTION SELECTED>Opcion1
<OPTION>Opcion2
<OPTION>Opcion3
</SELECT>
y las etiquetas tienen el siguiente significado:
– NAME=»Nombre» Le asigna un nombre al elemento para que pueda ser usado por la página Web a la que se le envía la información.
– <OPTION>Opcion1 Primero pondremos para cada opción de la lista la etiqueta «<OPTION>» y después el texto que queremos que nos aparezca en la lista desplegable, y que será el texto que se envíe a la página a la cual vayamos al pulsar el botón de «SUBMIT». Si queremos que una de las opciones aparezca seleccionada inicialmente pondremos la palabra «SELECTED» detrás de «OPTION».
Veamos un ejemplo:
<FORM ACTION=»prueba2.php» METHOD=»POST»>
<SELECT NAME=»Estudios»>
<OPTION SELECTED>ESO
<OPTION>Bachiller
<OPTION>Ciclo Formativo Medio
<OPTION>Ciclo Formativo Superior
<OPTION>Estudios Universitarios
</SELECT>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
que nos muestra la siguiente pantalla:
y entonces vamos a la página «prueba2.php»:
<?PHP
$Estudios=$_REQUEST[‘Estudios’];
echo(«Estudios: $Estudios»);
?>
que nos mostrará la siguiente página:
Con este elemento en vez de aparecer una lista desplegable aparece una lista en la cual se ven varios de los elementos. Además nos permitirá seleccionar varios de los elementos a la vez si así lo deseamos.
Su sintaxis es la siguiente:
<SELECT MULTIPLE NAME=»Nombre» SIZE=»3″>
<OPTION SELECTED>Opcion1
<OPTION>Opcion2
<OPTION>Opcion3
</SELECT>
y las etiquetas tienen el siguiente significado:
– NAME=»Nombre» Le asigna un nombre al elemento para que pueda ser usado por la página Web a la que se le envía la información.
– SIZE=»3″ Nos indica la cantidad de elementos que se verán de la lista. Para acceder a los demás elementos podremos movernos por la lista con la barra de desplazamiento que aparece a la derecha.
– MULTIPLE Con esta etiqueta estamos indicando que podremos seleccionas más de una de las opciones que aparecen. Para ello deberemos pulsar la tecla «Ctrl» mientras hacemos clic en las opciones deseadas.
– <OPTION>Opcion1 Primero pondremos para cada opción de la lista la etiqueta «<OPTION>» y después el texto que queremos que nos aparezca en la lista desplegable, y que será el texto que se envíe a la página a la cual vayamos al pulsar el botón de «SUBMIT». Si queremos que alguna de las opciones aparezca seleccionada inicialmente pondremos la palabra «SELECTED» detrás de «OPTION».
Veamos un ejemplo:
<FORM ACTION=»prueba2.php» METHOD=»POST»>
Elija un día de la semana:
<BR><BR>
<SELECT NAME=»Semana» SIZE=»5″>
<OPTION>Lunes
<OPTION>Martes
<OPTION>Miércoles
<OPTION>Jueves
<OPTION>Viernes
<OPTION>Sábado
<OPTION>Domingo
</SELECT>
<BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
que nos muestra la siguiente pantalla:
y entonces vamos a la página «prueba2.php»:
<?PHP
$Dia=$_REQUEST[‘Semana’];
echo(«Dia de la semana elegido: $Dia»);
?>
que nos mostrará la siguiente página:
Ahora vamos a ver como deberíamos de hacerlo si queremos que el usuario pueda seleccionar varios elementos de la lista. Deberemos indicar que se trata de un «SELECT MULTIPLE», y el nombre («NAME») de la variable que contendrá los valores será un array (indicado con los corchetes: «[]»).
<FORM ACTION=»prueba2.php» METHOD=»POST»>
Elija uno o varios días de la semana:
<BR><BR>
<SELECT MULTIPLE NAME=»Semana[]» SIZE=»5″>
<OPTION SELECTED>Lunes
<OPTION>Martes
<OPTION SELECTED>Miércoles
<OPTION>Jueves
<OPTION>Viernes
<OPTION>Sábado
<OPTION>Domingo
</SELECT>
<BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
La pantalla que nos mostrará será la siguiente (con los días «lunes» y «miércoles» seleccionados inicialmente):
y entonces vamos a la página «prueba2.php«:
<?PHP
$Semana=$_REQUEST[‘Semana’];
$DiasElegidos=count($Semana);
echo(«Dias de la semana elegidos:<BR>»);
for ($i=0; $i<$DiasElegidos; $i++)
echo(«$Semana[$i]<BR>»);
// Otra forma de hacerlo:
echo(«<BR>Otra forma de hacerlo:<BR>»);
foreach ($Semana as $Dia)
echo(«$Dia<BR>»);
?>
que nos mostrará la siguiente página:
Vistos los elementos posibles que puede tener un formulario vamos a mostrar ahora como hacerlo todo en un único fichero. Las ventajas de esto es que usamos menos ficheros y validamos el formulario dentro del propio formulario.
La lógica del fichero PHP será la siguiente:
si se ha enviado el formulario
procesaremos los datos del formulario
si no
mostraremos el formulario
Veamos un ejemplo de un formulario simple en un único fichero (prueba.php):
if ($_POST){ // Si se ha enviado el formulario
echo(«Formulario recibido:<BR>»);
$Nombre=$_REQUEST[‘Nombre’];
$Apellidos=$_REQUEST[‘Apellidos’];
echo(«Tu nombre es: ‘$Nombre'<BR>»);
echo(«Tus apellidos son: ‘$Apellidos'<BR>»);
}else{ // No se ha enviado el formulario: lo pongo.
?>
<FORM ACTION=»prueba.php» METHOD=»POST»>
Rellena tus datos:
<BR><BR>
Nombre:
<INPUT TYPE=»text» NAME=»Nombre» VALUE=»»
SIZE=»30″ MAXLENGTH=»20″><BR><BR>
Apellidos:
<INPUT TYPE=»text» NAME=»Apellidos» VALUE=»»
SIZE=»30″ MAXLENGTH=»20″><BR><BR>
<INPUT TYPE=»submit» VALUE=»Aceptar»>
<INPUT TYPE=»reset» VALUE=»Borrar»>
</FORM>
<?PHP
}
?>
Lo primero que debemos observar es que el código HTML y el PHP se mezclan entre ellos sin ningún problema, pero debemos tener cuidado con esto, pues al principio resulta complicado. Se podría haber hecho todo en PHP, pero deberíamos haber usado la función «echo()» para pasar dentro del código PHP cada una de las líneas HTML.
El resultado de la primera vez que visitemos la página «prueba.php» será el siguiente:
Una vez rellenados los datos, tal y como se muestra a continuación:
Pulsaremos el botón «Aceptar» y nos volveremos a la página «prueba.php» pero en este caso se detecta que hemos enviado datos («if ($_POST)») y se ejecuta el código que nos genera la siguiente pantalla:
Ejercicio 3.1: Crear un formulario (en un único fichero) que nos pida nuestros nombre, apellidos, sexo (RADIO), que vehículo tenemos: bicicleta, coche o moto (CHECKBOX), y que estudios tenemos: ESO, Bachiller, Ciclo Formativo, o Universitario (SELECT). Después mostrar los datos por pantalla.
El último paso para perfeccionar nuestra página PHP sería validar los datos enviados en el formulario y en caso de que haya algún error (un campo está vacío y debería contener algo, etc.) mostrar el formulario con los errores que hayan e indicárselo al usuario.
Para ello la lógica del fichero PHP sería la siguiente:
si se ha enviado el formulario
si hay errores
mostrar formulario con errores
si no hay errores
procesaremos los datos del formulario
si no
mostraremos el formulario