Guia 7 - Universidad Don Bosco

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 <INPUT> y de las etiquetas de
controles de selección <SELECT>.
4. Comprenda los dos métodos de envío de formularios.
5. Conozca los nuevos controles y atributos de HTML 5 para los formularios
II. INTRODUCCION TEORICA
FORMULARIOS EN HTML
La Web 2.0 está completamente enfocada en el usuario. Y cuando el usuario es el centro de atención, todo está
relacionado con interfaces, en cómo hacerlas más intuitivas, más naturales, más prácticas, y por supuesto más
atractivas.
Los formularios web son la interface más importante de todas, permiten a los usuarios insertar datos, tomar
decisiones, comunicar información y cambiar el comportamiento de una aplicación. Durante los últimos años,
códigos personalizados y librerías fueron creados para procesar formularios en el ordenador del usuario.
HTML5 vuelve a estas funciones estándar agregando nuevos atributos, elementos y una API completa. Ahora la
capacidad de procesamiento de información insertada en formularios en tiempo real ha sido incorporada en
los navegadores y completamente estandarizada.
LA ETIQUETA FORM
La etiqueta <form>, permite definir un formulario de datos, utilizados para traspasar datos al servidor.
Un formulario puede contener a su vez, elementos de entrada como pueden ser campos de texto, casillas de
verificación, botones de radio, botones de envió, listas de selección, áreas de texto, etc.
Los formularios permiten que el usuario pueda introducir datos en el documento web, para que
posteriormente estos datos sean enviados y tratados por el servidor, para almacenarlos en una base de datos,
interactuar con el usuario, geolocalización, etc.
Los formularios en HTML no han cambiado mucho. La estructura sigue siendo la misma, pero HTML5 ha
agregado nuevos elementos, tipos de campo y atributos para expandirlos tanto como sea necesario y proveer
así las funciones actualmente implementadas en aplicaciones web.
1 / 34
ATRIBUTOS DE LA ETIQUETA FORM
Atributo action
Este atributo permite especificar donde han de ser enviado los datos del formulario, cuando este es enviado.
Normalmente suele ser un documento web, escrito en un lenguaje de programación de servidor, el cual se
encarga de procesar los datos. También puede ser que los datos sean enviados a una dirección de correo
electrónico.
El siguiente ejemplo muestra el uso del atributo en un documento web, enviando los datos a un archivo php
que encargaría de procesar la información del formulario.
<form action="recepcion.php">
<label>Nombre</label>
<input type="text" name="nombre">
<input type="submit" name="enviar" value="enviar">
</form>
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.
<form action="envio_datos.php" method="get" name="Formulario1">
Nombre: <input type="text" name="nombre">
<br>
Dirección: <input type="text" name="direccion">
2
<br>
<input type="submit" value="enviar" name="enviar">
</form>
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.
<form action="envio_datos.php" method="get" name="Formulario1" novalidate>
Nombre: <input type="text" name="nombre" required>
<br>
Dirección: <input type="text" name="direccion">
<br>
<input type="submit" value="enviar" name="enviar">
</form>
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:










<INPUT>
<LABEL>
<TEXTAREA>
<SELECT>
<OPTION>
<OPTGROUP>
<DETAILS>
<BUTTON>
<FIELDSET>
<LEGENT>
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.
3
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>
4
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>
7
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.
8

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.
10
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> … </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:
<form action="prueba.php">
<label for="descripcion">Descripcion</label><br>
<textarea name="descripcion" id="descripcion" cols="30"
rows="10">
Mi nombre es Juan Perez
</textarea><br>
<input type="submit" value="Aceptar">
</form>
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
<input>, 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 <input> y <label> 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:
<form action="registro.php" method="post">
<fieldset>
<legend>Registro del alumno</legend>
<label for="nombre">Nombres:</label>
<input type="text" name="nombre" id="nombre">
<label for="apellido">Apellidos:</label>
<input type="text" name="apellido" id="apellido">
<label for="carnet">Carnet:</label>
<input type="text" name="carnet" id="carnet">
<input type="submit" value="Registrarme">
</fieldset>
</form>
Aprovechando los elementos <label>, 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 <label> 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 <label> alineada a la izquierda y el
campo del formulario a la derecha de cada <label>, 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 (<div> que encierre a cada uno de los campos
del formulario (<label> y <input>). 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 <div>:
<form action="registro.php" method="post">
<fieldset>
<legend>Registro del alumno</legend>
<div>
<label for="nombre">Nombres:</label>
<input type="text" name="nombre" id="nombre">
</div>
<div>
<label for="apellido">Apellidos:</label>
<input type="text" name="apellido" id="apellido">
</div>
<div>
<label for="carnet">Carnet:</label>
<input type="text" name="carnet" id="carnet">
</div>
<input type="submit" value="Registrarme">
</fieldset>
</form>
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.
<div>
<input type="checkbox" name="terminos" id="terminos">
<span>Acepto los términos</span>
</div>
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.
<div>
<label for="edad">Edad: </label>
<input type="number" min="18" max="30" step="2"
</div>
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".
<div>
<label for="nombre">Nombres:</label>
<input type="text" name="nombre" id="nombre"
required>
</div>
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 <input>, se puede
extender la información mostrada.
<div>
<label for="nombre">Nombres:</label>
<input type="text" name="nombre" id="nombre“
required title="Debes ingresar tu nombre">
</div>
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:
<input type="email" name="email">
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:
<input type="text" name="carnet" id="carnet"
required pattern="[A-Za-z]{2}[0-9]{6}" title="2
letras y 6 digitos">
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”
<input type="text" required pattern="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.
<input type="text" required pattern="[a-zA-Z]{5,10}">
3. Comprobar si el valor del campo de texto solo contienen los caracteres a ó b
<input type="text" required pattern="(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
<input type=image src="img/user.png" class="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
<input type="text" id="nombre" value="" pattern="^[a-zA-Z\s]+$"
title="Solo se acepta letras" class="control" placeholder="Nombre"
required /><br>
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
<p class="terminos">Acepto Términos, Condiciones y
Política de Privacidad</p>
button
Identificador: botón
Tipo: submit
<button id="boton" type="submit">Crear Cuenta</button>
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 <head> 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