INSTITUTO TECNOLÓGICO SUPERIOR DE LA COSTA CHICA Ingeniería en Tecnologías de la Información y Comunicación DOCENTE: Lic. Moisés Carmona Domínguez MATERIA: Programación web UNIDAD II: Equipo: Alfonso Ayona Campos José Antonio Leal García Bernardo Barrera Prudente • Un formulario es un documento, ya sea físico o digital diseñado para que el usuario introduzca datos estructurados en las zonas correspondientes, para ser almacenados y procesados posteriormente. • Un formulario web es un tipo de formulario que es presentado en un navegador y puede ser rellenado a través de una red como internet. Generalmente cuando se ingresan los datos, se envían a un servidor web para ser procesados. • Los formularios se usan en la navegación habitual por páginas web (i.e. Cuando entramos en nuestro correo web, iniciamos sesión en YouTube para subir un vídeo, buscamos una página 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 página web se diseñan como el resto de la página, empleando HTML (Lenguaje de Etiquetas de HiperTexto). • Además de servir como plantillas para nueva información, los formularios web también pueden ser usados para consultar y mostrar información existente. • En un documento HTML el elemento "form" permite crear formularios. En ellos, los usuarios pueden introducir datos (información) para ser enviados y procesados en un servidor. • • • Los 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>, por lo que su definición formal y su lista de atributos es muy extensa: Etiqueta <input> ● Atributos propios ● ● type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button - (Indica el tipo de control que se incluye en el formulario) *El atributo type diferencia a cada uno de los diez controles que se pueden crear con la etiqueta <input>. * name = "texto" - Asigna un nombre al control (es imprescindible para que el servidor pueda procesar el formulario) value = "texto" - Valor inicial del control ● ● ● ... ● ● ● ● size = "unidad de medida" - Tamaño inicial del control (para los campos de texto y de password se refiere al número de caracteres, en el resto de controles se refiere a su tamaño en píxel) maxlength = "número" - Máximo número de caracteres para los controles de texto y de password checked = "checked" - Para los controles checkbox y radiobutton permite indicar qué opción aparece preseleccionada disabled = "disabled" - El control aparece deshabilitado y su valor no se envía al servidor junto con el resto de datos readonly = "readonly" - El contenido del control no se puede modificar src = "url" - Para el control que permite crear botones con imágenes, indica la URL de la imagen que se emplea como botón de formulario alt = "texto" - Descripción del control • se muestra un cuadro de texto vacío en el que el usuario puede escribir cualquier texto • La diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles. • 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. • Los radiobutton son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: 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. • La mayoría de formularios dispone de un botón para enviar al servidor los datos introducidos por el usuario: • Aunque su uso era muy popular hace unos años, la mayoría de formularios modernos ya no utilizan este tipo de botón. Se trata de un botón especial que borra todos los datos introducidos por el usuario y devuelve el formulario a su estado original: • Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad. • Los campos ocultos se emplean para añadir información oculta en el formulario: • Algunos formularios complejos necesitan botones más avanzados que los de enviar datos (type="submit") y resetear el formulario (type="reset"). Por ese motivo, el estándar HTML/XHTML define un botón de tipo genérico: • El aspecto de los botones de formulario se puede personalizar por completo, ya que incluso es posible utilizar una imagen como botón: • Como se puede observar, las etiquetas <form> y </form> delimitan el formulario, el cual contiene en este ejemplo tres elementos "input" para que el usuario pueda: •Introducir su nombre (dato de tipo texto, type="text"). •Introducir su edad (dato de tipo número, type="number"). •Enviar dichos datos, type="submit". Por otra parte, véase que al atributo value se le ha asignado el texto que se muestra en el botón de envío, "Enviar datos". Action ● El atributo action indica la ubicación del programa que procesará la información enviada por el navegador, cuando el formulario sea despachado. Este programa está escrito en cualquier lenguaje del lado servidor y se supone que esté preparado para recibir y procesar los datos del formulario. Action Si queremos que el formulario se envíe a un correo, la acción quedaría escrita de la siguiente manera: <form action=mailto:[email protected]…></form>. Este tipo de envíos se utilizarían para casos de formularios de contacto, de sugerencias, etc. method ● Indica cómo se enviarán las respuestas ● Mediante este atributo le indicamos al formulario la forma en la que el formulario será enviado. method Existen dos métodos con los que el navegador puede enviar información al servidor: Método HTTP GET. La Información se envía de forma visible Método HTTP POST. La Información se envía de forma no visible http Get El método GET envía la información codificada del usuario en el header del HTTP request, directamente en la URL. La página web y la información codificada se separan por un interrogante ?: ● ● ● ● El método GET envía la información en la propia URL, estando limitada a 2000 caracteres. La información es visible por lo que con este método nunca se envía información sensible. No se pueden enviar datos binarios (archivos, imágenes...). En PHP los datos se administran con el array asociativo $_GET. http Get Cuando un usuario rellena un formulario en una página web los datos hay que enviarlos de alguna manera usando el método POST o usando el método GET. <form action="http://www.facebook.com" method ="get"> En el ejemplo la acción que se ejecutará cuando el usuario pulse el botón “Enviar” (submit) será el envío de los datos a la url especificada usando el método get. http Get Este formulario consta de varios campos que al usuario se le solicitan como Nombre, Apellidos, Email. La diferencia entre los métodos get y post radica en la forma de enviar los datos a la página cuando se pulsa el botón “Enviar”. Mientras que el método GET envía los datos usando la URL, el método POST los envía de forma que no podemos verlos (en un segundo plano u "ocultos" al usuario). Un resultado usando el método GET, a modo de ejemplo, podría ser el siguiente: https://www.facebook.com/?nombre=luis&ape llido=flores&email=enryutddxd%40gmail.com &sexo=Hombre http post Con el método HTTP POST también se codifica la información, pero ésta se envía a través del body del HTTP Request, por lo que no aparece en la URL. El método POST no tiene límite de cantidad de información a enviar. La información proporcionada no es visible, por lo que se puede enviar información sensible. Se puede usar para enviar texto normal así como datos binarios (archivos, imágenes...). PHP proporciona el array asociativo $_POST para acceder a la información enviada. http post POST consiste en datos "ocultos" (porque el cliente no los ve) enviados por un formulario cuyo método de envío es post. Es adecuado para formularios. Los datos no son visibles. La ventaja de usar POST es que estos datos no son visibles al usuario de la web. En el caso de usar get, el propio usuario podría modificar la URL escribiendo diferentes parámetros a los reales en su navegador, dando lugar a que la información tratada no sea la prevista. Se puede comprobar que la información no se muestra en la url.