Sie sind auf Seite 1von 66

CLASE N 3

FORMULARIOS en HTML
Mg. Orleans Moiss Glvez Tapia
FACULTAD DE INGENIERA
ESCUELA ACADEMICA PROFESIONAL
DE INGENIERA DE SISTEMAS
FORMULARIOS
Un formulario permite que el visitante al sitio cargue datos y sean enviados al
servidor.
1. A visitor visits a web page that contains a form.
2. The web browser displays the HTML form.
3. The visitor fills in the form and submits
4. The browser sends the submitted form data to
the web server
5. A form processor script running on the web
server processes the form data
6. A response page is sent back to the browser.
CMO FUNCIONA UN FORMULARIO HTML
FORMULARIOS
$_GET["variable del form"];
$_POST["variable del form"];
$_REQUEST["variable del form"];
variable del form: indica el nombre de la
variable con la cual recogeremos los
datos en el script
FORMULARIOS
$_GET["variable del form"];
$_POST["variable del form"];
$_REQUEST["variable del form"];
$apellidos = $_GET['apellidos'];
$telefono = $_GET['celular'];
$edadPersona = $_GET['edad'];
FORMULARIOS
$_GET["variable del form"];
$_POST["variable del form"];
$_REQUEST["variable del form"];
$apellidos = $_GET['apellidos'];
$telefono = $_GET['celular'];
$edadPersona = $_GET['edad'];
FORMULARIOS
$_GET["variable del form"];
$_POST["variable del form"];
$_REQUEST["variable del form"];
$apellidos = $_GET['apellidos'];
$telefono = $_GET['celular'];
$edadPersona = $_GET['edad'];
LA DIFERENCIA
Usando get los datos del
formulario se ven en la url de la
pgina siguiente. En cambio
usando post no se ven los valores
en la direccin de la web
MTODOS DE ENVO DE UN FORMULARIO HTML
CONTROLES DE UN FORMULARIO HTML
Los formularios permiten solicitar
informacin al usuario y procesarla.
El formulario contiene diferentes
componentes como: campos de texto,
botones de opcin, listas
desplegables etc.
Los formularios permiten que diversas
personas puedan enviar informacin
al servidor, en donde est instalado
un programa que procesa esta
informacin.
FORMULARIOS
Las etiquetas que abren y cierran un formulario son <form> y
</form> (apertura sin barra y cierre con barra, como siempre).
......
<form method="post" action="mostrardatosenpagina.php">
......
</form>
.......
Adems, en la etiqueta de apertura se aade qu queremos
que se haga con los datos que se recojan, o mejor dicho,
qu archivo va a procesar esos datos.
FORMULARIOS
......
<form method="post" action="mostrardatosenpagina.php">
......
</form>
.......
Dentro de la etiqueta <form>, se encuentra el atributo
action. Este nos especificar el documento que manejar el
formulario completado y enviado.
Tambin contamos con el atributo method. Esta propiedad
puede almacenar nicamente dos valores (post o get)
EJEMPLO
Confeccionaremos un formulario para el ingreso de nuestro nombre y
un botn para el envo del dato ingresado al servidor:
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
EJEMPLO
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
La propiedad action se inicializa con el nombre de la pgina que procesar los datos
en el servidor
EJEMPLO
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Normalmente un formulario se enva mediante post (los datos se envan con el
cuerpo del formulario) En caso de utilizar get los datos se envan en la cabecera de la
peticin de la pgina
EJEMPLO
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Ahora veamos el cuadro de texto donde se ingresa el nombre:
EJEMPLO
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Tambin mediante el elemento input definimos un botn para el envo de datos al
servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya
tenemos un botn para el envo de datos.
EJEMPLO
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
La propiedad value almacena la etiqueta que debe mostrar el botn.
EJEMPLO
ETIQUETAS DE UN FORMULARIO HTML
ETIQUETAS DE UN FORMULARIO HTML
action="datos.php" --> nos indica que el archivo datos.php es el encargado de
manipular los datos que el usuario ingres en el formulario
method="get" --> nos indica que los datos del formulario se enviarn por el
mtodo get
name="nombre" --> le asigna un nombre al elemento que luego puede ser usado
en scripts PHP.
EJERCICIO CALIFICADO
<html>
<head>
<title>Formulario</title>
</head>
<body>
<form action="datos.php" method="get">
Nombre: <input type="text" name="nombre"><br />
Contrasea: <input type="password" name="contra"><br />
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
<p>Al apretar el botn "Enviar" usted mandar todos los datos a una
pgina llamada "datos.php" la cual procesar toda la informacin</p>
</body>
ETIQUETAS DE UN FORMULARIO HTML
ETIQUETAS DE UN FORMULARIO HTML
action="edades.asp" --> nos indica que el archivo edades.asp es el encargado
de manipular los datos que el usuario ingres en el formulario
method="post" --> nos indica que los datos del formulario se enviarn por el
mtodo post
name="edad" --> debemos utilizar el mismo nombre(en este caso "edad") para
todos los elementos del mismo control radio.
value="mayor" --> define el valor del elemento <input>
EJERCICIO CALIFICADO
<html>
<head>
<title>Formulario</title>
</head>
<body>
<form action="colores.php" method="get">
Elija un color<br>
<input type="radio" name="col" value="red">Rojo<br>
<input type="radio" name="col" value="blue">Azul<br>
<input type="radio" name="col" value="green">Verde<br>
<input type="submit" value="Enviar">
<input type="reset" value="Borrar">
</form>
</body>
</html>
ETIQUETAS DE UN FORMULARIO HTML
action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargado
de manipular los datos que el usuario ingres en el formulario
method="get" --> nos indica que los datos del formulario se enviarn por el
mtodo get
name="pasa" --> debemos utilizar el mismo nombre(en este caso "pasa") para
todos los elementos del mismo control checkbox.
value="tv" --> define el valor del elemento <input>
ETIQUETAS DE UN FORMULARIO HTML
EJERCICIO CALIFICADO
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione los lenguajes que conoce:
<br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
ETIQUETAS DE UN FORMULARIO HTML
ETIQUETAS DE UN FORMULARIO HTML
action="datos_personales.php" --> nos indica que el archivo
datos_personales.php es el encargado de manipular los datos que el usuario
ingres en el formulario
method="post" --> nos indica que los datos del formulario se enviarn por el
mtodo post
name="nombre" - name="secreto" --> le asigna un nombre al elemento que
luego puede ser usado en scripts o en hojas de estilo
value="Enviar" --> define el texto del botn "submit"
value="Borrar" --> define el texto del botn "reset"
ETIQUETAS DE UN FORMULARIO HTML
action="continentes.php" --> nos indica que el archivo continentes.php es el
encargado de manipular los datos que el usuario ingres en el formulario
method="get" --> nos indica que los datos del formulario se enviarn por el
mtodo get
name="continente" --> le asigna un nico nombre al men desplegable
value="america" --> define el valor del elemento <option>
ETIQUETAS DE UN FORMULARIO HTML
EJERCICIO CALIFICADO
<html>
<head>
<title>Formulario</title>
</head>
<body>
<form action="hobbie.php" method="get">
Elija su pasatiempo favorito:
<select name="pasa" disabled>
<option value="tv">TV</option>
<option value="libros">Libros</option>
<option value="musica">Msica</option>
<option value="cine">Cine</option>
<option value="teatro">Teatro</option>
<option value="caminar">Caminar</option>
<option value="otros">Otros</option>
</select>
</form>
<p>La etiqueta <b>select</b> define un men desplegable.<br> El atributo
<b>disabled</b> lo dashabilita, sin permitir su seleccin.</p>
</body>
</html>
ETIQUETAS DE UN FORMULARIO HTML
action="texto.php" --> nos indica que el archivo texto.php es el encargado de
manipular los datos que el usuario ingres en el formulario
method="post" --> nos indica que los datos del formulario se enviarn por el
mtodo post
name="eltexto" --> le asigna un nombre al elemento textarea
ETIQUETAS DE UN FORMULARIO HTML
EJERCICIOS
en PHP
VARIABLE SUPERGLOBAL
<html>
<body>
<Form action="welcome.php" method="POST" >
<input type="text" name="nombre">
<input type="text" name="edad">
<input type="submit" value="Subir" >
</body>
</html>
<html>
<body>
<?php
echo "Bienvenido, " . $_POST["nombre"] . "
";
echo "Tu edad es " . $_POST["edad"];
?>
</body>
</html>
VARIABLE SUPERGLOBAL
<html>
<body>
<Form action="welcome.php" method="GET" >
<input type="text" name="nombre">
<input type="text" name="edad">
<input type="submit" value="Subir" >
</body>
</html>
<html>
<body>
<?php
echo "Bienvenido, " . $_GET["nombre"] . "
";
echo "Tu edad es " . $_GET["edad"];
?>
</body>
</html>
VARIABLE SUPERGLOBAL
<html>
<body>
<Form action="welcome.php" method="POST" >
<input type="text" name="nombre">
<input type="text" name="edad">
<input type="submit" value="Subir" >
</body>
</html>
<html>
<body>
<?php
echo "Bienvenido, " . $_REQUEST["nombre"] . "
";
echo "Tu edad es " . $_REQUEST["edad"];
?>
</body>
</html>
Ej09
Ej09
Ej10
Ej10
Ej11
Ej11
Ej11
Ej11
Ej12
Ej12
Ej12
Ej1305
Ej13
Ej13
EJERCICIO 03
EJERCICIO 03
EJERCICIO 03
EJERCICIO 06
Para disponer un select se utiliza la marca:
<select name="select1">
Los distintos item que tendr el select, se los indican con
las marcas:
<option value="sumar">sumar</option>
<option value="restar">restar</option>
El texto que va fuera de las marcas es el que se muestra
en el formulario, y la propiedad value es la que se
enva al formulario y se debe consultar en la pgina
php que procesa el formulario.
EJERCICIO 06
EJERCICIO 06
EJERCICIO 06
if ($variable == Valor1) {
... sentencias;
} else if( $variable == Valor2)
{
... sentencias;
} else if ($variable == Valor3)
{
... sentencias;
} else {
... sentencias;
}
switch($variable) {
case Valor1:
... sentencias;
break;
case Valor2:
... sentencias;
break;
.
.
.
default:
... sentencias;
}
ESTRUCTURA GENERAL DE UNA EXPRESIN SWITCH
ESTRUCTURA GENERAL DE UNA EXPRESIN SWITCH
<?php
//Ejemplo uso if else
$variable=2;
if($variable==1) {
echo '$variable es igual a 1.';
} else if($variable==2) {
echo '$variable es igual a 2.';
} else if($variable==3) {
echo '$variable es igual a 3.';
} else {
echo '$variable no es igual a 1, 2 o 3.';
}
?>
<?php
$variable=2;
switch($variable) {
case 1:
echo '$variable es igual a 1.';
break;
case 2:
echo '$variable es igual a 2.';
break;
case 3:
echo '$variable es igual a 3.';
break;
default:
echo '$variable no es igual a 1, 2 o 3.';
}
?>
ESTRUCTURA GENERAL DE UNA EXPRESIN SWITCH
<?php
//Ejemplo uso if else
$variable=2;
if($variable==1) {
echo '$Variable es igual a 1.';
} else if($variable==2 OR $variable==3) {
echo '$Variable es igual a 2 o 3.';
}else {
echo '$Variable no es igual a 1, 2 o 3.';
}
?>
<?php
$variable=2;
switch($variable) {
case 1:
//Se ejecuta si $variable vale 1
echo '$Variable es igual a 1.';
break;
case 2:
case 3:
//Se ejecuta si $variable vale 2 o 3
echo '$Variable es igual a 2 o 3.';
break;
default:
//Se ejecuta en cualquier otro caso
echo '$Variable no es igual a 1, 2 o 3.';
}
?>

Das könnte Ihnen auch gefallen