1.
FORMULARIOS HTML
Los formularios HTML permiten colocar elementos interactivos en las páginas Web como
cajas de texto, botones, listas, entre otros, para facilitar acciones cuando se requiere que el
usuario ingrese datos o active controles, esta información o acción es enviada a una dirección
(URL) que puede ser un correo electrónico, un script dinámico Web como PHP, ASP, etc.
2.1 La etiqueta form
Los formularios se definen con la etiqueta <form> y </form>, que permite reunir varios
elementos de formulario (botones, campos de texto, botones de selección). Está etiqueta tiene
los siguientes atributos:
method: permite definir el método o forma como se enviará la información que
contiene el formulario o las respuestas de los usuarios. Se puede utilizar el método
post para enviar el valor de los datos al receptor de procesamiento almacenándolos
en el cuerpo del formulario, es decir, como parte de un objeto transparente al usuario
o el método get para enviar los datos incrustados en la dirección URL separados por
un signo de interrogación.
action: indica la dirección a la que se enviará la información (un script PHP o
dirección de correo electrónico ([Link]
enctype: es un atributo opcional que especifica cómo se codifican los datos del
formulario. El valor predeterminado (application/x-www-form-urlencoded) es el
único valor válido.
El formato para la etiqueta form es:
<form method="post" o "get" action="url" ... </form>
Se puede insertar cualquier elemento HTML en una etiqueta form (como texto, imágenes,
tablas, marcos y enlaces). Los controles que contiene el formulario pueden agregarse
utilizando los elementos <input>, <textarea> o <select>:
input: se utiliza para crear la mayoría de los elementos interactivos, entre los cuales
se pueden nombrar:
o checkbox: casillas de selección que pueden adoptar uno de dos estados:
checked (seleccionado) o unchecked (no seleccionado).
o hidden: es un campo oculto que en la página Web no se visualizará pero que
puede contener algún valor y éste puede ser enviado con el formulario.
o file: permite al usuario especificar la ruta de un archivo que se enviará con el
formulario. Los tipos de archivo que pueden ser enviados deben especificarse
en el atributo accept de la etiqueta form.
o image: es un botón de envío personalizado que aparece cuando se coloca una
imagen en la ubicación definida por el atributo src.
o password: es un campo de texto donde los caracteres escritos aparecen como
asteriscos.
o radio: es un control que permite al usuario elegir entre varias opciones. Cada
uno de estos botones debe tener el atributo name. Con el atributo checked se
puede definir cuál botón estará seleccionado en forma predeterminada.
o reset: es un botón de restauración que permite inicializar los valores de todos
los elementos en el formulario y restablecer sus valores predeterminados.
o submit: es un botón que permite enviar toda la información que contenga el
formulario. El título del botón se define con el atributo value.
o text: es un campo de texto donde se puede escribir una línea de texto. El
tamaño de la casilla puede definirse usando el atributo size y la extensión
máxima del texto con el atributo maxlength. Además se pueden utilizar los
atributos: placeholder, que permite un contenido predeterminado en los
campos de entrada de texto (<input type="text" placeholder="John Doe">);
autofocus coloca automáticamente el foco en un campo de formulario cuando
se carga una página. Tenga en cuenta que no debe tener más de un control de
formulario con el atributo autofocus en una misma página (<input type="text"
autofocus >); required permite a un campo validar la entrada de valores
(<input type="text" required >);.
o datalist: elemento que contiene una lista de opciones predefinida para un
elemento <input>.
o number: campo de entrada para números. Aparece como un campo de
entrada de texto con un control de número, que le permite aumentar o
disminuir su valor.
o range: control deslizante que le permite elegir entre un rango de valores.
o date: selector de fecha.
o time: campo de entrada de texto que contiene un separador para horas,
minutos y segundos.
o datetime: combina la funcionalidad de elegir una fecha y una hora.
o month: le permite elegir un mes, almacenado internamente un valor numérico
entre 1-12.
o week: le permite elegir una semana, almacenada internamente en el formato
2010-W37 (semana 37 del año 2010) y elegida mediante un selector de fecha.
o color: campo de entrada que muestra un selector de color.
o tel: campo de entrada para números telefónicos
o email: campo de entrada para correos electrónicos.
o url: campo de entrada para direcciones electrónicas.
o
El elemento input contiene los siguientes atributos:
type: se usa para especificar qué tipo de elemento se representa con la etiqueta
input.
name: sirve para definir el nombre del elemento interactivo.
id: sirve para declarar un identificador del elemento interactivo.
value: permite especificar un valor predeterminado para un elemento
interactivo.
textarea: se usa para definir un cuadro de texto con varias filas y columnas. Este
elemento tiene los siguientes atributos:
o cols: representa el número de caracteres que puede contener una línea.
o rows: representa el número de líneas.
o name: representa el nombre asociado con el cuadro de texto, que permite su
identificación.
o readonly: impide que el usuario modifique el texto predeterminado en el
campo.
o value: representa el valor predeterminado que se enviará desde el formulario
si el usuario no escribe nada en el cuadro de texto.
select: sirve para crear una lista desplegable de elementos (especificados por la
etiqueta option dentro de él). Los atributos de este elemento son:
o name: representa el nombre asociado con el elemento select, que permite su
identificación.
o disabled: crea una lista desactivada.
o size: representa el número de líneas de la lista (este valor puede ser más grande
que el número de elementos reales de la lista).
o multiple: permite al usuario seleccionar varios campos de la lista.
o selected: permite seleccionar un campo de la lista
2.2 Envío de datos del formulario
Cuando se envía la información de un formulario (haciendo clic en el botón de envío), los
datos del formulario se envían bajo la forma de pares nombre/valor, es decir conjuntos de
datos representados por el nombre del elemento del formulario, un signo igual ("=") y un
valor asociado. Estos pares nombre/valor se separan unos de otros mediante el símbolo de
unión ("&"). Por lo tanto, los datos que se envían se verán así:
campo1=valor1&campo2=valor2&campo3=valor3…..
Con el método get los datos se pueden enviar a una dirección electrónica. La URL podría ser
una cadena como la siguiente:
[Link]
2.3 Ejemplos con elementos interactivos
2.3.1 Campos de texto (text)
Crear una página Web llamada [Link] que permita digitar nombres y apellidos de un
usuario. El código HTML sería:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Formularios HTML5</title>
</head>
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
</table>
</form>
</body>
</html>
Se crearon dos campos de texto, el primero contiene los atributos de autofocus y required, el
segundo el atributo placeholder.
Figura 2.1 Página Web con campos de texto.
2.3.2 Botones de opción (radio)
Elaborar una página Web llamada [Link] que permita digitar nombres, apellidos, además
seleccionar el género de un usuario. El código HTML sería:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>Formularios HTML5</title>
</head>
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
</tr>
</table>
</form>
</body>
</html>
Se crearon dos objetos input de tipo radio para seleccionar el género del usuario.
Figura 2.2 Página Web con campos de opción.
2.3.3 Cuadros de verificación (checkbox)
Diseñar una página Web llamada [Link] que permita digitar nombres, apellidos,
además seleccionar el género y los deportes favoritos de un usuario. El código HTML sería:
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
<td align="left" width="150">Que deporte le gusta:</td>
<td>
<input type="checkbox" name="aficion1" value="afutbol">Futbol<br>
<input type="checkbox" name="aficion2" value="aatletismo">Atletismo<br>
<input type="checkbox" name="aficion3" value="anatacion">Natación<br>
<input type="checkbox" name="aficion4" value="abaloncesto">Baloncesto<br>
<input type="checkbox" name="aficion5" value="aninguno">Ninguno<br>
</td>
</tr>
</table>
</form>
</body>
Se crearon 5 cuadros de verificación (checkbox) para seleccionar los deportes favoritos.
Figura 2.3 Página Web con cuadros de verificación.
2.3.4 Listas (select)
Escribir una página Web llamada [Link] que permita digitar nombres, apellidos, además
seleccionar el género, los deportes favoritos, la profesión, la afición y el nivel de estudios de
un usuario. El código HTML sería:
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
<td align="left" width="150">Que deporte le gusta:</td>
<td>
<input type="checkbox" name="aficion1" value="afutbol">Futbol<br>
<input type="checkbox" name="aficion2" value="aatletismo">Atletismo<br>
<input type="checkbox" name="aficion3" value="anatacion">Natación<br>
<input type="checkbox" name="aficion4" value="abaloncesto">Baloncesto<br>
<input type="checkbox" name="aficion5" value="aninguno">Ninguno<br>
</td>
</tr>
<tr>
<td>Su afición principal</td><td>
<select name="aficion" size="4">
<option selected>Informatica</option>
<option >Cine</option>
<option >Deporte</option>
<option >Lectura</option>
<option >Musica</option>
<option >Videojuegos</option>
</select>
</td>
<td>Nivel de estudios:</td><td>
<select name="estudios" size="1">
<option selected>Primaria</option>
<option >Bachillerato</option>
<option >Pregrado</option>
<option >Posgrado</option>
</select>
</td>
</tr>
</table>
</form>
</body>
Se crearon dos listas con el elemento select. La primera lista tiene el atributo size con un
valor de 4 para crear una lista de selección y la segunda lista tiene el atributo size con un
valor de 1 para crear una lista desplegable.
Figura 2.4 Página Web con listas de selección.
2.3.5 Lista de datos (datalist) y campo numérico (number)
Realizar una página Web llamada [Link] que permita digitar nombres,
apellidos, además seleccionar el género, los deportes favoritos, la profesión, la afición, el
nivel de estudios, el idioma que domina y el nivel de este. El código HTML sería:
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
<td align="left" width="150">Que deporte le gusta:</td>
<td>
<input type="checkbox" name="aficion1" value="afutbol">Futbol<br>
<input type="checkbox" name="aficion2" value="aatletismo">Atletismo<br>
<input type="checkbox" name="aficion3" value="anatacion">Natación<br>
<input type="checkbox" name="aficion4" value="abaloncesto">Baloncesto<br>
<input type="checkbox" name="aficion5" value="aninguno">Ninguno<br>
</td>
</tr>
<tr>
<td>Su afición principal</td><td>
<select name="aficion" size="4">
<option selected>Informatica</option>
<option >Cine</option>
<option >Deporte</option>
<option >Lectura</option>
<option >Musica</option>
<option >Videojuegos</option>
</select>
</td>
<td>Nivel de estudios:</td><td>
<select name="estudios" size="1">
<option selected>Primaria</option>
<option >Bachillerato</option>
<option >Pregrado</option>
<option >Posgrado</option>
</select>
</td>
</tr>
<tr>
<td>Otro idioma que domine:</td>
<td><input list="idioma">
<datalist id="idioma">
<option value="Ingles">
<option value="Frances">
<option value="Japones">
<option value="Italiano">
<option value="Ninguno">
</datalist>
</td>
<td>Nivel de Ingles (Min=1, Max=10)</td>
<td><input type="number" name="numero" min="1" max="10" value="1" /></td>
</tr>
</table>
</form>
</body>
Inicialmente se crea un objeto input de tipo list llamado idioma, utilizando el elemento
datalist se crea los elementos de la lista y con el identificador id se asocia al elemento input.
Por otro lado, se crea un elemento input de tipo number el cual tiene como valor inicial 1 y
como valor final 10.
Figura 2.5 Página Web con datalist y number.
2.3.7 Fecha (date) y Colores (color)
Realizar una página Web llamada [Link] que permita digitar nombres, apellidos,
además seleccionar el género, los deportes favoritos, la profesión, la afición, el nivel de
estudios, el idioma que domina, el nivel de este, fecha de nacimiento y el color preferido. El
código HTML sería:
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
<td align="left" width="150">Que deporte le gusta:</td>
<td>
<input type="checkbox" name="aficion1" value="afutbol">Futbol<br>
<input type="checkbox" name="aficion2" value="aatletismo">Atletismo<br>
<input type="checkbox" name="aficion3" value="anatacion">Natación<br>
<input type="checkbox" name="aficion4" value="abaloncesto">Baloncesto<br>
<input type="checkbox" name="aficion5" value="aninguno">Ninguno<br>
</td>
</tr>
<tr>
<td>Su afición principal</td><td>
<select name="aficion" size="4">
<option selected>Informatica</option>
<option >Cine</option>
<option >Deporte</option>
<option >Lectura</option>
<option >Musica</option>
<option >Videojuegos</option>
</select>
</td>
<td>Nivel de estudios:</td><td>
<select name="estudios" size="1">
<option selected>Primaria</option>
<option >Bachillerato</option>
<option >Pregrado</option>
<option >Posgrado</option>
</select>
</td>
</tr>
<tr>
<td>Otro idioma que domine:</td>
<td><input list="idioma">
<datalist id="idioma">
<option value="Ingles">
<option value="Frances">
<option value="Japones">
<option value="Italiano">
<option value="Ninguno">
</datalist>
</td>
<td>Nivel de Ingles (Min=1, Max=10)</td>
<td><input type="number" name="numero" min="1" max="10" value="1" /></td>
</tr>
<tr>
<td>Fecha de nacimiento:</td>
<td><input type="date" name="fecha" /></td>
<td>Color preferido:</td>
<td><input type="color" name="colores" /></td>
</tr>
</table>
</form>
</body>
Inicialmente se crea un objeto input de tipo date llamado fecha, donde se obtiene un
calendario para que el usuario seleccione una fecha. Por otro lado, se crea un elemento input
de tipo color con el cuál se obtiene un selector de colores.
Figura 2.6 Página Web con date y color.
2.3.8 Área de texto (textarea)
Realizar una página Web llamada [Link] que permita digitar nombres, apellidos,
además seleccionar el género, los deportes favoritos, la profesión, la afición, el nivel de
estudios, el idioma que domina, el nivel de este, fecha de nacimiento, el color preferido y
escribir un comentario. El código HTML sería:
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
<td align="left" width="150">Que deporte le gusta:</td>
<td>
<input type="checkbox" name="aficion1" value="afutbol">Futbol<br>
<input type="checkbox" name="aficion2" value="aatletismo">Atletismo<br>
<input type="checkbox" name="aficion3" value="anatacion">Natación<br>
<input type="checkbox" name="aficion4" value="abaloncesto">Baloncesto<br>
<input type="checkbox" name="aficion5" value="aninguno">Ninguno<br>
</td>
</tr>
<tr>
<td>Su afición principal</td><td>
<select name="aficion" size="4">
<option selected>Informatica</option>
<option >Cine</option>
<option >Deporte</option>
<option >Lectura</option>
<option >Musica</option>
<option >Videojuegos</option>
</select>
</td>
<td>Nivel de estudios:</td><td>
<select name="estudios" size="1">
<option selected>Primaria</option>
<option >Bachillerato</option>
<option >Pregrado</option>
<option >Posgrado</option>
</select>
</td>
</tr>
<tr>
<td>Otro idioma que domine:</td>
<td><input list="idioma">
<datalist id="idioma">
<option value="Ingles">
<option value="Frances">
<option value="Japones">
<option value="Italiano">
<option value="Ninguno">
</datalist>
</td>
<td>Nivel de Ingles (Min=1, Max=10)</td>
<td><input type="number" name="numero" min="1" max="10" value="1" /></td>
</tr>
<tr>
<td>Fecha de nacimiento:</td>
<td><input type="date" name="fecha" /></td>
<td>Color preferido:</td>
<td><input type="color" name="colores" /></td>
</tr>
<tr>
<td >Escriba sus comentarios:</td>
<td colspan="3">
<textarea rows="5" cols="100" name="comentarios"></textarea>
</td>
</tr>
</table>
</form>
</body>
Se crea un objeto textarea llamado comentarios, con 5 filas (rows) y 100 columnas (cols).
Por otro lado, se utiliza el atributo colspan en la etiqueta <td> para colocar el área de texto
en 3 columnas.
Figura 2.7 Página Web con la etiqueta textarea.
2.3.9 Botones (submit, reset)
Elaborar una página Web llamada [Link] que permita digitar nombres, apellidos,
además seleccionar el género, los deportes favoritos, la profesión, la afición, el nivel de
estudios, el idioma que domina, el nivel de este, fecha de nacimiento, el color preferido y
escribir un comentario. Por otro lado, deberá contener los botones de enviar y restablecer los
valores. El código HTML sería:
<body>
<h3 align=center>REGISTRO DE INFORMACIÓN</h3>
<form name="formulario">
<table align="center" border=1>
<tr>
<td align="left" width="150">Dígite sus Nombres: </td>
<td align="left"><input type="text" size="30" autofocus required name="nombres">
</td><td align="left" width="150">Dígite sus Apellidos: </td>
<td align="left" ><input type="text" size="30" placeholder="Escriba sus apellidos"
name="apellidos"></td>
</tr>
<tr>
<td align="left" width="150">Género:</td>
<td>Hombre: <input type=radio name="genero" value="M"><br>
Mujer: <input type=radio name="genero" value="F"></td>
<td align="left" width="150">Que deporte le gusta:</td>
<td>
<input type="checkbox" name="aficion1" value="afutbol">Futbol<br>
<input type="checkbox" name="aficion2" value="aatletismo">Atletismo<br>
<input type="checkbox" name="aficion3" value="anatacion">Natación<br>
<input type="checkbox" name="aficion4" value="abaloncesto">Baloncesto<br>
<input type="checkbox" name="aficion5" value="aninguno">Ninguno<br>
</td>
</tr>
<tr>
<td>Su afición principal</td><td>
<select name="aficion" size="4">
<option selected>Informatica</option>
<option >Cine</option>
<option >Deporte</option>
<option >Lectura</option>
<option >Musica</option>
<option >Videojuegos</option>
</select>
</td>
<td>Nivel de estudios:</td><td>
<select name="estudios" size="1">
<option selected>Primaria</option>
<option >Bachillerato</option>
<option >Pregrado</option>
<option >Posgrado</option>
</select>
</td>
</tr>
<tr>
<td>Otro idioma que domine:</td>
<td><input list="idioma">
<datalist id="idioma">
<option value="Ingles">
<option value="Frances">
<option value="Japones">
<option value="Italiano">
<option value="Ninguno">
</datalist>
</td>
<td>Nivel de Ingles (Min=1, Max=10)</td>
<td><input type="number" name="numero" min="1" max="10" value="1" /></td>
</tr>
<tr>
<td>Fecha de nacimiento:</td>
<td><input type="date" name="fecha" /></td>
<td>Color preferido:</td>
<td><input type="color" name="colores" /></td>
</tr>
<tr>
<td >Escriba sus comentarios:</td>
<td colspan="3">
<textarea rows="5" cols="100" name="comentarios"></textarea>
</td>
</tr>
<tr>
<td colspan="4" align="center">
<input type="submit" name="enviar" value="Enviar">
<input type="reset" name="cancelar" value="Reestablecer">
</td>
</tr>
</table>
</form>
</body>
Se crea dos objetos input: submit para enviar la información que contiene un formulario y
reset para reestablecer todos los controles que contiene el formulario a su estado original.
Figura 2.8 Página Web con los botones submit y reset.