Tema 2: Formularios
Tema 2: Formularios
1.
2.
3.
4.
Acceso a formularios HTML desde PHP
El formulario de PHP
Subida de archivos al servidor
Validación de los datos de un formulario
Elemento FORM
El elemento <form> es el elemento que define formalmente un formulario.
<form>
... elementos del formulario ...
</form>
Los atributos del formulario determinan el modo general en el que éste se
comportará:
<form atributo1="valor" atributo2="valor" ...>
...
</form>
Fieldset
Este es un elemento que agrupa a diferentes elementos del formulario,
elementos que están relacionados entre ellos. La sintaxis de fieldset es la
siguiente:
<fieldset>...</fieldset>
Entre estos elementos aparecerán los campos del formulario. Por
ejemplo si tenemos campos personales básicos podemos agruparlos de
la siguiente forma:
<fieldset>
<label for="nombre">Nombre</label><input type="text"
id="nombre"/>
<label for="apellido">Apellido</label><input type="text"
id="apellido"/>
</fieldset>
Legend
El elemento legend nos servirá para darle un significado a una agrupación
<fieldset>
<legend>Introduzca sus datos personales</legend>
<label for="nombre">Nombre</label><input
type="text" id="nombre"/>
<label for="apellido">Apellido</label><input
type="text" id="apellido"/>
</fieldset>
Destino del formulario
Para establecer el destino del formulario tenemos el atributo action. El
atributo action tiene la URL de destino del formulario. La estructura del
atributo action es:
<form action="url-destino"> … </form>
Las URL de destino suelen ser programas o código de servidor, ya sea
Java, PHP, Node, ASP,… Los cuales recuperan la información del
formulario, la manipulan y nos devuelven una nueva página HTML.
Tipo de envío: GET y POST
Existen dos métodos con los que el navegador puede enviar información
al servidor:
● Método HTTP GET. Información se envía de forma visible
● Método HTTP POST. Información se envía de forma no visible
Antes de que el navegador envíe la información proporcionada, la codifica
mediante URL encoding, dando como resultado un Query String. Esta
codificación es un esquema de keys y values separados por un
ampersand &
Tipo de envío: GET y POST
Para establecer el tipo de envío del formulario tenemos el atributo method.
El atributo method puede tener dos valores: GET y POST. El atributo
method lo encontramos dentro del elemento form:
<form method="GET|POST"> … </form>
A la hora de enviar los ** formularios de forma GET** lo que vamos a
conseguir es que a la URL destino del formulario se le añaden los
parámetros con los datos del formulario en la estructura:
action?nombre1=valor1&nombre2=valor2&...&nombreN=valorN
Ejemplo GET ---html--- uno.php
Si tenemos el siguiente formulario:
<body>
<form action="envio.php" method="GET">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre"/>
<label for="apellido">Apellido</label>
<input type="text" id="apellido" name="apellido"/>
<button id="envio">Enviar Formulario</button>
</form>
</body>
Lo que se enviará en la URL será algo parecido a:
envio.php?name=Victor&apellido=Robles
Ejemplo 1 POST ---html--- uno.php
Si indicamos que el método de envío del formulario es POST lo que hará
el navegador es enviar los datos junto al cuerpo del formulario y no se
verán en la URL.
Así, en el siguiente formulario:
<body>
<form action="envio.php" method="POST">
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre"/> <br>
<label for="apellido">Apellido</label>
<input type="text" id="apellido" name="apellido"/>
<button id="envio">Enviar Formulario</button>
</form>
</body>
Ejemplo 2 POST ---html--- uno.php
<body>
<form action="form-result.php" target="_blank" method="POST">
<fieldset>
<legend>Introduzca sus datos personales</legend>
<label for="nombre">Nombre</label>
<input type="text" id="nombre"/>
<br />
<label for="apellido">Apellido</label>
<input type="text" id="apellido"/>
</fieldset>
</form>
</body>
No se ven los datos en la URL
Acceso a formularios desde PHP
●
archivo uno.php
<HTML>
<BODY>
<FORM ACTION=”dos.php” METHOD=”POST”>
Edad: <INPUT TYPE=”text” NAME=”edad”>
<INPUT TYPE=”submit” VALUE=”aceptar”>
</FORM>
</BODY>
</HTML>
●
archivo dos.php
<HTML>
<BODY>
<?PHP
$edad = $_REQUEST[‘edad’];
print (“La edad es: $edad”);
?>
</BODY>
</HTML>
Acceso a formularios desde PHP
Acceso a formularios desde PHP
●
Acceso a los diferentes tipos de elementos de entrada de
formulario
– Elementos de tipo INPUT
•
•
•
•
•
•
•
•
TEXT
RADIO
CHECKBOX
BUTTON
FILE
HIDDEN
PASSWORD
SUBMIT
– Elemento SELECT
• Simple / múltiple
– Elemento TEXTAREA
Acceso a formularios desde PHP
●
TEXT
Introduzca la cadena a buscar:
<INPUT TYPE="text" NAME="cadena" VALUE="valor por
defecto" SIZE="20">
<?PHP
$cadena = $_REQUEST[‘cadena’];
print ($cadena);
?>
Acceso a formularios desde PHP
●
RADIO
Sexo:
<INPUT TYPE="radio" NAME=“sexo" VALUE=“M“ CHECKED>Mujer
<INPUT TYPE="radio" NAME=“sexo" VALUE=“H">Hombre
<?PHP
$sexo = $_REQUEST[‘sexo’];
print ($sexo);
?>
Acceso a formularios desde PHP
●
CHECKBOX
<INPUT TYPE="checkbox" NAME="extras[]" VALUE="garaje" CHECKED>Garaje
<INPUT TYPE="checkbox" NAME="extras[]" VALUE="piscina">Piscina
<INPUT TYPE="checkbox" NAME="extras[]" VALUE="jardin">Jardín
<?PHP
$extras = $_REQUEST[‘extras’];
foreach ($extras as $extra)
print (“$extra<BR>\n”);
?>
Acceso a formularios desde PHP
●
BUTTON
<INPUT TYPE="button" NAME=“actualizar"
VALUE="Actualizar datos">
<?PHP
$actualizar = $_REQUEST[‘actualizar’];
if ($actualizar)
print ("Se han actualizado los datos");
?>
Acceso a formularios desde PHP
●
FILE
<FORM ACTION="procesa.php" METHOD="post“
ENCTYPE="multipart/form-data">
<INPUT TYPE="file" NAME="archivo">
</FORM>
Acceso a formularios desde PHP
●
HIDDEN
<?PHP
print(“<INPUT TYPE=’hidden’ NAME=’username’
VALUE=’$usuario’>\n”);
?>
<?PHP
$username = $_REQUEST[‘username’];
print ($username);
?>
Acceso a formularios desde PHP
●
PASSWORD
Contraseña: <INPUT TYPE="password"
NAME="clave">
<?PHP
$clave = $_REQUEST[‘clave’];
print ($clave);
?>
Acceso a formularios desde PHP
●
SUBMIT
<INPUT TYPE="submit" NAME="enviar" VALUE="Enviar
datos">
<?PHP
$enviar = $_REQUEST[‘enviar’];
if ($enviar)
print ("Se ha pulsado el botón de enviar");
?>
Acceso a formularios desde PHP
●
SELECT simple
Color:
<SELECT NAME=“color">
<OPTION VALUE=“rojo" SELECTED>Rojo
<OPTION VALUE=“verde">Verde
<OPTION VALUE=“azul">Azul
</SELECT>
<?PHP
$color = $_REQUEST[‘color’];
print ($color);
?>
Acceso a formularios desde PHP
●
SELECT múltiple
Idiomas:
<SELECT MULTIPLE SIZE="3" NAME="idiomas[]">
<OPTION VALUE="ingles" SELECTED>Inglés
<OPTION VALUE="frances">Francés
<OPTION VALUE="aleman">Alemán
<OPTION VALUE="holandes">Holandés
</SELECT>
<?PHP
$idiomas = $_REQUEST[‘idiomas’];
foreach ($idiomas as $idioma)
print (“$idioma<BR>\n”);
?>
Acceso a formularios desde PHP
●
TEXTAREA
Comentario:
<TEXTAREA COLS=“50" ROWS=“4" NAME="comentario">
Este libro me parece ...
</TEXTAREA>
<?PHP
$comentario = $_REQUEST[‘comentario’];
print ($comentario);
?>
Acceso a formularios desde PHP
●
Ejercicio: Diseñar una página web con php que pida al usuario el
precio
de
tres
productos
en
tres
establecimientos
distintos
denominados “Tienda 1”, “Tienda 2” y “Tienda 3”. Una vez se
introduzca esta información se debe calcular y mostrar el precio
medio del producto. El envío de datos debe hacerse por POST y la
recuperación con REQUEST.
El formulario de PHP
●
La forma habitual de trabajar con formularios en PHP es
utilizar un único programa que procese el formulario o lo
muestre según haya sido o no enviado, respectivamente
●
Ventajas:
– Disminuye el número de archivos
– Permite validar los datos del formulario en el propio formulario
●
Procedimiento:
si se ha enviado el formulario:
Procesar formulario
si no:
Mostrar formulario
fsi
Subida de archivos al servidor
●
●
Para subir un archivo al servidor se utiliza el elemento de
entrada FILE
Hay que tener en cuenta una serie de consideraciones
importantes:
– El elemento FORM debe tener el atributo ENCTYPE="multipart/form-
data“
– El archivo tiene un límite en cuanto a su tamaño. Este límite se fija de
dos formas diferentes:
• En el archivo de configuración php.ini
• En el propio formulario
Subida de archivos al servidor
php.ini
;;;;;;;;;;;;;;;;
; File Uploads ;
;;;;;;;;;;;;;;;;
; Whether to allow HTTP file uploads.
file_uploads = On
; Temporary directory for HTTP uploaded files (will use
; system default if not specified).
;upload_tmp_dir =
; Maximum allowed size for uploaded files.
upload_max_filesize = 2M
formulario
<INPUT TYPE=”HIDDEN” NAME=”MAX_FILE_SIZE” VALUE='102400'>
<INPUT TYPE=”FILE” NAME="archivo">
Subida de archivos al servidor
●
Consideraciones (cont)
– Debe darse al archivo un nombre que evite coincidencias con
archivos ya subidos. Por ello, y como norma general, debe
descartarse el nombre original del archivo y crear uno nuevo que
sea único
– El archivo subido se almacena en un directorio temporal y hemos
de moverlo al directorio de destino usando la función
move_upload_file()
●
Procedimiento:
si se ha subido correctamente el archivo:
Asignar un nombre al archivo
Mover el archivo a su ubicación definitiva
si no:
Mostrar un mensaje de error
fsi
Subida de archivos al servidor
HTML
<INPUT TYPE="HIDDEN" NAME="MAX_FILE_SIZE" VALUE="102400">
<INPUT TYPE="FILE" SIZE="44" NAME="imagen">
●
La variable $_FILES contiene toda la información del archivo
subido:
– $_FILES['imagen']['name']
• Nombre original del archivo en la máquina cliente
– $_FILES['imagen']['type']
• Tipo mime del archivo. Por ejemplo, "image/gif"
– $_FILES['imagen']['size']
• Tamaño en bytes del archivo subido
– $_FILES['imagen']['tmp_name']
• Nombre del archivo temporal en el que se almacena el archivo subido
en el servidor
– $_FILES['imagen’]['error']
• Código de error asociado al archivo subido
Crear el formulario HTML
<!DOCTYPE html>
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/formdata">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Cargar imagen" name="submit">
</form>
</body>
</html>
Crear archivo PHP upload 1/3
GENERE EL SUBDIRECTORIO ANTES DE CORRER EL PROGRAMA
<?php
PHP
<?php
$target_dir = "uploads/";
$target_file = $target_dir .
basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType =
strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
Crear archivo PHP upload 2/3
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType !=
"jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
Crear archivo PHP upload 3/3
●
●
●
●
●
●
●
●
●
●
●
●
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file))
{
echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has
been uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
Archivo PHP
PHP
● $ target_dir = "uploads /": especifica el directorio donde se colocará
el archivo
● $ target_file especifica la ruta del archivo a cargar
● $ uploadOk = 1 no se usa aún (se usará más adelante)
● $ imageFileType contiene la extensión de archivo del archivo (en
minúsculas)
● A continuación, compruebe si el archivo de imagen es una imagen
real o una imagen falsa
Subida de archivos al servidor
●
Ejercicio: subida de un archivo al servidor
–
Modifica el programa para subir archivos pdf a un
servidor
– controla su tamaño,
– crea un nombre único para cada archivo
– Almacena los archivos en un subdirectorio
