Guia 7 - Universidad Don Bosco

Rating
Date

September 2018
Size

1.7MB
Views

5,161
Categories

Prácticas Prácticas Universitarias Ingeniero Técnico en Informática de Sistemas Estructura de Datos y de la Información

Preview only show first 6 pages with water mark for full document please download

Transcript

UNIVERSIDAD DON BOSCO FACULTAD DE ESTUDIOS TECNOLOGICOS ESCUELA DE COMPUTACION CICLO 01-2016 GUIA DE LABORATORIO Nº 8 Nombre de la práctica: Uso de formularios en una página Web Lugar de ejecución: Laboratorio de Informática Tiempo estimado: 2:30 horas Materia: Lenguajes de Marcado y Estilos Web I. OBJETIVOS Que el estudiante: 1. Entienda el funcionamiento y la utilidad de los formularios como medio para obtener información de parte del usuario. 2. Conozca los controles para entrada de información y para selección de opciones por parte del usuario. 3. Utilice los principales atributos de las etiquetas de entrada de datos y de las etiquetas de controles de selección Atributo method Este atributo especifica el método HTTP que se usará para enviar el conjunto de datos del formulario. Los valores posibles pueden ser GET (valor por defecto) o POST. Ambos no distinguen entre mayúsculas y minúsculas. El primer valor del atributo, el valor GET, envía los datos del formulario utilizando la url, por lo tanto los datos son añadidos a la dirección url mediante valores tipo nombre/valor, no se recomienda utilizar este método cuando los datos son sensibles a la seguridad, ya que los valores son mostrados en la barra de direcciones del navegador. El segundo valor del atributo, el valor POST, por el contrario, hace que los datos sean enviados dentro de la petición HTTP, del atributo action. Por lo tanto los datos no son visibles en su envió y la seguridad de los mismos se mantiene intacta. Atributo autocomplete Este atributo especifica que el formulario pueda utilizar las entradas de datos anteriores que pueda haber realizado el usuario, para autocompletar los campos que son solicitados por el formulario. Se puede establecer como valores posibles on, que indica la activación. Y off, indicando que el auto completado estaría desactivado. Si se establece el valor del atributo como activado, se pueden indicar campos del formulario como desactivados y viceversa. Atributo name El atributo name permite especificar el nombre que se quiere asignar al formulario o los datos que se solicitan en el mismo. El nombre puede ser utilizado posteriormente bien por lenguajes interpretados en el cliente, para interactuar con el formulario, o bien con lenguajes interpretados en el servidor para procesar los datos recibidos. El siguiente ejemplo muestra el uso del atributo aplicado al formulario y datos del mismo. Atributo novalidate Este atributo permite especificar que los datos del formulario no sean validados, según las características de los campos utilizados en el formulario, de esta forma el formulario envía los datos sin realizar ningún tipo de comprobación sobre los datos. Es un atributo booleano, por lo tanto su aparición en la etiqueta de formulario, hace que se active el mismo. ETIQUETAS DE UN FORMULARIO Las etiquetas además de ser de distintos tipos, tienen sus atributos propios que se añaden a los comunes de todas las etiquetas. Las etiquetas de control de formulario son las siguientes:          

LA ETIQUETA INPUT El elemento más importante en un formulario es <input>. Este elemento puede cambiar sus características gracias al atributo type (tipo). Este atributo determina qué clase de entrada es esperada desde el usuario. Los tipos disponibles hasta antes de HTML5 eran el multipropósitos text (para textos en general) y solo unos pocos más específicos como password o submit. HTML5 ha expandido las opciones incrementando de este modo las posibilidades para este elemento. En HTML5 estos nuevos tipos no solo están especificando qué clase de entrada es esperada sino también diciéndole al navegador qué debe hacer con la información recibida. El navegador procesará los datos ingresados de acuerdo al valor del atributo type y validará la entrada o no. El atributo type trabaja junto con otros atributos adicionales para ayudar al navegador a limitar y controlar en tiempo real lo ingresado por el usuario.

Hasta antes de HTML5 la etiqueta input admitía los siguientes tipos (type):

Input Type: Text El tipo text representa un espacio para introducir un texto. Como en casi todos los campos de formulario su valor se puede inicializar utilizando el atributo value. Este campo tiene la peculiaridad que si se omite el type, se asume Text. Podemos ver un ejemplo con el siguiente código: <form action="actualizar.php" method="get"> <p>Nombre:<input type="text" name="Nombre" /></p> <p>Apellido:<input type="text" name="Apellido" /></p> <p><input type="submit" name="Enviar"></p> </form> Input Type: Password Representa una entrada de datos de texto en la que se visualizan asteriscos pero al enviarse se envían los datos reales. El dato introducido en el campo se asigna al atributo value. <form action="actualizar.php" method="get"> <p>Nombre: <input type="text" name="Nombre" /></p> <p>Apellido: <input type="text" name="Apellido" /></p> <p>Clave: <input type="password" name="password" /></p> <p><input type="submit" name="Enviar"></p>

</form>

Input Type: Hidden Es un dato que se mantiene oculto a la vista pero que se pasa al servidor junto con el resto de los campos del formulario. Es un campo adecuado para pasar información de una página a otra y que se puede utilizar en los script como un dato más. Al ser un dato oculto, el usuario no puede ni ver ni modificar el dato. El dato se le asigna al atributo value. <input type="hidden" name="datoOculto" value="Dato pasado como oculto" /> Input Type: Checkbox Es una dato que es representado al usuario por una casilla de verificación; por lo tanto, sólo puede tener dos valores: seleccionado o no seleccionado. Si se utiliza el atributo checked, el campo se muestra seleccionado por defecto. <form action="actualizar.php" method="get"> <p>Seleccione sus aficiones</p> <p><input type="checkbox" checked name="Internet" />Informatica</p> <p><input type="checkbox" name="Leer" />Video juegos</p> <p><input type="checkbox" name=“Juegos" />Hacer Deportes</p> <p><input type="submit" name="Enviar"></p> </form> Input Type: Radio Es un dato que se le presenta al usuario con botones de opción; una variable asignada a un grupo de botones en el que solo uno puede estar seleccionado. Si se utiliza el atributo checked, el campo aparece seleccionado por defecto. Para informarle a HTML que todos los botones forman parte de un grupo de opciones, estos comparten el atributo name. <form action="actualizar.php" method="get"> <p>Seleccione su Estado Civil</p> <p><input type="radio" checked name="eCivil" />Soltero</p> <p><input type="radio" name="eCivil" />Casado</p> <p><input type="radio" name="eCivil" />En una relación</p> <p><input type="radio" name="eCivil" />Viudo(a)</p> <p><input type="submit" value="Enviar"></p> </form> Input Type: SUBMIT Este tipo es representado por un botón que al ser pulsado envía los datos recogidos por el formulario al script definido por el atributo action del formulario. En este caso el atributo value se utiliza para poner el texto dentro del botón. Input Type: RESET Es un dato que se representa por un botón que al ser pulsado reinicia los campos del formulario con los valores predeterminados. El atributo value se utiliza como texto del botón. Input Type: IMAGE Este atributo ejerce la misma función del input submit, con la diferencia de que este atributo es representado por una imagen, la imagen a mostrar es llamada por el atributo src. Al hacer clic en la imagen se envía el formulario. 5

<form action="actualizar.php" method="post" id="form1"> <p>Rellene el formulario</p> <p>Nombre: <input type="text" name="Nombre" /></p> <p>Apellidos: <input type="text" name="Apellidos" /></p> <p>Email: <input type="text" name="Email" /></p> <p><input type="image" src="input_type_image.png" width="100" height="100"></p> </form>

Input type:File Este atributo permite enviar archivos al servidor mediante el método POST. En el navegador se muestra un botón examinar o seleccionar para que podamos elegir el archivo que se requiere enviar. <form action="actualizar.php" method="post" id="form1"> <p>Elija el archivo que a enviar</p> <p><input type="file" name="archivo" /></p> <p><input type="submit" value="Envíar"></p> </form> NUEVOS TIPOS DE ENTRADA DE DATOS EN FORMULARIOS En HTML5 se han incluido nuevos tipos de entradas de datos para los formularios, algunos de estos nuevos tipo de entrada tienen la capacidad de comprobar si el valor introducido coincide con su tipo de dato lo que nos ayuda bastante a la hora de solucionar la validación de los datos que el usuario introduce. Con el uso de estas nuevas características en los formulario HTML5 nos evitamos tener que crear script para validar los datos del lado del cliente. Input type: email El nuevo campo de introducción de datos de tipo email permite especificar que el contenido insertado deberá ser una dirección de e-mail, es decir, que deberá incluir el carácter @. <form action="recepcion.php"> <label>Ingresa tu mail</label>

<input type=“email" name=“correo"> <input type="submit" name="enviar" value="enviar"> </form> Input type: tel Este tipo de campo es para números telefónicos. A diferencia de los tipos email, el tipo tel no requiere ninguna sintaxis en particular. Es solo una indicación para el navegador en caso de que necesite hacer ajustes de acuerdo al dispositivo en el que la aplicación es ejecutada. <form action="recepcion.php">

<label>Su telefono:</label> <input type="tel" name=“telefono"> <input type="submit" name="enviar" value="enviar"> </form> 6

Input type: url El campo para la introducción de datos de tipo url permite recuperar una URL. La comprobación de dicha URL para ver si es válida dependerá totalmente del navegador. <form action="recepcion.php"> <label>Su sitio web:</label> <input type="url" name=“sitio"> <input type="submit" name="enviar" value="enviar"> </form> Input type: date El campo de tipo date permite insertar una fecha. Pero, en lugar de dejar que sean los propios usuarios quienes inserten las fechas, con los riesgos de error que eso conlleva, los navegadores propondrán de forma nativa una interfaz de selección de fechas que sea fácil de usar. <form action="recepcion.php"> <label>Fecha de nacimiento:</label> <input type="date" name="f_nacimiento"> <input type="submit" name="enviar“ value="enviar"> </form>

Input type: datetime-local Este campo permite ingresar fecha y hora en una sola toma de datos. <form action="recepcion.php"> <label>Fecha y hora del parcial:</label> <input type="datetime-local" name="f_parcial"> <input type="submit" name="enviar“ value="enviar"> </form> Input type: time Este campo permite ingresar una hora en particular <form action="recepcion.php"> <label>Hora actual:</label> <input type=“time" name=“hora_actual"> <input type="submit" name="enviar” value="enviar"> </form>

Input type: number Como su nombre lo indica, el tipo number es sólo válido cuando recibe una entrada numérica. Existen algunos atributos nuevos que pueden ser útiles para este campo:  min El valor de este atributo determina el mínimo valor aceptado para el campo.  max El valor de este atributo determina el máximo valor aceptado para el campo.  step El valor de este atributo determina el tamaño en el que el valor será incrementado o disminuido en cada paso. <form action="recepcion.php"> <label>Ingrese su edad:</label> <input type="number" min="18" max="100" step="2" value="22" name="edad" /> <input type="submit" name="enviar" value="enviar"> </form>

Input type: search El tipo search permite insertar un campo de introducción de datos específico para las búsquedas. Su visualización dependerá de los parámetros de la interfaz del navegador que esté utilizando el visitante, ¡así que puede variar muchísimo! <form action="recepcion.php"> <label>Buscar:</label> <input type="search" name="busqueda" /> <input type="submit" name="enviar" value="enviar"> </form> ATRIBUTOS DE LA ETIQUETA INPUT Existen muchos atributos más del elemento INPUT, que varían de acuerdo al valor asignado al atributo type. Por ejemplo, si se asigna type=“text”, se pueden utilizar los siguientes atributos: 

name y id : Ambos son identificadores únicos para el cuadro de texto. El primero, especifica un nombre para el control y el segundo, un identificador. Por razones de compatibilidad se sigue usando el name.



value: permite establecer un valor inicial para el control. En el caso de un cuadro de texto, el texto por defecto que aparecerá en el control.



size: El tamaño con que se visualizará el control medido en número de caracteres.



maxlenght: define el número máximo de caracteres que se pueden ingresar en el control de cuadro de texto. Por defecto, se pueden ingresar infinitos caracteres.



disabled: hace que el control aparezca deshabilitado en el contexto.



placeholder: representa una sugerencia corta, una palabra o frase provista para ayudar al usuario a ingresar la información correcta. El valor de este atributo es presentado en pantalla por los navegadores dentro del campo, como una marca de agua que desaparece cuando el elemento es enfocado.



required: Este atributo booleano no dejará que el formulario sea enviado si el campo se encuentra vacío. Por ejemplo, cuando usamos el tipo email para recibir una dirección de email, el navegador comprueba si la entrada es un email válido o no, pero validará la entrada si el campo está vacío. Cuando el atributo required es incluido, la entrada será válida sólo si se cumplen las dos condiciones: que el campo no esté vacío y que el valor ingresado esté de acuerdo con los requisitos del tipo de campo.



pattern: El atributo pattern es para propósitos de validación. Usa expresiones regulares para personalizar reglas de validación (estas expresiones se estudian a profundidad más adelante).



form: El atributo form es una adición útil que nos permite declarar elementos para un formulario fuera del ámbito de las etiquetas <form>. Hasta ahora, para construir un formulario teníamos que escribir las etiquetas <form> de apertura y cierre y luego declarar cada elemento del formulario entre ellas. En HTML5 podemos insertar los elementos en cualquier parte del código y luego hacer referencia al formulario que pertenecen usando su nombre y el atributo form.

<nav> <input type="search" name="busqueda" id="busqueda" form="formulario" > </nav> <form name="formulario" id="formulario" method="get" action="prueba.php"> <input type="text" name="nombre" id="nombre"> <input type="submit" value="Enviar"> </form> La etiqueta <datalist> El campo de tipo datalist permite disponer de un campo de inserción libre y, al mismo tiempo, de las funcionalidades de un menú desplegable. De este modo el usuario podrá insertar un valor personalizado o bien elegir un valor entre las sugerencias propuestas. El elemento datalist utiliza los elementos habituales option para las sugerencias. Tendremos que usar simultáneamente un campo de tipo text y un elemento datalist. La relación se establece con el valor del atributo list de input y el id de datalist. A continuación se presenta un ejemplo del uso de esta etiqueta: <form action="recepcion.php"> <label>Sistema operativo preferido:</label> <br> <input id=“sistema_op" type="text" list="OS"> <datalist id="OS"> <option value="Mac OS"> <option value="Windows">

<option value="Linux"> </datalist> <input type="submit" value="Aceptar"> </form> 9

La etiqueta <button> La etiqueta <button>, permite definir un botón sobre el cual se puede realizar pulsaciones de ratón. Si la etiqueta se utiliza dentro de un formulario se pueden utilizar prácticamente los mismos atributos que los explicados anteriormente para la etiqueta <input>, con el atributo type, con un valor de button. Aunque se recomienda que para incluir botones en el formulario se utilice la etiqueta <input>. La diferencia con los botones de un formulario, es que con esta etiqueta se pueden utilizar en el contenido de la etiqueta texto o imágenes. <button type="button">Boton Normal</button><br> <button type="button"> <img src="images.jpg" width="32" height="32"> </button> La etiqueta <FIELDSET> Su función es la de realizar grupos de campos dentro del formulario. Estos grupos de campos son representados mediante un marco con borde alrededor de los campos contenidos en el grupo. La etiqueta suele ir acompañada de otra etiqueta denomina <legend>, la cual permite establecer el título del grupo de elementos en el contenido de la misma, y se suele utilizar justo despues de la etiqueta de apertura del grupo. A continuación se presenta un ejemplo del uso de las etiquetas fieldset y legend: <form action="recepcion.php"> <fieldset> <legend>Datos personales</legend> <label>Nombre</label> <input type="text" name="nombre"> <br> <br> <label>Apellido</label> <input type="text" name="apellido"> <br> </fieldset> <br> <input type="submit" value="Aceptar"> </form> La etiqueta <LABEL> La etiqueta <label>, permite definir una etiqueta o título para los campos de tipo input, el incluir un título en el formulario no realiza ninguna función especial sobre los campos del mismo, pero sí de cara al usuario representa una mejora en la presentación del formulario, ya que también al incluir los títulos de los campos, el usuario puede realizar un clic sobre los mismos, permitiendo activar o recibir el foco del control asociado al título.

La etiqueta <SELECT> La etiqueta <select>, permite la creación de listas desplegables o listas abiertas, desde la que poder realizar la selección de una o varias de las opciones que se presentan en la misma. La etiqueta se configura en conjunto con otra etiqueta denominada <option>, la cual permite especificar las opciones que aparecen en la lista. <form action="recepcion.php"> <select name="universidad" id="universidad"> <option>Universidad Don Bosco</option> <option>Universidad Nacional</option> <option>Universidad Centroamericana</option> <option>Universidad Francisco Gavidia</option> </select> <input type="submit" value="Aceptar"> </form> El atributo size especifica el número de líneas. Si este número es inferior al número de opciones, aparecerá una barra de visualización vertical. El atributo multiple permite múltiples selecciones simultáneas. <form action="recepcion.php"> <select name="equipos" id="equipos" size="3" multiple>

<option>Alianza</option> <option>Fas</option> <option>Aguila</option> <option>Juventud independiente</option> </select> <input type="submit" value="Aceptar"> </form> También es posible incluir las opciones como contenido de otra etiqueta denominada <optgroup>, la cual permite especificar grupos de opciones, agrupando las opciones comunes por grupos. Esta última etiqueta solo dispone de un atributo: label, el cual permite especificar el valor del nombre del grupo. <form action="recepcion.php"> <select name="equipos" id="equipos"> <optgroup label="Equipos buenos"> <option>Barcelona</option> <option>Bayer Munich</option> <option>Juventus</option> </optgroup> <optgroup label="Equipos regulares"> <option>Atletico de Madrid</option> <option>Arsenal</option> <option>Inter de Milan</option> </optgroup> 11

<optgroup label="Equipos malos"> <option>Real Madrid</option> <option>Fas</option> <option>Aguila</option> </optgroup> </select> <input type="submit" value="Aceptar"> </form> La etiqueta <textarea> Este elemento permite crear un control de entrada de texto de varias líneas. El contenido que se coloca entre las etiquetas <TEXTAREA> …

debe ser utilizado como valor inicial para el control y debe aparecer dentro del control cuando se muestre en el navegador. Los atributos del elemento TEXTAREA se describen a continuación:  name y id: Asigna un nombre único al control y establece un identificador único para el control, respectivamente.  rows: especificar el número de líneas de texto visibles. Los usuarios podrán introducir más líneas que las visibles, para ello el navegador debe proporcionar un mecanismo para desplazarse a las líneas que no sean visibles en un momento determinado.  cols: establece el ancho visible para el control, medido en número de caracteres. También se pueden ingresar líneas de mayor longitud que la visible. El navegador debe hacer aparecer una barra de desplazamiento para poder desplazarse. A continuación se muestra un ejemplo de la utilización de esta etiqueta: 12 ESTILIZACIÓN DE FORMULARIOS Añadiendo un pequeño relleno en los campos de texto Por defecto, los campos de texto de los formularios no incluyen ningún espacio de relleno, por lo que el texto introducido por el usuario aparece pegado a los bordes del cuadro de texto. Añadiendo un pequeño padding a cada elemento , se mejora notablemente el aspecto del formulario: La regla CSS necesaria para mejorar el formulario es muy sencilla: form.elegante input { padding: 0.3em; } Labels alineados y formateados Los elementos y de los formularios son elementos en línea, por lo que el aspecto que muestran los formularios por defecto, es similar al de la siguiente imagen: Aprovechando los elementos , se pueden aplicar unos estilos CSS sencillos que permitan mostrar el formulario con el aspecto de la siguiente imagen: 13 En primer lugar, se muestran los elementos como elementos de bloque, para que añadan una separación para cada campo del formulario. Además, se añade un margen superior para no mostrar juntas todas las filas del formulario: label { display: block; margin: .5em 0 0 0; } El botón del formulario también se muestra como un elemento de bloque y se le añade un margen para darle el aspecto final deseado: input[type="submit"]{ display: block; margin: 1em 0; } Alineando labels y controles En ocasiones, es más útil mostrar todos los campos del formulario con su alineada a la izquierda y el campo del formulario a la derecha de cada , como muestra la siguiente imagen: Para mostrar un formulario tal y como aparece en la imagen anterior se tienen dos opciones: 1. La opción menos elegante consiste en insertar una tabla sin borde y con dos columnas: en una columna se mostrarán los labels y en la columna se colocarán los controles. Luego basta con controlar la anchura de las columnas de la tabla para conseguir una alineación perfecta. 2. La segunda opción consiste en añadir un nuevo elemento (

que encierre a cada uno de los campos del formulario ( y ). El esquema de la solución propuesta es el siguiente: 14 Por tanto, en el código HTML del formulario anterior se añaden los elementos

: Y en el código CSS se añaden las reglas necesarias para alinear los campos del formulario: form div{ margin: 0.5em 0; } form label{ display: block; margin: 0.5em 0 0 0; width: 25%; float: left; } Resaltar el campo seleccionado Una de las mejoras más útiles para los formularios HTML consiste en resaltar de alguna forma especial el campo en el que el usuario está introduciendo datos. Para ello, CSS define la pseudo-clase :focus, que permite aplicar estilos especiales al elemento que en ese momento tiene el foco o atención del usuario. Añadiendo la pseudo-clase :focus después del selector normal, el navegador se encarga de aplicar esos estilos cuando el usuario activa el elemento: input:focus { border: 2px solid navy; } 15 Pseudo-clase :required Utilizado para seleccionar elementos requeridos, más específicamente, se utiliza para seleccionar los elementos de un formulario que a los que se le han establecido el atributo required. En el siguiente ejemplo se le coloca una pequeña imagen de un asterisco a todos los campos obligatorios. form input:required{ background: #fff url(red-asterisk.png) no-repeat 98% center; } Pseudo-clase :optional Esta pseudo-clase se utiliza para seleccionar los campos NO requeridos de un formulario. En el siguiente ejemplo se le coloca un borde de color naranja a los campos de texto optativos (no obligatorios). form input [type="text"]:optional{ border-color: orange; } Pseudo-clase :invalid Pseudo-clase utilizada para seleccionar y dar estilo a los elementos input cuyos valores NO sean validos de acuerdo a su tipo especificado en el atributo type. En el siguiente ejemplo se combina el uso de las pseudo clases :invalid y :focus para estilizar los campos de texto que tengan el “foco” y que posean un valor no válido. form input:focus:invalid { background: url(rojo.png) no-repeat 98% center; } Pseudo-clase :valid Pseudo-clase utilizada para seleccionar y dar estilo a los elementos input cuyos valores sean validos de acuerdo a su tipo especificado en el atributo type. En el siguiente ejemplo se combina el uso de las pseudo clases :valid y :focus para estilizar los campos de texto que tengan el “foco” y que posean un valor válido. form input:focus:valid { background: url(verde.png) no-repeat 98% center; } 16 Pseudo-clase :checked Se utiliza para seleccionar checkbox, y option en un select, en el estado seleccionado (ejemplo al hacer click a un checkbox). Como ejemplo, considérese el siguiente código HTML en el que se inserta un input de tipo checkbox en el formulario del ejemplo anterior.

Acepto los términos

Con la siguiente regla de estilo se selecciona al elemento span que es hermano del checkbox seleccionado y se le cambia el color de fondo. form input [type = "checkbox"]:checked + span{ background-color: yellow; } El formulario anterior luciría de la siguiente manera según el checkbox este seleccionado o no. Pseudo-clases :in-range y :out-of-range Estas pseudo-clases son utilizadas para dar estilos a elementos que tienen rangos de alcance, cuando:  El valor del elemento destinado a este se encuentra dentro de los límites del rango especificado ( :inrange ).  El valor que el elemento destinado a este se encuentra fuera de los límites del rango especificado ( :out-of-range ). Como ejemplo, considérese el siguiente código HTML en el que se inserta un input de tipo number en el formulario del ejemplo anterior.

Edad: 17 value="25" id="edad" /> Con las siguientes reglas de estilo se selecciona el input con id “edad” y se le coloca un color de fondo distinto cuando obtiene el foco dependiendo de si el valor seleccionado está dentro del rango o fuera de él (estos rangos se definen con el atributo min y max del input de tipo number). input#edad:focus:out-of-range { background-color: lightpink; } input#edad:focus:in-range { background-color: lightgreen; } VALIDACIÓN DE FORMULARIOS CON HTML5 HTML5 nos permite definir patrones de validación para los diferentes campos de un formulario sin utilizar ni una sola línea de javascript. Esta característica nos permite ahorrarnos algunas solicitudes inadecuadas y el consiguiente gasto innecesario de recursos del servidor, aunque sin duda la principal ventaja es la mejora de la experiencia del usuario. Es importante anotar que la validación de formularios con HTML5, al igual que la validación con javascript, se realiza en el lado del cliente (navegador web) y, por tanto, puede ser modificada por el usuario o ignorada totalmente. Esto quiere decir que las cuestiones relativas a la seguridad del formulario no deben basarse en esta validación ni es sustituta de la validación server-side. El atributo required Este atributo se utiliza para decir al navegador los campos del formulario que son requeridos de forma obligatoria, es decir, que no pueden quedar vacíos. Basta con poner required o required="required".

Nombres:

18 El atributo title En el momento en que se encuentra un error de validación se ejecuta la acción por defecto del navegador, normalmente aparece un pequeño globo emergente (tooltip) conteniendo un texto de advertencia. Añadiendo el atributo title en la etiqueta , se puede extender la información mostrada.

Nombres:

El atributo type Como ya se vio anteriormente, la etiqueta input admite muchos valores en su atributo type para cambiar el tipo de datos a recibir (email, contraseñas, url, números, etc.) Si los datos introducidos en el campo del formulario no coinciden con el tipo especificado, el navegador lanzará un aviso al usuario y el formulario no se enviará. Por ejemplo, podemos requerir que se introduzca una dirección de correo electrónico: Expresiones regulares: Atributo pattern El atributo pattern es para propósitos de validación. Usa expresiones regulares para personalizar reglas de validación. Algunos de los tipos de campo ya estudiados validan cadenas de texto específicas (correos, url, etc.) pero no permiten hacer validaciones personalizadas, como por ejemplo el carnet de la UDB que consta de dos letras y seis dígitos. No existe ningún tipo de campo predeterminado para esta clase de entrada. El atributo pattern nos permite crear nuestro propio tipo de campo para controlar esta clase de valores no ordinarios. Es posible incluso incluir un atributo title para personalizar mensajes de error. Retomando el ejemplo del carnet de la UDB, el pattern que permitiría validar dicha entrada seria el siguiente: [A-Za-z]{2}[0-9]{6} Lo cual indica que se espera recibir dos letras (en mayúsculas o minusculas) y 6 dígitos. El codigo HTML para validar ese campo sería entonces: 19 Estudiemos paso a paso los elementos para construir una expresión regular: Clases de caracteres Las clases de caracteres se utilizan para definir el contenido de un patrón. Esto es, lo que el patrón debe buscar. Operadores lógicos Los operadores lógicos de la siguiente tabla nos permiten combinar caracteres o clases de caracteres para formar expresiones regulares más complejas. Cuantificadores Los cuantificadores definen cuantas veces aparecerá un elemento en una expresión. 20 Metacaracteres de frontera Los metacaracteres de frontera nos permiten especificar en qué parte de una cadena buscar por una coincidencia con la expresión regular.  ˆ indica que el valor deberá comenzar obligatoriamente por los elementos especificados justo a continuación. ˆ[0-9]{2} indica que el valor deberá comenzar con dos cifras para que sea válido.  $ indica que el valor deberá terminar obligatoriamente por los elementos específicos que la preceden. [a-z]$ indica que el valor deberá terminar con una letra en minúscula para que sea válido. Ejemplos 1. Comprobar si el valor del campo de texto posee el patrón “abc” 2. Comprobar si el valor del campo de texto está formado por un mínimo de 5 letras mayúsculas o minúsculas y un máximo de 10. 3. Comprobar si el valor del campo de texto solo contienen los caracteres a ó b III. MATERIALES Y EQUIPO No. 1 2 3 4 Cantidad Descripción 1 PC con uno de los editores de páginas Web: Sublime Text, Brackets, Notepad ++, BlueFish y HTML Kit y cualquiera de los navegadores siguiente: Internet Explorer 7 u 8, Firefox (última versión disponible), Google Chrome (última versión disponible), Opera (última versión disponible), Safari (última versión disponible). 1 Guía de Laboratorio #8 de Lenguajes de Marcado y Estilo Web 1 Recursos para laboratorio práctico. 1 Memoria USB 21 IV. PROCEDIMIENTO INDICACIONES GENERALES 1. Crear una carpeta en “mis documentos” y colocarle el nombre N°Carnet_Guia8_LME, Nota: Cambiar N°Carnet por su número de carnet brindado por la Universidad. 2. Descargar los recursos de la guía, descomprimirlos y colocar las carpetas img y css dentro de la carpeta creada en el paso anterior. Ejercicio 1. Construyendo un formulario alineado sin usar tablas. 1. Cree un nuevo archivo html con nombre: Ejercicio1.html. 2. Guarde el archivo en su carpeta de trabajo. 3. Realizar la maquetación web según lo indica la siguiente imagen. 4. Colocar el contenido de las etiquetas según indica la siguiente tabla. Etiquetas input input Contenido Dentro de fieldset Tipo: imagen ubicación de archivo: img/user.png clase: img Tipo: texto Identificador: nombre Valor: vacio Validación:^[a-zA-Z\s]+$ Título: Solo se acepta letras Clase: control 22 Nombre de marcado de posición: Nombre Campo requerido //Salto de linea al final de etiqueta input input input input input input input input
Tipo: imagen ubicación de archivo: img/tel.png clase: img Tipo: tel Identificador: telefono Valor: vacio Validación: ^[0-9]{4}-?[0-9]{4}$ Título: Solo acepta números en el siguiente formato: 2222-2222 Clase: control Nombre de marcado de posición: Número de teléfono Campo requerido //Salto de línea al final de etiqueta input Tipo: imagen ubicación de archivo: img/email.png clase: img Tipo: correo Identificador: correo Valor: vacio Título: Formato de correo: NombreCorreo@dominio Clase: control Nombre de marcado de posición: Correo Electrónico Campo requerido //Salto de línea al final de etiqueta input Tipo: imagen ubicación de archivo: img/pass.png clase: img Tipo: contraseña Identificador: password Valor: vacio Validación: ((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,15}) Título: Su contraseña debe ser de 6 a 15 caracteres y deben incluir una letra mayúscula, minúscula y un numero Clase: control Nombre de marcado de posición: Contraseña Campo requerido //Salto de linea al final de etiqueta input Tipo: checkbox Valor: acepto Clase: terminos P

Acepto Términos, Condiciones y Política de Privacidad

button Identificador: botón Tipo: submit 23 5. Cree un nuevo archivo de tipo css con nombre estilo.css 6. Guardar el archivo en la carpeta llamada css dentro de su carpeta de trabajo. 7. Realizar las reglas de estilo necesarias según indique la siguiente tabla: 8. Selector #login #login form #logindatos #login .img .terminos p.terminos #login input #login input.terminos .control .boton .formdatos .formdatos form .formdatos fieldset .formdatos img .formdatos button .formdatos p form :required :invalid h1 Propiedades Margen superior:4%, Margen izquierdo:32%; Margen derecho:32% Ancho:400px, alineación de texto: center Borde:none, margen superior:5px, bordes redondeados:10px Margen: 18px, posición: absolute, ancho 30px, alto 30px, bordes redondeados:0px Vista: inline Tamaño de letra: 11px, color de letra:#fff Bordes redondeados: 15px, ancho:300px, alto:35px, margen :10px Ancho:20px, alto: 20px área de relleno izquierdo: 45px, tamaño de letra: 18px Color de fondo: rgba(164,179,87,1), bordes redondeados:15px, ancho:150px, alto:40px, color de letra: #fff, tipo de letra: Century Gothic, margen superior: 3px, margen izquierdo:185px; color de letra: #fff ancho:1115px, alto: 500px, borde redondeados:15px, relleno:22px, margen: 20px auto; Tipo de letra: Century Gothic, Área de relleno: 12px, float:left, ancho:25%, margen superior:5px, bordes redondeados: 10px, alto:332px, margen izquierdo:13px Float:left, ancho:90px, alto:70px, borde redondeados:5px, margen: 0px 22px Margen superior:3px, margen izquierdo: 830px Margen superior:15%, Área de relleno inferior:15%, tamaño de letra: 48px, alineación de texto: center. Tipo de letra: Century Gothic, color de fondo: rgba(76,76,76,1), sombreado de caja: 10px 10px 112px 0px rgba(0,0,0,0.75); Realizar prefijos de sombreado de caja para mozilla , chrome Bordes redondeados: 15px, caja de sombreado: 0px 0px 5px #808080 Bordes redondeados: 15px, color de borde: rgba(164,179,87,1) Area de relleno superior: 6px, color de letra: #fff 24 9. Agregar el llamado al estilo de estilo .css dentro de la etiqueta de nuestra página web 10. Visualizar el resultado de la página web en el navegador. 11. Probar las validaciones del formulario, y comprobar que el formulario nos enviara a página Ejercicio2.html hasta que todos los datos estén con el formato correcto. Ejercicio #2. Controles de Formulario 1. Cree un nuevo archivo html con nombre: Ejercicio2.html. 2. Guarde el archivo en su carpeta de trabajo. 3. Realizar la maquetación web según lo indica la siguiente imagen. 25 4. Colocar el contenido de las etiquetas según indica la siguiente tabla. Etiquetas Contenido Dentro de fieldset datos Dentro de fieldset temas Dentro de fieldset aficiones 26 5. Visualizar el resultado de la página web en el navegador. Ejercicio #3. Envió 1. Cree un nuevo archivo html con nombre: Ejercicio3.html. 2. Guarde el archivo en su carpeta de trabajo 3. Realizar la maquetación web según lo indica la siguiente imagen. 4. Visualizar el resultado de la página web en el navegador. 27 Ejercicio # 4. Diseñando un formulario de login 1. 2. 3. 4. 5. Cree un nuevo archivo html con nombre: login.html. Guarde el archivo en su carpeta de trabajo Escriba la estructura básica de un archivo html dentro de archivo creado en el paso 1. Cambiar el título de la página web por el texto “Ejemplo de formulario de logueo” Colocar el siguiente código HTML dentro del body de su página web 28 6. Crear el archivo logueo.css y guardarlo en la carpeta css dentro de su carpeta de trabajo. 7. Vincular la hoja de estilo con su pagina web. 8. Digitar las siguientes reglas de estilo dentro del archivo creado en el paso anterior. 9. Comenzaremos digitando los estilos generales para la página y el formulario 10. A continuación colocamos los estilos para la sección del formulario con la clase header 11. Ahora procedemos a estilizar el div con clase “login” dándole un pequeño relleno horizontal. 29 12. Procedemos darle estilo a los iconos que se mostraran a la izquierda de los campos de texto. 13. A continuación procedemos a darle estilos a los campos de texto a los cuales se les ha asignado la clase “text” 14. Visualice el avance del ejercicio en su navegador. Notará que cada uno de los campos de texto tienen una altura muy pequeña. Para aumentar dicha usaremos la propiedad line-height y haremos que los span y los input que son elementos en línea puedan aumentar su alto sin necesidad de insertar un salto de línea (esto se consigue con display: inline-block). 15. Ahora le daremos estilo al botón de tipo submit al cual se le ha aplicado la clase btn 30 16. Otro de los errores del formulario es que aún se ven las viñetas de los elementos de lista. Para corregir esto digitaremos las siguientes reglas de estilo: 17. A continuación procedemos a darle estilo a las opciones “Recordarme” y “Has olvidado tu contraseña?” 18. Ahora le daremos estilo a la sección que contiene los botones para iniciar sesión mediante redes sociales. 31 19. Finalmente la daremos estilo a la parte inferior del formulario. 32 20. Visualizar los resultados en el navegador. El formulario debería lucir de la siguiente manera: 33 V. ANALISIS DE RESULTADOS 1. Agregar validaciones en el formulario del ejercicio2.html, hacer que los datos de fecha, edad y dirección sean datos requeridos por los formularios, además agregar los siguientes patrones de validación en los siguientes campos: Nacionalidad Solo letras: ^[a-zA-Z\s]+$ Edad Solo números: ^(?:\+|-)?\d+$ El instructor evaluará el desempeño de su trabajo dentro la clase. Estos ejercicios se evaluarán en la misma hora de clase. VI. EJERCICIOS COMPLEMENTARIOS 1. Presentar un ejemplo en el que se usen todas las pseudo-clases para formularios (:focus, :valid, :invalid; :required, :optional, :checked, in-range y :out-of-range). Puede basarse en la información mostrada en la introducción teórica de esta guía. El formulario debe usar al menos 10 tipos de campos y debe estilizarse de forma que los label y controles este alineados (no puede usar tablas conseguir la alineación). Se evaluará la estética del formulario presentado. 2. Investigar la forma de crear formularios con el framework bootstrap. Presente al menos dos ejemplos en los que apliquen los elementos investigados. Fecha de entrega: Semana de regreso de vacaciones. 34

Guia 7 - Universidad Don Bosco

Share

Rating

Date

Size

Views

Categories

Transcript

Select your language