UF1304 Elaboración de plantillas y formularios

Transcripción

1 UF1304 Elaboración de plantillas y formularios Tema 1. Formularios en la construcción de páginas web Tema 2. Plantillas en la construcción de páginas web OBJETIVOS: - Confeccionar plantillas para las páginas web atendiendo a las especificaciones de diseño recibidas - Crear formularios e integrarlos en páginas web para incluir interactividad en las mismas, siguiendo unas especificaciones funcionales recibidas

2

3 tema 1 Características Elementos y atributos de formulario Controles de formulario Formularios y eventos. Criterios de accesibilidad y usabilidad en el diseño de formularios OBJETIVOS: - Crear formularios e integrarlos en páginas web - Añadir interactividad a las páginas web - Identificar las etiquetas y los atributos que se utilizan en la creación de los formularios 1. CARACTERÍSTICAS 1.1 La interactividad de las páginas web Unos de los métodos de interactuar entre el usuario y los gestores de una web son los formularios. Un formulario HTML es una agrupación de elementos cuya función principal será el envío de datos desde el visitante hacia aquellos que administran la página. En nuestra web además de información (texto), imágenes o enlaces

4 podemos necesitar recabar información. Ejemplos típicos son los formularios de sugerencias, los de registro, los de suscripción a un servicio de la página, los de petición de información. Quizá el ejemplo de formulario más sencillo a la vez que posiblemente sea también el más usado del mundo podemos verlos en la imagen siguiente: La caja donde introducimos el término de búsqueda es parte de un formulario, el más simple posible, pero al fin y al cabo un formulario. A esta caja se le denomina caja de texto y es el elemento más común. 1.2 La variabilidad de los datos de la página web Dentro de Internet tenemos múltiples páginas, y dentro de ellas infinidad de formularios desde los que nos requieren multitud de información. Pueden ser datos de registro, con nombre, apellidos, etc. Pueden ser peticiones de opiniones sobre múltiples aspectos, sobre si nos ha gustado o no la web, sobre recomendaciones, sugerencias, etc. Como ejemplo en la siguiente imagen vemos un formulario de registro, en este caso en la versión online del periódico El País. En esta página vemos un típico formulario de registro, con diferentes tipos de elementos de formulario, cajas de texto y cuadros de verificación. Tan solo se nos pide el correo electrónico y una contraseña, pg. 14 Tema 1 / Formularios en la construcción de páginas web

5 editorialcep } Atención: Captcha son las siglas en inglés de Completely Automated Public Turing Test to tell Computers and Humans Apart, o en español Prueba de Turing completamente automática y pública para diferenciar computadoras de humanos. Constituye una prueba de Turing inversa. Turing ( ) fue un matemático inglés considerado como uno de los padres de la computación. La máquina de Turing es posiblemente su contribución más conocida y consiste en un dispositivo hipotético que sirve para simular cualquier algoritmo de computador. Como curiosidad, Turing fue durante la Segunda Guerra Mundial una de las personas que consiguió descifrar los códigos secretos que utilizaba la máquina alemana Enigma. ambos por partida doble para evitar errores. También aparece un código de verificación o captcha. Consiste en mostrar al usuario una serie de caracteres, numéricos y/o alfabéticos, distorsionados para que los reproduzca en una caja de texto. Otro ejemplo es el formulario de contacto y sugerencias de la Agencia Estatal de Meteorología (AEMET). Cuando rellenamos un formulario, sobre todo cuando comunicamos datos personales e importantes, debemos fijarnos en que el protocolo de comunicación que utiliza la página sea seguro. Para ello nos aseguraremos de que la URL comience por https, como en la imagen siguiente. Este sistema es un mecanismo que asegura que la persona que rellena el formulario es una persona y no una máquina, evitando de esta manera que se hagan registros masivos de forma automática. UF1304 / Elaboración de plantillas y formularios pg. 15

6 1.3 El envío de información a servidores Desde cualquier formulario se puede enviar la información a otra página encargada de recoger los datos de este. Desde esta página posteriormente pueden almacenarse de alguna manera, habitualmente en una base de datos, para tratar posteriormente esta información. Para enviar esos datos a un servidor, utilicemos el método que sea, habrá que usar un lenguaje de programación del lado del servidor que nos permita conectar con la base de datos. Uno de los más extendidos es PHP, que tiene una fácil conexión con el gestor de base de datos MySQL. En las líneas anteriores hemos hablado de métodos de envío. Estos métodos definen la manera en la que enviamos los datos y son dos: GET y POST. - GET: usando GET tan solo podemos enviar hasta 500 bytes a la página de destino y además no permite el envío de archivos adjuntos. Otra característica importante es que los datos que se transmiten aparecen formando parte de la URL de destino. Si vemos la dirección que se forma cuando buscamos algo en Google podremos ver un claro ejemplo de formulario enviado a través de un método GET. Los datos rellenados en el formulario, en este caso las palabras de nuestra búsqueda, aparecen formando parte de la URL. pg. 16 Tema 1 / Formularios en la construcción de páginas web

7 editorialcep } - POST: cuando utilizamos es método post los datos enviados no se ven en la URL por lo que para formularios con datos personales o sensibles es una buena idea su uso. Por regla general utilizaremos post cuando queremos enviar una cantidad grande de información o bien su destino es modificar o incorporarse a una base de datos. 2. ELEMENTOS Y ATRIBUTOS DE FORMULARIO 2.1 Descripción y definición de los elementos de un formulario Un formulario HTML siempre tendrá que ser declarado con la etiqueta <form>. Entre esta y su correspondiente cierre </form>, podremos insertar todos los elementos necesarios. Veamos primero cuales son los atributos que se pueden utilizar. - action: especifica donde van los datos cuando el usuario los envía. La página que los recoge los tratará, probablemente usando una aplicación de servidor y base de datos (por ejemplo un programa PHP y base de datos mysql). - method: indica el método de http utilizado para enviar los datos cuando el usuario pulse el botón submit. Las dos opciones son get y post que ya hemos visto. - name: indicamos el nombre del formulario. Es un campo importante, ya que para referirnos a él, por ejemplo con javascript, será imprescindible. UF1304 / Elaboración de plantillas y formularios pg. 17

8 - autocomplete: es nuevo, incluido en HTML5. Sus posibles valores son on/off y sirve para activar el autocompletado de los campos. - novalidate: también incluido en HTML5, e indica que el formulario no sea validado cuando se envíe. 2.2 Utilización de campos y textos Entre la etiqueta de inicio y cierre de form, podremos utilizar una serie de elementos para crear nuestros formularios. El siguiente es un ejemplo sencillo de código HTML para definir un formulario <form action= destino.php > Nombre: <input type= text name= nombre ><br> Apellidos: <input type= text name= apellidos ><br> <input type= submit value= Submit > </form> Y el resultado de este código: 2.3 Etiquetas de los formularios Es importante hacer referencia al uso de la etiqueta label. Esta etiqueta tiene como función la de incluir un texto junto a cualquier control del formulario, pero su utilidad va un poco más allá. El verdadero interés consiste en que con ella asociamos a cada control una etiqueta, de manera que no hay lugar a dudas cuando se repasa el código y sabemos exactamente qué corresponde con qué. El ejemplo de la sección anterior debería ser: pg. 18 Tema 1 / Formularios en la construcción de páginas web

9 editorialcep } <form action= destino.php > <label for= nombre >Nombre:</label> <input type= text name= nombre ><br> <label for= apellidos >Apellidos:</label> <input type= text name= apellidos ><br> <input type= submit value= Submit > </form> Con el atributo for, vinculamos cada label con su control. El uso de label puede parecer tedioso y que no obtenemos nada a cambio, pero en formularios complejos agradecemos esta ayuda. Así mismo también conseguimos que nuestro código esté bien formado, lo cual siempre debe ser un objetivo, sobre todo cuando se está empezando. 2.4 Tamaños, columnas y filas de los formularios Los aspectos de estilo como el tamaño de los elementos, de la letra o la disposición de los elementos de un formularios deben abordarse usando hojas de estilo. Antes del uso extendido de CSS era habitual utilizar tablas para cuadrar y maquetar los elementos HTML allí donde los queríamos tener. Hoy en día, si queremos un formulario a dos columnas, se hará usando capas y situándolas correctamente. Un elemento útil para agrupar otros elementos es fieldset, que nos permite agrupar varios controles. Veamos un ejemplo: <form name= agrupacioncampos > <fieldset> <legend>datos personales:</legend> <label for= nombre >Nombre:</label> <input type= text name= nombre ><br> <label for= >Correo electrónico:</label> <input type= name= correoe ><br> <label for= nacimiento >Fecha nacimiento:</label> <input type= date name= nacimiento > </fieldset> </form> UF1304 / Elaboración de plantillas y formularios pg. 19

10 Cuyo resultado sería: Pueden utilizarse los atributos disabled, form (para especificar los formularios a los que pertenece) y name, todos ellos nuevos con HTML5. Si combinamos lo hablado anteriormente con este nuevo elemento podemos obtener formularios como este El código utilizado, tanto HTML como CSS es el siguiente: HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>formulario en dos columnas</title> <link href= columnas.css type= text/css rel= stylesheet > </head> pg. 20 Tema 1 / Formularios en la construcción de páginas web