Formularios HTML - Universidad Nacional de Quilmes
Anuncio
Formularios HTML Elementos de Programación y Lógica Universidad Nacional de Quilmes Formularios HTML es un lenguaje de marcado cuyo propósito principal consiste en estructurar los contenidos de los documentos y páginas web. Sin embargo, HTML también incluye elementos para crear aplicaciones web. El estándar HTML/XHTML permite crear formularios para que los usuarios interactúen con las aplicaciones web. El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones fijos o de todas ellas combinadas. Formularios ¿Cómo funcionan? Los datos son enviados a un servidor http (web) que procesará y devolverá una respuesta (o no). Pueden utilizarse también para enviar su contenido a una dirección de correo electrónico, o que simplemente abran otra página. Si el formulario se diseña para abrir una página o para ser enviado por e-mail, todo se reduce a escribir HTML, pero la cosa se complica cuando se trata de transacciones de datos que hay que guardar en un servidor (comercio electrónico). En este caso, en el servidor tiene que haber un programa especial, creado específicamente para ese formulario, que reciba los datos y sepa qué hacer con ellos, procesarlos y confeccionar la respuesta que remitirá al navegador. A esa respuesta se le denomina documento virtual ya que esa página no está escrita en ninguna parte; es generada, enviada y destruida. Formularios ¿Cómo funcionan? A los programas que hacen de puente entre el formulario y el servidor, se les llama programas CGI (Common Gateway Interface) y no hay que confundirlos con las páginas dinámicas escritas en ASP o PHP, aunque se parecen mucho. Los programas CGI pueden estar escritos en cualquier lenguaje de programación que sea soportado por el sistema operativo del servidor, y pueden estar diseñados para cualquier función: desde una simple captura de datos que serán guardados en un fichero, hasta la más sofisticada consulta a una base de datos. Formularios ¿Cómo funcionan? Definición Los formularios más sencillos se pueden crear utilizando solamente dos etiquetas: <form> y <input>. Definición El código HTML necesario para definir el formulario anterior se muestra a continuación: <html> <head><title>Ejemplo de formulario sencillo</title></head> <body> <h3>Formulario muy sencillo</h3> <form action="http://www.librosweb.es/maneja_formulario.php" method="post"> Escribe tu nombre: <input type="text" name="nombre" value="" /> <br/> <input type="submit" value="Enviar" /> </form> </body> </html> <form> Atributos ● action = "url" - Indica la URL que se encarga de procesar los datos del formulario ● method = "POST o GET" - Método HTTP empleado al enviar el formulario ● enctype = "application/x-www-form-urlencoded o multipart/form-data" - Tipo de codificación empleada al enviar el formulario al servidor (sólo se indica de forma explícita en los formularios que permiten adjuntar archivos) <form> Atributos ● La mayoría de formularios utilizan sólo los atributos action y method. El atributo action indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios. Esta aplicación también se encarga de generar la respuesta que muestra el navegador. ● El atributo method establece la forma en la que se envian los datos del formulario al servidor. Este atributo hace referencia al método HTTP, por lo que no es algo propio de HTML. Los dos valores que se utilizan en los formularios son GET y POST. De esta forma, casi todos los formularios incluyen el atributo method="get" o el atributo method="post". Elementos Elementos de formulario como botones y cuadros de texto también se denominan "campos de formulario" y "controles de formulario". La mayoría de controles se crean con la etiqueta <input> Dicha etiqueta posee una serie de propiedades. Entre las más importantes se encuentran: type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button" - Indica el tipo de control que se incluye en el formulario name = "texto" - Asigna un nombre al control (es imprescindible para que el servidor pueda procesar el formulario) value = "texto" - Valor inicial del control Componentes Cuadro de Texto: Se trata del elemento más utilizado en los formularios: Nombre <input type="text" name="nombre" value="" /> El atributo name es el más importante en los campos del formulario. De hecho, si un campo no incluye el atributo name, sus datos no se envían al servidor. El valor que se indica en el atributo name es el nombre que utiliza la aplicación del servidor para obtener el valor de este campo de formulario.Cuando el usuario pulsa el botón de envío del formulario, el navegador envía los datos a una aplicación del servidor para que procese la información y genere una respuesta adecuada. En el servidor, la aplicación que procesa los datos debe obtener en primer lugar toda la información introducida por el usuario. Para ello, utiliza el valor del atributo name para obtener los datos de cada control del formulario. Componentes Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes. Puestos de trabajo buscados <br/> <input name="puesto_directivo" type="checkbox" value="direccion"/> Dirección <input name="puesto_tecnico" type="checkbox" value="tecnico"/> Técnico <input name="puesto_empleado" type="checkbox" value="empleado"/> Empleado Componentes Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba. Sexo <br/> <input type="radio" name="sexo" value="hombre" checked="checked" /> Hombre <input type="radio" name="sexo" value="mujer" /> Mujer Componentes El elemento select es un cuadro de selección. Este elemento HTML nos permite seleccionar una opción entre un conjunto. <select id="so" name="so"> <option value="" selected="selected">- selecciona -</option> <option value="windows">Windows</option> <option value="mac">Mac</option> <option value="linux">Linux</option> <option value="otro">Otro</option> </select> Ejercicio A escribir el código para crear el siguiente formulario <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Información sobre el producto</title> </head> <body> <h3>Información sobre el producto</h3> <form action="/php/insertar_subasta.php" method="post" enctype="multipart/form-data"> <legend>Datos básicos</legend> <label for="nombre">Nombre</label> <br/> <input type="text" name="nombre" id="nombre" size="50" maxlength="250" /> <br/><br/> <label for="descripcion">Descripción</label> <br/> <textarea name="descripcion" id="descripcion" cols="40" rows="5"></textarea> <br/><br/> Foto <input type="file" name="foto" /> <br/><br/> <input name="contador" type="checkbox" value="si" /> Añadir contador de visitas <legend>Datos económicos</legend> <label for="precio">Precio</label> <input type="text" size="5" id="precio" name="precio" /> &euro; <label for="impuestos">Impuestos</label> <select id="impuestos" name="impuestos"> <option value="4">4%</option> <option value="7">7%</option> <option value="16">16%</option> <option value="25">25%</option> </select> <label>Promoción</label> <br/> <input type="radio" name="promocion" value="ninguno" checked="checked" /> Ninguno <br/> <input type="radio" name="promocion" value="portes" /> Transporte gratuito <br/> <input type="radio" name="promocion" value="descuento" /> Descuento 5% </form> </body> </html> Guía de ejercicios prácticos Pueden resolver desde el ejercicio 15 hasta el 19 de la guía N° 1 inclusive
