Formulario Web

  • Published on
    25-Jan-2016

  • View
    214

  • Download
    0

Embed Size (px)

DESCRIPTION

Formularios Web

Transcript

<ul><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 1/14</p><p>Formularios Web con HTML y PHP </p><p>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</p><p> 5.1 Ejemplo1. Mi color preferido...................................................................................................3 5.2 Ejercicio1. Mis favoritos...........................................................................................................6</p><p> 6 Casillas de verificacin.....................................................................................................................6 6.1 Ejemplo2. Casillas de verificacin. has ido a...?.....................................................................7 6.2 Ejercicio2. Ingredientes extras de una Pizza............................................................................8</p><p> 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</p><p> 8 Trabajo Final: Men del Da...........................................................................................................14 9 OUTRO..........................................................................................................................................14</p><p> 1 IntroExisten dos formas bsicas de interactuar con una pgina web, hacer clic sobre un enlace o </p><p>enviar datos en un formulario.</p><p>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.</p><p>Los formularios de una pgina web se disean como el resto de la pgina, empleando HTML (Lenguaje de Etiquetas de HiperTexto).</p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 2/14</p><p> 2 Elemento de un formulario HTMLPara crear un formulario basta insertar etiquetas de apertura y cierre en tu pgina </p><p>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.</p><p>El elemento cuenta con muchos atributos pero basta con utilizar 2 de ellos: action y method.</p><p>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.</p><p>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.</p><p>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.</p><p> 3 Campos de formularios HTML (controles)Varios son los controles que puedes utilizar para pedir informacin en un formulario. Para </p><p>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:</p><p> 4 Campos de textoTambin llamados cuadros de texto, son probablemente los controles ms conocidos en </p><p>cualquier formulario. Se crean por medio del elemento y estableciendo el atributo type en text .</p><p>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).</p><p> 5 Botones de envoLos botones de envo se usan siempre en todos los formularios. Son necesarios para enviar la </p><p>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.</p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 3/14</p><p>Este botn se mostrara como se ve a continuacin: </p><p> 5.1 Ejemplo1. Mi color preferidoVamos a crear un formulario que te pregunte por tu color preferido y luego lo muestre en </p><p>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:</p><p>Ejemplo 1. Formulario: Mi Color Favorito</p><p>Cul es tu color favorito?</p><p>Gurdalo en tu carpeta raz como ejemplo1.html y cierra el archivo.Cuando abrimos el archivo con un navegador web vemos el formulario:</p><p>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. </p><p>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. </p><p>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. </p><p>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.</p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 4/14</p><p>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 ''.</p><p>El cdigo de nuestra pgina es el siguiente, introdcelo en tu editor web y gurdalo como respuesta1.php </p><p>Tu color favorito es: </p><p>Que hace nuestro guin PHP? </p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 5/14</p><p>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?...</p><p>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.</p><p>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 .</p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p><p>ejemplo1.html respuesta1.php</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 6/14</p><p> 5.2 Ejercicio1. Mis favoritosTe propongo un ejercicio sin mostrarte la solucin, as comprobars si has aprendido bien </p><p>cmo crear tu primer formulario. nimo...</p><p>Tarea: Crea un formulario con los campos de texto que ves en la captura y luego crea una sencilla pgina para mostrar los valores introducidos.</p><p>Si has hecho bien el ejercicio1 ensaselo al profesor y continua con el tutorial.</p><p> 6 Casillas de verificacinEs una sola casilla que se puede marcar o n, segn lo que seleccionemos. Para crearla el </p><p>elemento debe tener como atributo type=checkbox, adems si queremos que aparezca de entrada marcada la casilla lo indicaremos con checked. Como slo podemos marcar o desmarcar la casilla es ideal para respuestas del tipo SI/NO. Para que pase alguna informacin ms til lo indicaremos en el atributo value (i.e. value=Museo del Prado).</p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p><p>ejercicio1.html </p><p>ejecicio1.php</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 7/14</p><p> 6.1 Ejemplo2. Casillas de verificacin. has ido a...?Vamos a crear un formulario que pregunte si has estado en un par de museos...</p><p>Para ello el cdigo HTML es:</p><p>Nombre: y apellidos: </p><p>alguna vez has ido....</p><p>al museo del Prado? </p><p>al Oceanografic de Valencia? </p><p>Guarda el archivo como ejemplo2.html y a continuacin vamos a crear la pgina donde se presentar la informacin introducida en el formulario.</p><p>El archivo ejemplo2.php recoger las respuestas introducidas en las casillas y mostrar sus valores (value=Museo del Prado y value=Oceanogrfico de Valencia). Tambin mostrar el nombre y apellidos separados por un espacio entre ellos con esta lnea:</p><p>Fjate bien que despus del nombre se aade entre comillas un espacio y luego se aade el apellido. Y fjate que se usa el punto . para concatenar cadenas en la instruccin echo. </p><p>Esto significa que se mostrarn juntos en la pgina web como una sola lnea los tres bloques </p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p><p>ejemplo2.html</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 8/14</p><p>separados por ., $_GET['nombre'] seguido de un espacio y luego $_GET['apellidos']El cdigo completo se muestra a continuacin, introdcelo en tu editor web y gurdalo </p><p>como ejemplo2.php .</p><p>ha ido a: </p><p>Se debera ver en un navegador como en la captura siguiente:</p><p>Si todo ha ido bien ests preparado para hacer el ejercicio2...</p><p> 6.2 Ejercicio2. Ingredientes extras de una PizzaTarea: Crea un formulario que pregunte si el cliente de una pizzera quiere o n ciertos </p><p>ingredientes extras. Fjate en la siguiente captura:</p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p><p>ejemplo2.php</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 9/14</p><p>Cuando lo termines y funcione, mstraselo atu profesor...</p><p> 7 Botones de opcinConsiste en un crculo que se puede seleccionar o no. Normalmente se usan varios botones </p><p>juntos y SLO se puede seleccionar uno de ellos. Es ideal para las respuestas tipo TEST con una sla respuesta posible de entre varias opciones. Los botones de opcin se crean con el elemento y su atributo type=radio. Es importante que todos los botones conectados en el mismo grupo tengan el mismo nombre (atributo name) . Adems, si queremos que uno de los botones aparezca de entrada como marcado se usa el atributo checked. La informacin que se pasa a la segunda pgina se puede controlar con el atributo value=valor que quiera enviar al seleccionar </p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p><p>ejercicio2.html</p><p>ejercicio2.php</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 10/14</p><p>este botn, observa el siguiente ejemplo.</p><p> 7.1 Ejemplo3. Botones de Opcin. Test aritmticaVamos a crear un formulario con una pregunta tipo test sobre aritmtica. Tendr 4 </p><p>respuestas posibles y slo se podr elegir una de ellas. Se mostrarn siempre por defecto la primera opcin como marcada(necesitaremos usar el atributo checked). En la siguiente captura se muestra el formulario: </p><p>Introduce este cdigo HTML en tu pgina Web y gurdalo en tu carpeta raz como ejemplo3.html:</p><p>Examen tipo test de aritmetica</p><p>Nombre: Apellidos: </p><p>1. Cuanto es 3+(3x6) ?</p><p>a) 17 </p><p>b) 21 </p><p>I.E.S. Clara Campoamor de Mstoles_ Dept. Tecnologa. Prof. Javier Sanz Leyva 08/12/09</p><p>ejemplo3.html</p></li><li><p>Formularios HTML y PHP para 1 Bachillerato TIC pgina 11/14</p><p>c) 16 </p><p>d) Ninguna de las anteriores respuestas</p><p>Explicacin del cdigo.</p><p>Como ya tienes cierto conocimiento en el manejo de formularios ir a lo ms importante: </p><p>1. Al crear el formulario se muestra el atributo action con el nombre del archivo (ejemplo3.php) donde se enviar la informacin del formulario.</p><p>2. Fjate que todos los botones de opcin tienen el mismo atributo nombre (name="aritmetica") de esta forma el formulario reconoce que los botones pertenecen al mismo grupo y que slo uno de ellos puede ser seleccionado a la vez.</p><p>3. En cada botn se define el atributo value igual al valor que se mostrar en pantalla (17, 21,etc) al enviar la informacin del formulario .</p><p>IMPORTANTE: Si hiciramos un examen tipo test con varias preguntas slo habra que nombrar cada grupo de botones como name=respuesta1, name=respuesta2, y as sucesivamente.</p><p>Ahora vamos con la pgina llamada ejemplo3.phpque recoge la informacin introducida en el formulario. La captura siguiente te la muestra. </p><p>El cdigo siguiente consigue recuperar la informacin del formulario y mostrarla en pantalla. Introdcelo en tu editor web y gurdalo en tu carpteta raz como ejem...</p></li></ul>