sesion 03 - ucv-limanorte
TRANSCRIPT
-
8/11/2019 Sesion 03 - Ucv-limanorte
1/66
CLASE N 3
FORMULARIOS en HTML
Mg. Orleans Moiss Glvez Tapia
FACULTAD DE INGENIERAESCUELA ACADEMICA PROFESIONAL
DE INGENIERA DE SISTEMAS
-
8/11/2019 Sesion 03 - Ucv-limanorte
2/66
FORMULARIOS
Un formulario permite que el visitante al sitio cargue datos y sean enviados alservidor.
-
8/11/2019 Sesion 03 - Ucv-limanorte
3/66
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 submits4. The browser sends the submitted form data to
the web server5. A form processor script running on the web
server processes the form data6. A response page is sent back to the browser.
CMO FUNCIONA UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
4/66
FORMULARIOS
$_GET[ "variable del form "];
$_POST[ "variable del form "];
$_REQUEST[ "variable del form "];
var i ab le de l fo rm : indica el nombre de lavariable con la cual recogeremos los
datos en el script
-
8/11/2019 Sesion 03 - Ucv-limanorte
5/66
FORMULARIOS
$_GET[ "variable del form "];
$_POST[ "variable del form "];
$_REQUEST[ "variable del form "];
$apellidos = $_GET['apellidos'];
$telefono = $_GET['celular'];
$edadPersona = $_GET['edad'];
-
8/11/2019 Sesion 03 - Ucv-limanorte
6/66
FORMULARIOS
$_GET[ "variable del form "];
$_POST[ "variable del form "];
$_REQUEST[ "variable del form "];
$apellidos = $_GET['apellidos'];
$telefono = $_GET['celular'];
$edadPersona = $_GET['edad'];
-
8/11/2019 Sesion 03 - Ucv-limanorte
7/66
FORMULARIOS
$_GET[ "variable del form "];
$_POST[ "variable del form "];
$_REQUEST[ "variable del form "];
$apellidos = $_GET['apellidos'];
$telefono = $_GET['celular'];
$edadPersona = $_GET['edad'];
-
8/11/2019 Sesion 03 - Ucv-limanorte
8/66
LA DIFERENCIA
Usando get los datos delformulario se ven en la url de la
pgina siguiente. En cambiousando post no se ven los valores
en la direccin de la web
MTODOS DE ENVO DE UN FORMULARIO HTM
-
8/11/2019 Sesion 03 - Ucv-limanorte
9/66
CONTROLES DE UN FORMULARIO HTML
Los formularios permiten solicitarinformacin al usuario y procesarla.
El formulario contiene diferentes
componentes como: campos de texto ,botones de opcin , listasdesplegables etc.
Los formularios permiten que diversaspersonas puedan enviar informacinal servidor, en donde est instaladoun programa que procesa esta
informacin .
-
8/11/2019 Sesion 03 - Ucv-limanorte
10/66
FORMULARIOS
Las etiquetas que abren y cierran un formulario son y (apertura sin barra y cierre con barra, como siempre).
......
.............
Adems, en la etiqueta de apertura se aade qu queremosque se haga con los datos que se recojan , o mejor dicho,qu archivo va a procesar esos datos.
-
8/11/2019 Sesion 03 - Ucv-limanorte
11/66
FORMULARIOS
......
.............
Dentro de la etiqueta , se encuentra el atributoaction . Este nos especificar el documento que manejar elformulario completado y enviado.
Tambin contamos con el atributo method . Esta propiedadpuede almacenar nicamente dos valores (post o get)
-
8/11/2019 Sesion 03 - Ucv-limanorte
12/66
EJEMPLO
Confeccionaremos un formulario para el ingreso de nuestro nombre yun botn para el envo del dato ingresado al servidor:
-
8/11/2019 Sesion 03 - Ucv-limanorte
13/66
Prueba de formulario
Ingrese su nombre:
EJEMPLO
-
8/11/2019 Sesion 03 - Ucv-limanorte
14/66
Prueba de formulario
Ingrese su nombre:
La propiedad action se inicializa con el nombre de la pgina que procesar los datos
en el servidor
EJEMPLO
-
8/11/2019 Sesion 03 - Ucv-limanorte
15/66
Prueba de formulario
Ingrese su nombre:
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 lapeticin de la pgina
EJEMPLO
-
8/11/2019 Sesion 03 - Ucv-limanorte
16/66
Prueba de formulario
Ingrese su nombre:
Ahora veamos el cuadro de texto donde se ingresa el nombre:
EJEMPLO
-
8/11/2019 Sesion 03 - Ucv-limanorte
17/66
Prueba de formulario
Ingrese su nombre:
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 yatenemos un botn para el envo de datos.
EJEMPLO
-
8/11/2019 Sesion 03 - Ucv-limanorte
18/66
Prueba de formulario
Ingrese su nombre:
La propiedad value almacena la etiqueta que debe mostrar el botn.
EJEMPLO
-
8/11/2019 Sesion 03 - Ucv-limanorte
19/66
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
20/66
ETIQUETAS DE UN FORMULARIO HTML
action="datos.php" --> nos indica que el archivo datos.php es el encargado demanipular los datos que el usuario ingres en el formulario
method="get" --> nos indica que los datos del formulario se enviarn por elmtodo get
name="nombre" --> le asigna un nombre al elemento que luego puede ser usadoen scripts PHP.
-
8/11/2019 Sesion 03 - Ucv-limanorte
21/66
EJERCICIO CALIFICADO
-
8/11/2019 Sesion 03 - Ucv-limanorte
22/66
Formulario
Nombre: < input type="text" name="nombre">
Contrasea: < input type="password" name="contra">
< input type="submit" value="Enviar">< input type="reset" value="Borrar">Al apretar el botn "Enviar" usted mandar todos los datos a unapgina llamada "datos.php" la cual procesar toda la informacin
-
8/11/2019 Sesion 03 - Ucv-limanorte
23/66
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
24/66
ETIQUETAS DE UN FORMULARIO HTML
action="edades.asp" --> nos indica que el archivo edades.asp es el encargadode 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
-
8/11/2019 Sesion 03 - Ucv-limanorte
25/66
EJERCICIO CALIFICADO
-
8/11/2019 Sesion 03 - Ucv-limanorte
26/66
Formulario
Elija un color
Rojo
Azul
Verde -
8/11/2019 Sesion 03 - Ucv-limanorte
27/66
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
28/66
action="hobbie.php" --> nos indica que el archivo hobbie.php es el encargadode 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
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
29/66
EJERCICIO CALIFICADO
-
8/11/2019 Sesion 03 - Ucv-limanorte
30/66
Prueba de formulario
Ingrese su nombre:
Seleccione los lenguajes que conoce:
Java
C++
C
C# -
8/11/2019 Sesion 03 - Ucv-limanorte
31/66
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
32/66
ETIQUETAS DE UN FORMULARIO HTML
action="datos_personales.php" --> nos indica que el archivodatos_personales.php es el encargado de manipular los datos que el usuarioingres en el formulario
method="post" --> nos indica que los datos del formulario se enviarn por elmtodo post
name="nombre" - name="secreto" --> le asigna un nombre al elemento queluego 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"
-
8/11/2019 Sesion 03 - Ucv-limanorte
33/66
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
34/66
action="continentes.php" --> nos indica que el archivo continentes.php es elencargado de manipular los datos que el usuario ingres en el formulario
method="get" --> nos indica que los datos del formulario se enviarn por elmtodo get
name="continente" --> le asigna un nico nombre al men desplegable
value="america" --> define el valor del elemento
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
35/66
EJERCICIO CALIFICADO
-
8/11/2019 Sesion 03 - Ucv-limanorte
36/66
Formulario
Elija su pasatiempo favorito:
TV
LibrosMsicaCineTeatroCaminarOtros
La etiqueta select define un men desplegable.
El atributodisabled lo dashabilita, sin permitir su seleccin. -
8/11/2019 Sesion 03 - Ucv-limanorte
37/66
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
38/66
action="texto.php" --> nos indica que el archivo texto.php es el encargado demanipular los datos que el usuario ingres en el formulario
method="post" --> nos indica que los datos del formulario se enviarn por elmtodo post
name="eltexto" --> le asigna un nombre al elemento textarea
ETIQUETAS DE UN FORMULARIO HTML
-
8/11/2019 Sesion 03 - Ucv-limanorte
39/66
EJERCICIOSen PHP
-
8/11/2019 Sesion 03 - Ucv-limanorte
40/66
-
8/11/2019 Sesion 03 - Ucv-limanorte
41/66
VARIABLE SUPERGLOBAL
-
8/11/2019 Sesion 03 - Ucv-limanorte
42/66
VARIABLE SUPERGLOBAL
-
8/11/2019 Sesion 03 - Ucv-limanorte
43/66
Ej09
-
8/11/2019 Sesion 03 - Ucv-limanorte
44/66
Ej09
-
8/11/2019 Sesion 03 - Ucv-limanorte
45/66
Ej10
-
8/11/2019 Sesion 03 - Ucv-limanorte
46/66
Ej10
-
8/11/2019 Sesion 03 - Ucv-limanorte
47/66
Ej11
-
8/11/2019 Sesion 03 - Ucv-limanorte
48/66
Ej11
-
8/11/2019 Sesion 03 - Ucv-limanorte
49/66
Ej11
-
8/11/2019 Sesion 03 - Ucv-limanorte
50/66
Ej11
-
8/11/2019 Sesion 03 - Ucv-limanorte
51/66
Ej12
-
8/11/2019 Sesion 03 - Ucv-limanorte
52/66
Ej12
-
8/11/2019 Sesion 03 - Ucv-limanorte
53/66
Ej12
-
8/11/2019 Sesion 03 - Ucv-limanorte
54/66
Ej13 05
-
8/11/2019 Sesion 03 - Ucv-limanorte
55/66
Ej13
-
8/11/2019 Sesion 03 - Ucv-limanorte
56/66
Ej13
-
8/11/2019 Sesion 03 - Ucv-limanorte
57/66
EJERCICIO 03
-
8/11/2019 Sesion 03 - Ucv-limanorte
58/66
EJERCICIO 03
-
8/11/2019 Sesion 03 - Ucv-limanorte
59/66
EJERCICIO 03
EJERCICIO 06
-
8/11/2019 Sesion 03 - Ucv-limanorte
60/66
Para disponer un select se utiliza la marca:
Los distintos item que tendr el select, se los indican conlas marcas:
sumarrestar
El texto que va fuera de las marcas es el que se muestraen el formulario, y la propiedad value es la que seenva al formulario y se debe consultar en la pginaphp que procesa el formulario.
-
8/11/2019 Sesion 03 - Ucv-limanorte
61/66
EJERCICIO 06
-
8/11/2019 Sesion 03 - Ucv-limanorte
62/66
EJERCICIO 06
-
8/11/2019 Sesion 03 - Ucv-limanorte
63/66
-
8/11/2019 Sesion 03 - Ucv-limanorte
64/66
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
-
8/11/2019 Sesion 03 - Ucv-limanorte
65/66
ESTRUCTURA GENERAL DE UNA EXPRESIN SWITCH
-
8/11/2019 Sesion 03 - Ucv-limanorte
66/66
ESTRUCTURA GENERAL DE UNA EXPRESIN SWITCH