FACULTAD DE INGENIERIA DE SISTEMAS, CMPUTO Y TELECOMUNICACIONES

CLASE N 2

FORMULARIOS en HTML y FRAMES

Mg. Marcelino Estrada Aro mestradaa@uigv.edu.pe

AGENDA

Introduccin a PHP

Formularios HTML y sus elementos

El mecanismo bsico de interaccin entre el usuario y un sitio web est dado por el uso de formularios html.

Declaracin de Variable
Las Variables en PHP no necesitan ser declaradas, podemos decir que en PHP las variables son dbilmente tipadas. Toda variable debe tener un nombre al que se le debe anteponer el smbolo $, adems el nombre debe de empezar con una letra. Su mbito es global a nivel del archivo actual y de los archivos incluidos

Estructura de Control: IF
if (Condicion 1) { Instruccin 1; Instruccin 2; } else if (Condicion 2) { Instruccin A; Instruccin B; } else { Instruccin X; Instruccin Z; } Generar un valor aleatorio entre 1 y 100. Luego mostrar si tiene 1,2 o 3 dgitos.

$valor=rand(1,100);
Para obtener la fecha del servidor web debemos llamar a la funcin date y requerir slo el da:

$dia=date("d");
si queremos la fecha completa: $fecha=date("Y:m:d")

Ejercicio: date ()

Ejercicio: IF

Mostrar en la pgina los nmeros del 1 al 100:

ESTRUCTURAS REPETITIVAS EN PHP

While y Do-While

while (condicin) {

do {

[Instrucciones];
}

[Instrucciones];
} while (condicin);
la condicin se verifica luego de ejecutarse el bloque repetitivo.

Resolver usando WHILE

Generar un valor aleatorio entre 1 y 100, luego imprimir en la pgina desde 1 hasta el valor generado (de uno en uno):

Ej01. Cargar en dos variables tu nombre completo y tu edad e insertarlos en la frase Mi nombre es _____ y tengo ____ aos

Ej02. Calcular el rea de un tringulo de 2cm. de base y 8cm. de altura y mostrarlo por pantalla.

Ej03. Escribir un programa en PHP que permita calcular el salario neto de un empleado luego de aplicarle un impuesto al salario bruto. (ej. Salario bruto = 4000, Impuesto = 20)

Ej04. Un pintor necesita 0,1 litros de pintura por metro cuadrado. Tiene que pintar una pared de 10m. x 4m. Cada lata de pintura de 1 litro vale $ 42. Hacer un programa en PHP que calcule cunto dinero debe gastar el pintor para pintar la pared.

Ej07. Dado un nmero entero positivo entre 1 y 7 visualice a que da de la semana corresponde.

Ej08. Presentar una tabla de multiplicar del nmero 5

Ej10. Ver los tipos de datos de las variables

date(j) date(l) date(w)

Obtiene el da del mes Ejemplo: 1,2,3,..., 31 Obtiene el nombre del da en INGLES Ejemplo: Sunday, Monday,..., Saturday Obtiene el nmero del da de la semana Ejemplo: 0, 1,..., 6. El nmero 0 es igual a Domingo Obtiene el nombre del mes en INGLES Ejemplo: January, February,..., December Obtiene el nmero del mes Ejemplo: 1,2,3,....., 12 Obtiene el nmero del mes con un cero inicial Ejemplo: 01,02,03,...,12 Obtiene el ao con cuatro dgitos Ejemplo: 2010, 2011, 2012, 2013 Obtiene el ao con dos dgitos Ejemplo: 10, 11, 12, 13 Obtiene la hora en formato de 12 horas Ejemplo: 1, 2, .... 11, 12 Obtiene la hora en formato de 12 horas con un cero inicial Ejemplo: 01, 02, .... 11, 12 Obtiene la hora en formato de 24 horas Ejemplo: 0, 2, .... 22,23 Obtiene la hora en formato de 24 horas con un cero inicial Ejemplo: 00, 01, .... 23, 24 Obtiene los minutos Ejemplo: 00,01,02,...., 59 Obtiene los segundos Ejemplo: 00,01,02,...., 59 Obtiene el meridiano en minsculas Ejemplo: am / pm Obtiene el meridiano en maysculas Ejemplo: AM / PM

date(F)

date(n) date(m) date(Y) date(y) date(G) date(g) date(H) date(h) date(i) date(s) date(a) date(A)

FORMULARIOS

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

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"];

MTODOS DE ENVO DE UN FORMULARIO HTML

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

FORMULARIOS

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.

CONTROLES DE UN FORMULARIO HTML

Los usuarios interaccionan con los formularios a travs de las llamados controles.
Botones (buttons) Casillas de verificacin (checkboxes) Radio botones (radio buttons) Menes (menus)

Entrada de texto (text input)

Seleccin de ficheros (file select) Controles ocultos (hidden controls) Controles tipo objeto (object controls)

CONTROLES DE UN FORMULARIO HTML

CMO FUNCIONA UN FORMULARIO HTML

1. 2. 3.

A visitor visits a web page that contains a form. The web browser displays the HTML form. The visitor fills in the form and submits

4.
5. 6.

The browser sends the submitted form data to the web server
A form processor script running on the web server processes the form data A response page is sent back to the browser.

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:

EJEMPLO

EJEMPLO
La propiedad action se inicializa con el nombre de la pgina que procesar los datos en el 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
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 <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
Ahora veamos el cuadro de texto donde se ingresa el nombre:

<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
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. <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
La propiedad value almacena la etiqueta que debe mostrar el botn.

<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>

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

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>

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

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>

EJERCICIO CALIFICADO

<html> <head> <title>Formulario</title> </head> <body> <form action="hobbie.php" method="get"> Elija su pasatiempo favorito: <select name="pasa" disabled> <option <option <option <option <option <option <option value="tv">TV</option> value="libros">Libros</option> value="musica">Msica</option> value="cine">Cine</option> value="teatro">Teatro</option> value="caminar">Caminar</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

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

VARIABLE SUPERGLOBAL

VARIABLE SUPERGLOBAL

VARIABLE SUPERGLOBAL

Ej09

 Ej09

Ej10

Ej10

Ej11

 Ej11

 Ej11

 Ej11

 Ej11

Ej12

Ejemplo 12

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

EJERCICIO 07
Para disponer un select con mltiples selecciones:

<select name="select1[]" size="4" multiple>

Adems de agregar la palabra clave multiple el nombre del control debe tener los caracteres [] (esto indica que se debe crear un vector) Las opciones que queremos que aparezcan seleccionadas se disponen de la siguiente manera:

<option value="multiplicar" selected>multiplicar</option>

y las que no queremos que aparezcan inicialmente seleccionadas:

EJERCICIO 01

function Nombre_Funcion (parametro1, parametro2, ... parmetro n) { Instrucciones; <return valor> }

EJERCICIO 01

EJERCICIO 01
Al cargarse la pgina, se visualiza el formulario para el ingreso de los dos valores, ya que al no haber sido presionado el Botn, la condicin del if en el programa principal, es falsa.

EJERCICIO 02

EJERCICIO 02

EJERCICIO 02

EJERCICIO 03

EJERCICIO 03

EJERCICIO 03

EJERCICIO 04

EJERCICIO 04

EJERCICIO 04

EJERCICIO 05

Isset ( ) Devuelve TRUE si var existe y tiene un valor distinto de NULL, FALSE de lo contrario.

EJERCICIO 05

EJERCICIO 05

EJERCICIO 06
Isset ( ) Devuelve TRUE si var existe y tiene un valor distinto de NULL, FALSE de lo contrario.

EJERCICIO 06

EJERCICIO 06

EJERCICIO 07
Para disponer un select se utiliza la marca:

<select name="select1">
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 07

EJERCICIO 07

EJERCICIO 07

USANDO UN SOLO FORMULARIO PARA EL TRATAMIENTO DE DATOS Observe que tienen el mismo nombre de archivo ejm08.ph

Otro Ejemplo