Ediciones ENI Editorial | líder en informática
Los formularios
La presencia de formularios en las páginas web
Los formularios forman parte integrante de los sitios web actuales. Muy habitualmente habrá tenido que rellenar un formulario, tanto para reservar un viaje como un concierto, inscribirse a una conferencia, pagar sus compras en línea o publicar un comentario en las páginas de las redes sociales, etc.
La integración de un formulario en una página web normalmente hace necesaria la integración de varias competencias. Podemos tener una ergonomía o un diseño de interfaz para la parte de experiencia de usuario, un integrador que crea el formulario en HTML/CSS y un desarrollador que diseña el script que va a recuperar los datos introducidos, los va a validar y los gestiona de manera segura para el tratamiento (reserva, compra, inscripción, etc.). El desarrollador utilizará el lenguaje servidor usado en el proyecto general del sitio web (PHP, Ruby, C#, Java, etc.).
Observe que puede enviar los datos del formulario por mail, con action="mailto:direcciones@mail.org". En este caso, no hay ningún tratamiento y los datos se envían y reciben en un formato de texto en bruto.
La estructura de los formularios
1. El formulario
Los formularios se insertan en el elemento <form>. En este elemento, encontraremos todos los campos útiles y los botones de validación y anulación.
El elemento <form> acepta varios atributos:
-
action: indica la URL del script que va a hacerse cargo de los datos introducidos en el formulario.
-
method: especifica si los datos se enviarán usando HTTP, con el método get o post.
-
name: asigna un nombre al formulario.
-
enctype: indica el tipo MIME de los datos enviados. El tipo MIME, de Multipurpose Internet Mail Extension, permite indicar la naturaleza y el formato de un documento enviado por medio de un formulario. El valor application/x-www-form-urlencoded es el valor por defecto. Estos datos se codifican como una pareja clave-valor. Para el envío del archivo, el tipo debe ser multipart/form-data, formato adaptado para los datos binarios.
El elemento <form> es de tipo block y solo tiene definido un valor por defecto para su margen superior.
form {
display: block;
margin-top: 0em;
} A continuación se indica un sencillo ejemplo:
<form method="post" action="mi-script.php"
enctype="application/x-www-form-urlencoded" name="inscripcion">
...
</form> 2. Las etiquetas
El elemento <label> permite asociar una etiqueta a un campo. Esta etiqueta se va a mostrar delante del campo y permite...
Los campos de texto
1. La introducción de texto
En la mayor parte de los formularios, tiene que rellenar la información en forma de texto. Los formularios ofrecen varios campos de entrada de texto. Puede tratarse de un campo de introducción de datos sencillos, como para indicar su nombre y apellidos; campos con varias líneas, como para dejar comentarios, por ejemplo; campos para rellenar una contraseña, etc.
2. Los campos de texto sencillos
El elemento <input> es el que permite rellenar un texto sencillo. El atributo type determina el tipo de campo que queremos. Para un campo de texto sencillo, el tipo es text: <input type="text">.
Para un sencillo ejemplo de campos de texto, vaya a la sección anterior, llamada Las etiquetas.
3. Los campos de texto para las contraseñas
Cuando el visitante necesita realizar una conexión a un espacio reservado, es más prudente que introduzca su contraseña, sin que los caracteres se muestren. En este caso, en el elemento <input>, el atributo type toma el valor password:
<p>
<label for="contrasenia">Su contraseña: </label>
<input type="password" id="contrasenia" name="contrasenia">
</p> A continuación se muestra la visualización obtenida, con una entrada en el campo:
4. Los campos de texto multilínea...
Las listas de valores
Para facilitar la elección de un valor entre otros, puede utilizar las listas desplegables con el elemento <select>. Los atributos son:
-
size: número de elementos mostrados. Si este atributo no se indica, los ítems de la lista se mostrarán en una lista desplegable. Si este atributo tiene un valor, indica el número de ítems mostrados en el número total de ítems. Los ítems no mostrados son accesibles utilizando la barra de desplazamiento.
-
multiple es un atributo booleano. Su presencia indica que el usuario puede seleccionar varios valores.
Cada ítem de la lista se ubica en un elemento <option> como elemento hijo del elemento <select>.
A continuación se muestran los atributos utilizables:
-
value es el dato que se enviará al script.
-
selected es un atributo booleano que indica que el ítem está preseleccionado.
A continuación se muestra un ejemplo con una lista desplegable:
<p>
<label for="ciudad">Seleccione el destino:</label>
<br>
<select id="ciudad">
<option value="venecia">Venecia</option>
<option value="florencia">Florencia</option>
<option value="roma">Roma</option> ...Los botones de radio de selección única
En las interfaces de las aplicaciones y en los formularios, los botones de radio son sinónimo de selección única. El usuario solo podrá seleccionar una opción. Con el elemento <input>, insertamos botones de radio.
A continuación se muestran los atributos utilizables:
-
name permite definir el grupo de botones de radio de entre los cuales los visitantes deberán elegir solo uno. El valor de este atributo debe ser el mismo para todos los botones de radio del grupo.
-
value determina el valor del botón de radio seleccionado, que se envía al script.
-
checked especifica si un botón de radio se debe seleccionar durante la carga de la página.
A continuación se muestra un sencillo ejemplo de solicitud de estado civil:
<fieldset>
<legend>Su estado civil: </legend>
<input type="radio" name="estado_civil" value="señora">Señora<br>
<input type="radio" name="estado_civil"
value="señorita">Señorita<br>
<input type="radio" name="estado_civil" value="señor">Señor
</fieldset> A continuación se muestra la visualización obtenida:
Las casillas de selección múltiple
En las interfaces de las aplicaciones y en los formularios, las casillas de selección se utilizan para tener una selección múltiple. De nuevo, es necesario utilizar el elemento <input> con type="checkbox". Los atributos disponibles son los mismos que con los botones de radio, sin que sea obligatorio que el atributo name tenga el mismo valor porque queremos una selección múltiple.
A continuación se muestra un sencillo ejemplo:
<p>
<p>Seleccione una o varias 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> A continuación se muestra la visualización obtenida:
Otros tipos de campos con <input>
Acabamos de ver que el elemento <input> permite insertar campos variados con los tipos text, password, radio y checkbox. Pero existen muchos otros tipos de campo:
-
hidden oculta un campo.
-
image inserta una imagen que se puede pulsar.
-
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.
-
date, time, datetime, datetime-local, month, week permite especificar que el contenido esperado es de tipo calendario.
-
number especifica que el contenido debe ser un valor numérico.
-
range permite indicar que el valor esperado es un valor numérico comprendido entre un intervalo de valores y que se indica con ayuda de un cursor sobre una regleta.
-
color permite mostrar un selector de color.
-
search especifica que el contenido introducido se utiliza como criterio en una búsqueda.
Las ayudas a la introducción de datos
1. Los objetivos
Los formularios no son siempre un elemento de interfaz fácil de entender para los internautas. Para ayudarles a utilizar bien los campos, tenemos a nuestra disposición toda una serie de ayudas a la introducción de datos.
2. La indicación inicial de la entrada de los datos
El atributo placeholder permite mostrar en el campo una ayuda a la introducción de datos, que desaparece cuando el usuario escribe los primeros caracteres. Por ejemplo, queremos especificar que el apellido que se debe introducir se corresponde con el que se indica en el carnet de identidad. A continuación se muestra la sintaxis que hay que utilizar:
<p>
<label for="apellido">Su apellido: </label>
<input type="text" id="apellido" name="apellido" size="30"
placeholder="Apellido de su carnet de identidad">
</p> A continuación se muestra la visualización obtenida, antes de la introducción de datos:
A continuación se muestra la visualización obtenida después de escribir los primeros caracteres:
También puede utilizar placeholder para dar un ejemplo de la entrada esperada:
<p>
<label for="cp">Su código postal: </label>
<input type="text" id="cp" name="codigo-postal"
placeholder="Ex.: 44600">
</p> A continuación se muestra la visualización obtenida:
3. Activar un campo
El atributo...
Los botones de acción
Cuando los visitantes hayan introducido todos los campos del formulario, es necesario enviarlo al servidor con el script para realizar el tratamiento. Además, siempre es necesario dar la posibilidad de anular todas entradas hechas para poder empezar de nuevo a rellenar el formulario.
Para insertar estos dos botones de acción, vamos a utilizar el elemento <input>. El atributo type es el que especifica la acción que se ha de desencadenar:
-
El tipo type="submit" desencadena el envío del formulario al servidor para su tratamiento por medio del script.
-
El tipo type="reset" permite eliminar todas las entradas realizadas.
A continuación se muestra un sencillo ejemplo:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<p>Rellene este formulario:</p>
<form method="post" action="mi-script.php"
enctype="application/x-www-form-urlencoded" name="inscripcion">
<p>
<label for="nombre">Su nombre: </label>
<input...Un ejemplo completo de formulario
1. El código completo del formulario
Para terminar este capítulo, vamos a crear un formulario completo con varios tipos de campos. A continuación se muestra el código utilizado:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Mi página web</title>
</head>
<body>
<p>Rellene este formulario:</p>
<form method="post" action="mi-script.php"
enctype="application/x-www-form-urlencoded" name="inscripcion">
<fieldset>
<legend>Su estado civil: </legend>
<input type="radio" name="estado_civil"
value="señora">Señora<br>
<input type="radio" name="estado_civil"
value="señorita">Señorita<br>
<input type="radio" name="estado_civil"
value="señor">Señor
</fieldset>
<p>
<label for="nombre">Su nombre: </label>
<input type="text" id="nombre" name="nombre">
</p>
<p>
<label for="nombre">Su apellido: </label>
<input type="text" id="apellido" name="apellido">
</p>
<p>
<label for="age">Su edad: </label>
<input type="number" id="edad" name="edad"> ...
