Ediciones ENI Editorial | líder en informática
Los formularios
Objetivos
Los formularios son una parte integral de los sitios web actuales. Todos los internautas han tenido la experiencia de rellenar un formulario, ya sea para reservar un viaje o una entrada para un concierto, inscribirse en una conferencia, pagar compras online o publicar un comentario en páginas de redes sociales... Los formularios se utilizan a diario.
La integración de los formularios
La integración de un formulario en una página web suele requerir varias competencias. Un especialista en usabilidad o un diseñador de interfaces se encarga de la parte de experiencia de usuario; un maquetador crea el formulario con HTML y CSS, y un desarrollador diseña el script que recogerá los datos introducidos, los validará y los gestionará de forma segura para su posterior tratamiento (reserva, compra, inscripción, etc.). El desarrollador utilizará el lenguaje del lado del servidor empleado en el proyecto general del sitio web (PHP, JavaScript, Ruby, C#, Java...).
Cabe destacar que los datos de un formulario se pueden enviar por correo electrónico, con action="mailto:direccion@mail.org". En este caso, no se realiza ningún tratamiento y los datos se envían y reciben en formato de texto sin formato.
La estructura de los formularios
1. El formulario
Los formularios se insertan en el elemento <form>. Dentro de este elemento, se colocan todos los campos útiles y los botones de validación y cancelación.
El elemento <form> acepta varios atributos:
-
action: especifica la URL del script que manejará los datos introducidos en el formulario.
-
method: especifica si los datos se enviarán a través de HTTP, con el método get o post.
-
name: asigna un nombre al formulario.
-
enctype: especifica el tipo MIME de los datos que se envían. El tipo MIME, de Multipurpose Internet Mail Extension, se utiliza para indicar la naturaleza y el formato de un documento enviado a través de un formulario. El valor por defecto es application/x-www-form-urlencoded. Estos datos se codifican en forma de pares clave-valor. Para enviar archivos, el tipo debe ser multipart/form-data, que es un formato adecuado para datos binarios.
He aquí un ejemplo sencillo de cómo usar el elemento <form> con sus atributos principales:
<form method="post" action="mi-script.php"
enctype="application/x-www-form-urlencoded" name="registration">
...
</form> 2. Las etiquetas
El elemento <label> permite asociar una etiqueta a un campo. Esta etiqueta se mostrará delante del campo y servirá para nombrarlo. Esto facilitará...
Los campos de texto
1. Introducir texto
En la mayoría de los formularios, los datos se introducen en forma de texto. Existen varios tipos de campos para introducir texto. Se puede escribir texto simple -por ejemplo, para indicar el nombre y los apellidos-, utilizar campos con varias líneas para escribir comentarios o usar campos específicos para introducir una contraseña.
2. Campos de texto simples
El elemento <input> permite introducir texto simple. El atributo type determina el tipo de campo deseado. Para un campo de texto simple, el tipo es text: <input type="text">. Para obtener un ejemplo básico de campos de texto, consulte el apartado anterior, Las etiquetas.
3. Campos de texto para contraseñas
Cuando el visitante necesita acceder a un área privada, es más seguro que introduzca su contraseña sin que se muestren los caracteres. En este caso, en el elemento <input>, el atributo type se establece en password:
<p>
<label for="contrasena">Su contraseña: </label>
<input type="password" id="contrasena" name="contrasena">
</p> Esta la pantalla resultante, con un texto introducido en el campo:
4. Campos de texto multilínea
Para ofrecer a los visitantes un campo de texto de varias líneas, se utiliza...
las listas de valores
Para facilitar la elección de un valor entre varios posibles, es posible utilizar listas desplegables con el elemento <select>. Sus atributos son:
-
size: número de elementos mostrados. Si no se especifica este atributo, los elementos de la lista se muestran como una lista desplegable. Si este atributo tiene un valor, indica el número de elementos que se muestran respecto al número total de elementos. Se puede acceder a los elementos que no se muestran mediante la barra de desplazamiento.
-
multiple es un atributo booleano. Su presencia indica que el usuario puede seleccionar varios valores.
Cada elemento de la lista se coloca en un elemento <option>, que debe ser hijo del elemento <select>.
Estos son algunos atributos utilizables:
-
value es el dato que se enviará al script.
-
selected es un atributo booleano que indica que el elemento está preseleccionado.
He aquí un ejemplo con una lista desplegable:
<p>
<label for="ciudad">Escoja destino:</label>
<br>
<select id="ciudad">
<option value="venecia">Venecia</option>
<option value="florencia">Florencia</option>
<option...Los botones de opción
En las interfaces de aplicación y los formularios, los botones de opción se utilizan para realizar una selección única. El usuario podrá seleccionar solo una opción. Estos botones se insertan con el elemento <input>.
Estos son algunos atributos que pueden usar:
-
name permite definir el grupo de botones de opción entre los que el visitante podrá elegir uno y solo uno. El valor de este atributo debe ser el mismo para todos los botones de opción del grupo.
-
value determina el valor del botón de opción seleccionado que se envía al script.
-
checked especifica si un botón de opción debe estar seleccionado cuando se carga la página.
He aquí un ejemplo sencillo para seleccionar el tratamiento:
<fieldset>
<legend>Tratamiento: </legend>
<input type="radio" name="tratamiento" value="senora">Señora<br>
<input type="radio" name="tratamiento" value="senorita">Señorita<br>
<input type="radio" name="tratamiento" value="senor">Señor
</fieldset> Y esta es la pantalla resultante:
Las casillas de verificación
En las interfaces de aplicaciones y en los formularios, las casillas de verificación permiten realizar selecciones múltiples. Nuevamente, es el elemento <input> el que debe usarse, pero con type="checkbox". Los atributos disponibles son los mismos que en los botones de opción, aunque no es obligatorio que el atributo name tenga el mismo valor, ya que se trata de una selección múltiple.
He aquí un ejemplo sencillo:
<p>Elija una o más ciudades:</p>
<input type="checkbox" name="venecia" value="venecia">Venecia<br>
<input type="checkbox" name="florencia" value="florencia"
checked>Florencia<br>
<input type="checkbox" name="roma" value="roma">Roma<br>
<input type="checkbox" name="verona" value="verona">Verona
</p> Y esta es la pantalla resultante:
Otros tipos de campos
El elemento <input> permite insertar diversos campos con los tipos text, password, radio y checkbox. Pero hay muchos otros tipos de campos:
-
hidden oculta un campo.
-
image inserta una imagen en la que se puede hacer clic.
-
file permite enviar un archivo a través del formulario.
-
tel especifica que el contenido introducido debe ser un número de teléfono.
-
url especifica que el contenido introducido debe ser una URL.
-
email indica que el contenido introducido debe ser una dirección de correo electrónico.
-
date, time, datetime, datetime-local, month, week especifica que el contenido esperado es de tipo calendario.
-
number especifica que el contenido debe ser un valor numérico.
-
range permite indicar que se espera un valor numérico dentro de un intervalo, seleccionado mediante un control deslizante.
-
color permite mostrar un selector de color.
-
search especifica que el contenido introducido se utiliza como criterio en una búsqueda.
Ayudas para la introducción de datos
1. Objetivos
Los formularios no siempre son el elemento de interfaz más fácil de entender para los usuarios de Internet. Para ayudarles a utilizar correctamente los campos de entrada y de selección, existen muchas ayudas para la introducción de datos.
2. Instrucciones para la introducción de datos
El atributo placeholder permite mostrar dentro del campo un texto de ayuda que desaparece en cuanto el usuario escribe los primeros caracteres. Por ejemplo, se puede indicar que el nombre que debe introducirse debe coincidir con el que figura en el documento de identidad. Esta es la sintaxis que se debe usar:
<p>
<label for="nombre">Su nombre: </label>
<input type="text" id="nombre" name="nombre" size="30"
placeholder="Nombre que figura en su DNI">
</p> Esta es la pantalla que se obtiene antes de escribir:
Y esta, la visualización obtenida después de introducir los primeros caracteres:
También es posible usar placeholder para dar un ejemplo de entrada esperada:
<p>
<label for="cp">Su código postal: </label>
<input type="text" id="cp" name="codigo-postal" placeholder="Ej.:...Los botones de acción
Cuando los visitantes hayan rellenado todos los campos del formulario, debe enviarse al servidor mediante el script que se encargará realizar el procesamiento. Además, siempre debe ofrecerse la posibilidad de cancelar todas las entradas realizadas para comenzar a escribir el formulario nuevamente.
Para insertar estos dos botones de acción, se utiliza el elemento <input>. Es el atributo type el que indica la acción que debe ejecutarse:
-
El tipo type="submit" activa el envío del formulario al servidor para su procesamiento, a través del script.
-
El tipo type="reset" permite eliminar todas las entradas realizadas.
He aquí un ejemplo sencillo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<p>Rellene el formulario:</p>
<form method="post" action="mi-script.php"
enctype="application/x-www-form-urlencoded" name="inscripcion">
<p>
<label for="nombre">Su nombre: </label>
...Un ejemplo completo de formulario
1. El código completo del formulario
Para finalizar este capítulo, a continuación se muestra un formulario completo con varios tipos de campos. Este es el código utilizado:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<p>Rellene el formulario:</p>
<form method="post" action="mi-script.php"
enctype="application/x-www-form-urlencoded" name="inscripcion">
<fieldset>
<legend>Tratamiento:</legend>
<input type="radio" name="tratamiento" value="senora">Señora<br>
<input type="radio" name="tratamiento"
value="senorita">Señorita<br>
<input type="radio" name="tratamiento" value="senor">Señor
</fieldset>
<p>
<label for="nombre">Su nombre:</label>
<input type="text" id="nombre" name="nombre">
</p>
<p>
<label for="apellidos">Sus apellidos:</label>
<input type="text" id="apellidos" name="apellidos">
</p>
<p>
<label for="edad">Su edad:</label>
<input type="number" id="edad" name="edad">
</p>
...