• Author / Uploaded
• Raúl Flores Salinas

• Categories
• Servidor web
• Gestión de tecnología de la información
• Desarrollo de software
• Informática
• Tecnología

Citation preview

---

FACULTAD DE INGENIERÍA ESCUELA ACADEMICA PROFESIONAL DE INGENIERÍA DE SISTEMAS CLASE N° 3

FORMULARIOS en HTML

Mg. Orleans Moisés Gálvez Tapia

FORMULARIOS

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

CÓMO FUNCIONA UN FORMULARIO HTML

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.

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 $apellidos = $_GET['apellidos']; $telefono = $_GET['celular']; $edadPersona = $_GET['edad'];

$_GET["variable del form"]; $_POST["variable del form"]; $_REQUEST["variable del form"];

FORMULARIOS $apellidos = $_GET['apellidos']; $telefono = $_GET['celular']; $edadPersona = $_GET['edad'];

$_GET["variable del form"]; $_POST["variable del form"]; $_REQUEST["variable del form"];

FORMULARIOS $apellidos = $_GET['apellidos']; $telefono = $_GET['celular']; $edadPersona = $_GET['edad'];

$_GET["variable del form"]; $_POST["variable del form"]; $_REQUEST["variable del form"];

MÉTODOS DE ENVÍO DE UN FORMULARIO HTML

LA DIFERENCIA Usando get los datos del formulario se ven en la url de la página siguiente. En cambio usando post no se ven los valores en la dirección de la web

CONTROLES DE UN FORMULARIO HTML

•

Los formularios permiten solicitar información al usuario y procesarla.

•

El formulario contiene diferentes componentes como: campos de texto, botones de opción, listas desplegables etc.

•

Los formularios permiten que diversas personas puedan enviar información al servidor, en donde está instalado un programa que procesa esta información.

FORMULARIOS  Las etiquetas que abren y cierran un formulario son y (apertura sin barra y cierre con barra, como siempre).

......

......

.......

 Además, en la etiqueta de apertura se añade qué queremos que se haga con los datos que se recojan, o mejor dicho, qué archivo va a procesar esos datos.

FORMULARIOS ......

......

.......

 Dentro de la etiqueta , se encuentra el atributo action. Este nos especificará el documento que manejará el formulario completado y enviado.  También 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 botón para el envío del dato ingresado al servidor:

…EJEMPLO

Prueba de formulario

Ingrese su nombre:






EJEMPLO La propiedad action se inicializa con el nombre de la página que procesará los datos en el servidor

Prueba de formulario

Ingrese su nombre:






EJEMPLO Normalmente un formulario se envía mediante post (los datos se envían con el cuerpo del formulario) En caso de utilizar get los datos se envían en la cabecera de la petición de la página

Prueba de formulario

Ingrese su nombre:






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

Prueba de formulario

Ingrese su nombre:






EJEMPLO También mediante el elemento input definimos un botón para el envío de datos al servidor. Debemos inicializar la propiedad type con el valor submit, con esto ya tenemos un botón para el envío de datos.

Prueba de formulario

Ingrese su nombre:






EJEMPLO La propiedad value almacena la etiqueta que debe mostrar el botón.

Prueba de formulario

Ingrese su nombre:






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 enviarán por el método get • name="nombre" --> le asigna un nombre al elemento que luego puede ser usado en scripts PHP.

EJERCICIO CALIFICADO



Formulario

Nombre:
Contraseña:

Al apretar el botón "Enviar" usted mandará todos los datos a una página llamada "datos.php" la cual procesará toda la información

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 enviarán por el método 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

EJERCICIO CALIFICADO



Formulario

Elija un color
Rojo
Azul
Verde




ETIQUETAS DE UN FORMULARIO 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 enviarán por el método 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

EJERCICIO CALIFICADO



Prueba de formulario

Ingrese su nombre:
Seleccione los lenguajes que conoce:


Java
C++
C
C#




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 enviarán por el método 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 botón "submit" value="Borrar" --> define el texto del botón "reset"

ETIQUETAS DE UN FORMULARIO HTML

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 enviarán por el método get

•

name="continente" --> le asigna un único nombre al menú desplegable

•

value="america" --> define el valor del elemento

EJERCICIO CALIFICADO



Formulario



Elija su pasatiempo favorito:

Otros

La etiqueta select define un menú desplegable.
El atributo disabled lo dashabilita, sin permitir su selección.

ETIQUETAS DE UN FORMULARIO 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 enviarán por el método post

•

name="eltexto" --> le asigna un nombre al elemento textarea

EJERCICIOS en PHP

VARIABLE SUPERGLOBAL











VARIABLE SUPERGLOBAL











VARIABLE SUPERGLOBAL











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:

Los distintos item que tendrá el select, se los indican con las marcas: sumar restar El texto que va fuera de las marcas es el que se muestra en el formulario, y la propiedad value es la que se envía al formulario y se debe consultar en la página php que procesa el formulario.

EJERCICIO 06

…EJERCICIO 06

…EJERCICIO 06

ESTRUCTURA GENERAL DE UNA EXPRESIÓN SWITCH 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 EXPRESIÓN SWITCH



…ESTRUCTURA GENERAL DE UNA EXPRESIÓN SWITCH

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.'; } ?>