Sesion 03 - Ucv-limanorte

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


2/66

FORMULARIOS

Un formulario permite que el visitante al sitio cargue datos y sean enviados alservidor.


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


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


5/66

FORMULARIOS




$apellidos = $_GET['apellidos'];

$telefono = $_GET['celular'];

$edadPersona = $_GET['edad'];


6/66

FORMULARIOS








7/66

FORMULARIOS








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


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 .


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.


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)


12/66

EJEMPLO

Confeccionaremos un formulario para el ingreso de nuestro nombre yun botn para el envo del dato ingresado al servidor:


13/66

Prueba de formulario

Ingrese su nombre:

EJEMPLO


14/66


Ingrese su nombre:

La propiedad action se inicializa con el nombre de la pgina que procesar los datos

en el servidor

EJEMPLO


15/66


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


16/66


Ingrese su nombre:

Ahora veamos el cuadro de texto donde se ingresa el nombre:

EJEMPLO


17/66


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


18/66


Ingrese su nombre:

La propiedad value almacena la etiqueta que debe mostrar el botn.

EJEMPLO


19/66

ETIQUETAS DE UN FORMULARIO HTML


20/66


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.


21/66

EJERCICIO CALIFICADO


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


23/66



24/66


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


25/66



26/66

Formulario

Elija un color
Rojo
Azul
Verde


27/66



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



29/66



30/66


Ingrese su nombre:

Seleccione los lenguajes que conoce:
Java
C++
C
C#


31/66



32/66


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"


33/66



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



35/66



36/66

Formulario

Elija su pasatiempo favorito:

TV

LibrosMsicaCineTeatroCaminarOtros

La etiqueta select define un men desplegable.
El atributodisabled lo dashabilita, sin permitir su seleccin.


37/66



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



39/66

EJERCICIOSen PHP


40/66


41/66

VARIABLE SUPERGLOBAL


42/66

VARIABLE SUPERGLOBAL


43/66

Ej09


44/66

Ej09


45/66

Ej10


46/66

Ej10


47/66

Ej11


48/66

Ej11


49/66

Ej11


50/66

Ej11


51/66

Ej12


52/66

Ej12


53/66

Ej12


54/66

Ej13 05


55/66

Ej13


56/66

Ej13


57/66

EJERCICIO 03


58/66

EJERCICIO 03


59/66

EJERCICIO 03

EJERCICIO 06


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.


61/66

EJERCICIO 06


62/66

EJERCICIO 06


63/66


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


65/66



66/66


Sesion 03 - Ucv-limanorte

Documents

Transcript of Sesion 03 - Ucv-limanorte