Formulario Web

Embed Size (px)

DESCRIPTION

Formularios Web

Text of Formulario Web

  • Formularios HTML y PHP para 1 Bachillerato TIC pgina 1/14

    Formularios Web con HTML y PHP

    ndice de contenido 1 Intro..................................................................................................................................................1 2 Elemento de un formulario HTML.....................................................................................2 3 Campos de formularios HTML (controles)......................................................................................2 4 Campos de texto...............................................................................................................................2 5 Botones de envo..............................................................................................................................2

    5.1 Ejemplo1. Mi color preferido...................................................................................................3 5.2 Ejercicio1. Mis favoritos...........................................................................................................6

    6 Casillas de verificacin.....................................................................................................................6 6.1 Ejemplo2. Casillas de verificacin. has ido a...?.....................................................................7 6.2 Ejercicio2. Ingredientes extras de una Pizza............................................................................8

    7 Botones de opcin............................................................................................................................9 7.1 Ejemplo3. Botones de Opcin. Test aritmtica.......................................................................10 7.2 Ejemplo3 bis. Test aritmtica Corregido. IF...ELSE...............................................................12 7.3 Ejercicio3. Botones de opcin. Examen C. Naturales............................................................13

    8 Trabajo Final: Men del Da...........................................................................................................14 9 OUTRO..........................................................................................................................................14

    1 IntroExisten dos formas bsicas de interactuar con una pgina web, hacer clic sobre un enlace o

    enviar datos en un formulario.

    Los formularios se usan en la navegacin habitual por pginas web (i.e. Cuando entramos en nuestro correo web, iniciamos sesin en youtube para subir un vdeo, buscamos una pgina con google, o nos identificamos en facebook para acceder a nuestra red social,... siempre estamos enviando datos mediante los campos de un formulario.

    Los formularios de una pgina web se disean como el resto de la pgina, empleando HTML (Lenguaje de Etiquetas de HiperTexto).

    I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09

  • Formularios HTML y PHP para 1 Bachillerato TIC pgina 2/14

    2 Elemento de un formulario HTMLPara crear un formulario basta insertar etiquetas de apertura y cierre en tu pgina

    WEB. Todos los controles (campos de texto, casillas de verificacin, botones de opcin o botn de enviar) que aadas entre las etiquetas y formarn parte del formulario que se enva al servidor WEB.

    El elemento cuenta con muchos atributos pero basta con utilizar 2 de ellos: action y method.

    Atributo action: indica al servidor a qu pgina debe desplazarse cuando el usuario pulsa el botn de envo del formulario. Es decir, indica qu pgina recibir la informacin del formulario. Por supuesto, esta pgina debe existir en el servidor Web.

    Atributo method: controla la forma en que se enva la informacin al servidor y existen dos mtodos, GET y POST. Con GET se enva la informacin introducida por el usuario adjuntndola a la URL despus del signo ?. Con POST se envan los valores introducidos en el formulario en el cuerpo de la solicitud HTTP.

    El cdigo siguiente crea un formulario WEB ... que an no contiene ningn campo. Cuando aadamos los campos normales en un formulario, el archivo respuesta1.php recibir mediante el mtodo POST los valores introducidos en el formulario.

    3 Campos de formularios HTML (controles)Varios son los controles que puedes utilizar para pedir informacin en un formulario. Para

    todos los ejemplos necesitaremos dos pginas Web. La primera es un formulario donde el usuario introduce la informacin solicitada en campos y la segunda recupera los valores del formulario para tratarlos posteriormente (i.e. mostralos en Tablas). Comenzaremos con los controles de formulario HTML ms comunes:

    4 Campos de textoTambin llamados cuadros de texto, son probablemente los controles ms conocidos en

    cualquier formulario. Se crean por medio del elemento y estableciendo el atributo type en text .

    En este ejemplo solicitamos la direccin de trabajo al usuario. Estos campos de texto aceptan frases de texto completas, lo que les hace muy interesantes para preguntas abiertas (i.e. Direccin donde trabajas).

    5 Botones de envoLos botones de envo se usan siempre en todos los formularios. Son necesarios para enviar la

    informacin del formulario a la pgina web receptora. Se crean por medio del elemento y estableciendo el atributo type en submit . El texto que aparece sobre el botn se indica mediante el atributo value.

    I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09

  • Formularios HTML y PHP para 1 Bachillerato TIC pgina 3/14

    Este botn se mostrara como se ve a continuacin:

    5.1 Ejemplo1. Mi color preferidoVamos a crear un formulario que te pregunte por tu color preferido y luego lo muestre en

    pantalla. Recuerda, necesitamos 2 pginas web, una para el formulario y otra para mostrar el valor introducido. Para ello abre tu editor de cdigo favorito (Kompozer, DevPHP, Bluefish,...) e introduce el siguiente cdigo:

    Ejemplo 1. Formulario: Mi Color Favorito

    Cul es tu color favorito?

    Gurdalo en tu carpeta raz como ejemplo1.html y cierra el archivo.Cuando abrimos el archivo con un navegador web vemos el formulario:

    An no funciona el botn de enviar ya que no hemos creado la segunda pgina web, la que recibe los valores introducidos en el formulario.

    Como se ha indicado en el formulario sabemos que la segunda pgina se llamar respuesta1.php, evidentemente siempre podemos cambiar el nombre del archivo en el atributo action.

    Cmo podemos recuperar la informacin del color introducido en el formulario? Slo con HTML NO BASTA, necesitamos escribir guiones con PHP, un lenguaje de programacin que trabaja del lado del servidor de pginas web.

    En las prximas lneas vamos a abrir una pequea ventana al lenguaje PHP, si tienes dudas de mi explicacin, hay un tutorial de PHP4 divertido y muy, muy claro que he encontrado en http://www.rinconastur.net/ dentro de la seccin de informtica.

    I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09

  • Formularios HTML y PHP para 1 Bachillerato TIC pgina 4/14

    Seguimos con PHP, estos guiones o lneas de cdigo se introducirn dentro del cdigo HTML de la pgina web, y para distinguirlas irn siempre delimitadas por los caracteres ''.

    El cdigo de nuestra pgina es el siguiente, introdcelo en tu editor web y gurdalo como respuesta1.php

    Tu color favorito es:

    Que hace nuestro guin PHP?

  • Formularios HTML y PHP para 1 Bachillerato TIC pgina 5/14

    IMPORTANTE: Bien, si te fijas el archivo respuesta1.php tiene extensin PHP estos archivos slo se pueden interpretar en el servidor de pginas web. Bien pero, Quin tiene un servidor de pginas web en su PC?...

    Hoy en da esto es fcil y gratuito. El servidor web ms usado en el mundo es APACHE, tanto en Windows como en Linux. En Windows existen varias suites gratuitas que instalan APACHE con un slo click en tu PC, junto con servidores de bases de datos MySQL, servidor de Correo Mercury y servidores FTP Filezilla.

    Una de las suites ms conocidas es XAMPP, si lo haces con ella todas las pginas web deben guardarse en la carpeta c:\XAMPP\htdocs\, para que nos las sirva el servidor APACHE. En Linux, y concretamente en la distribucin Ubuntu (MAX es Ubuntu), tenemos ya instalado un servidor APACHE, y la carpeta donde debemos guardar las pginas web es /var/www/.MS IMPORTANTE: nosotros siempre vamos a copiar todas nuestras pginas web, sean HTML o PHP al ordenador del profesor que cuenta con un servidor APACHE, a una carpeta compartida que encontrareis en profesor:/miweb/PC1/ . APACHE servir las pginas web que haya en esta direccin ya que esta direccin est enlazada con /var/www/ .AN MS IMPORTANTE: Y si quiero ver de una vez mi formulario en accin...Que HAGGOOO? Bien, abre el navegador web (i.e. Mozilla Firefox) en tu PC y en el campo de texto de las direcciones URL introduce la direccin donde est el formulario: i.e. direccin_IP_local_PC_profesor/miweb/PC1/, donde direccin IP local del profesor ser del tipo 192.168.1.116 u otra similar, y vers las pginas web que el servidor APACHE puede servirte desde esa direccin. Haz click en el ejemplo1.html, vers el formulario que has diseado. Rellena la respuesta y envalo. Vers tu color favorito escrito en la pgina respuesta1.php .

    I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09

    ejemplo1.html respuesta1.php

  • Formularios HTML y PHP para 1 Bachillerato TIC pgina 6/14

    5.2 Ejercicio1. Mis favoritosTe propongo un ejercicio sin mostrarte la solucin, as comprobars si has aprendido bien

    cmo crear tu primer formulario. nimo...

    Tarea: Crea un formulario c