Formularios en HTML – Alberto Pedrero Esteban

Introducción

Un formulario es el un mecanismo principal de interacción para recoger información proporcionada por el usuario. A través de una serie de controles se podrán recoger datos de diferente naturaleza que, posteriormente, serán procesados por el servidor. El usuario completará la información solicitada a través de los diferentes controles y los enviará (mediante un botón) a un agente que lo procese (normalmente algún tipo de código ejecutado desde un script en el servidor, aunque también es posible enviar los datos simplemente por correo electrónico).

Los formularios se especifican mediante la etiqueta <form> que actuará como contenedora de las etiquetas de los distintos controles del formulario. A través de distintos atributos se especificará la manera en la que se envían los datos al servidor, la URL del programa o script que procesará los datos, etc.

Un formulario puede contener diferentes controles o, incluso, otros elementos de bloque como encabezados, párrafos, listas, … Sin embargo, no es posible incluir un formulario dentro de otro formulario.

Atributos básicos de un formulario

El atributo ‘action‘ permite especificar la URL del scrip que se ejecutará en el servidor y que procesará los datos del formulario cuando éstos sean enviados desde el navegador del usuario una vez que el usuario pulse el botón ‘submit‘.

El atributo ‘method‘ especifica la manera en la que se enviará la información al servidor. Los datos se envían en forma de pares nombre/valor (nombre del elemento del formulario, un signo ‘=’ y el valor asociado. Cada par nombre/valor se separa del resto mediante el símbolo ‘&’. Los valores posibles para el atributo son:

GET: se trata del método por defecto. Los datos son enviados anexados a la URL del servidor, separados mediante caracteres específicos (?), en forma de texto plano. Esto los hace legibles a cualquier persona, por lo que no es adecuado para envío de datos confidenciales. Tampoco puede utilizarse este método si lo que se desea es enviar el contenido de un fichero.
POST: los datos se envían mediante una solicitud diferente al servidor, en la que se incluyen cabeceras específicas para el reconocimiento de los datos. Se trata del método más adecuado para enviar datos que contienen información confidencial (información personal o números de cuentas bancarias) y para enviar grandes cantidades de datos.

Controles

Los usuarios proporcionarán los datos de entrada a través de controles. El tipo de control definirá el tipo de información que se puede introducir: texto, selección de un fichero, opción de menú, número de teléfono, correo electrónico, … Para enviar datos al servidor y que éste pueda procesarlos es necesario establecer un nombre para cada control, de manera que se pueda identificar la variable que contendrá el valor introducido por el usuario a través del control del formulario. Así, el formulario enviará un par nombre/valor para cada uno de los controles del formulario. En el ejemplo que sigue los datos introducidos por el usuario quedarán almacenados en la variable «apellidos«.

<input type=»text» name=»apellidos»>

Etiquetas

Las etiquetas se utilizan para especificar rótulos de controles, estableciendo una relación entre un control y una porción de texto (o «título» para el control). Para especificar etiquetas se utiliza el elemento «<label>«. La asociación entre una etiqueta y el control correspondiente se realiza mediante el atributo «for«. Es obligatorio que el valor del atributo «id» del control coincida con el valor especificado a través del atributo «for«.

<label for="nombre">Nombre</label> <input type="text" id="nombre">

La asociación entre la etiqueta y el control puede ser implícita, es decir, incluyendo el control dentro de la etiqueta label.

<label for="nombre"> Nombre <input type="text" name="nombre"> </label>

Entradas de texto

A la hora de introducir datos textuales y/o numéricos, HTML proporciona los siguientes controles de entrada:

Entrada de línea:

Permite introducir datos a través de una caja de texto (de una sola línea). Se especifica mediante la etiqueta <input> y el atributo type=»text». El atributo ‘maxlength‘ permite especificar la longitud máxima de la cadena de texto.

Entrada de contraseña:

Funciona de manera similar a la entrada de línea con la diferencia de que los caracteres introducidos no son mostrados en pantalla, apareciendo en su lugar puntos (•) o asteriscos (*). Se especifica mediante la etiqueta <input> y el atributo type=»password». Es importante señalar que los datos no son encriptados de ninguna manera.

Entrada multilínea:

Permite introducir textos de más de una línea. Se especifica mediante la etiqueta <textarea>.

Los atributos ‘rows’ y ‘col’ permiten especificar las dimensiones (número de filas y columnas) del área de texto (esto no limita el número máximo de caracteres a escribir, de manera que si éste es mayor que el número de filas y columnas aparecerá una barra de desplazamiento vertical). En cualquier caso, es aconsejable establecer estos valores a través de CSS.
El atributo ‘readonly’ impide que el usuario modifique el valor de texto predeterminado para ese campo.
El atributo «wrap«; en el caso de los navegadores que lo interpretan correctamente (algunos no lo hacen todavía, ignorándolo) hace que el cursor se desplace automáticamente hacia abajo cuando el texto introducido supere los márgenes laterales, sin esperar a que el usuario presione la tecla enter (wrap=»hard»). Si el valor del atributo es «soft» (wrap=»soft»), el texto no superará los márgenes laterales, pero será procesado como una línea larga de caracteres.

Cuadro de búsqueda:

Tipo nuevo de HTML5. Se especifica mediante el atributo type=»search»

Dirección de correo electrónico:

También es un tipo nuevo de HTML5. Se especifica mediante el atributo type=»email».

Teléfono:

También es un tipo nuevo de HTML5. Se especifica mediante el atributo type=»tel».

url:

También es un tipo nuevo de HTML5. Se especifica mediante el atributo type=»url».

Algunos navegadores de dispositivos móviles proporcionan teclados específicos para algunos tipos de entrada (dirección de correo, teléfono, url). De esta manera, se incluyen directamente en el teclado caracteres como la «@», números o el carácter «/» y teclas «.com».

Se puede establecer un valor previo en las entradas de texto a partir del atributo value. Sin embargo, el usuario deberá borrar previamente este contenido si desea introducir otro diferente. Sin embargo, la versión 5 de HTML proporciona el atributo placelhoder, con el que es posible especificar un texto de ayuda que permita dar una idea sobre el tipo/formato/valor esperado del contenido del campo de texto. La ventaja de este atributo es que una vez que el campo del formulario recibe el foco, el texto especificado por este atributo desaparece.

El atributo «required» permite especificar que un campo es obligatorio, de manera que no se permitirá el envío del formulario mientras el campo esté vacío.

El atributo «autocomplete» permite que el campo se rellene en base a los textos introducidos anteriormente por el usuario. Es posible aplicarlo a un campo concreto o a todo el formulario.

El atributo «autofocus» oblica a situar el cursos dentro de un campo una vez se carga la página.

Entrada de texto datalist

HTML5 ofrece la etiqueta <datalist> que ayuda a automatizar la entrada de datos generando una lista desplegable de opciones para que el usuario realice su elección. A medida que el usuario introduzca caracteres el navegador los reconocerá para autocompletar la información. Es posible que el usuario introduzca una entrada que no aparezca en la lista propuesta.

<label for="pais"> Selecciona el país de origen</label> <input type="text" name="pais" id="pais" list="lista_paises"> <datalist id="lista_paises"> <option value="Alemania" /> <option value="España" /> <option value="Inglaterra" /> <option value="Suecia" /> <option value="Suiza" /> </datalist>

Entradas numéricas

Existen dos tipos especiales para la introducción de datos numéricos: number y range. En caso de no ser soportados por el navegador, se mostrarán dos entradas de texto normal. La diferencia está en que el tipo range muestra un «slider« o barra de deslizamiento para la selección del valor numérico dentro de un rango posible. Los atributos opcionales min y max permiten en ambos casos seleccionar los valores extremos permitidos (puede utilizarse sólamente uno de ellos). El atributo step permite establecer opcionalmente el incremento del valor numérico.

<label> Número de pasajeros <input type="number" name="pasajeros" min="1" max="4"> </label>

<label> Grado de satisfacción del viaje <input type="range" name="satisfaccion" min="0" max="10"> </label>

Botones de envío y borrado, imagen y contenido

Un botón es un dispositivo primordialmente diseñado para realizar una acción con el formulario que lo contenga. Los botones de envío («submit») provocan el envío de los campos del formulario en el que se encuentra el botón al servidor para su procesamiento. Un botón de borrado («reset») borra las modificaciones realizadas por el usuario, de manera que el formulario queda tal cual estaba cuando se cargó la página que lo contiene (no sólo se borran las entradas del usuario, sino que se restauran los valores por defecto que pudieran tener algunos campos). El valor de texto que aparece dentro de los botones puede modificarse a través del atributo «value«. De esta forma, el siguiente código:

<input type="submit"> <input type="reset" value="Borrar datos del formulario">

Producirá el siguiente resultado:

Mediante el atributo type=»image» se pueden crear botones de imagen, idénticos al tipo «submit» en cuanto a funcionamiento pero con la diferencia de que reemplaza el texto por la imagen seleccionada. Para facilitar la accesibilidad es importante incluir un valor correcto dentro del atributo «alt«.

La etiqueta <button> también permite crear botones, aunque con más posibilidades en cuanto al control de la representación del botón y su contenido. De esta forma, es posible crear lo que se denomina «botones de imagen», que funcionan de manera similar a los botones de envío con la única diferencia que los de imagen son representados visualmente con la imagen especificada en el atributo «src«. Otra particularidad es que a través de éstos se pueden enviar las coordenadas donde ha ocurrido el click cuando el formulario fue enviado, tomadas desde la esquina superior izquierda del botón (por ejemplo, para un botón de imagen llamado «boton1» las coordenadas serán enviadas en la forma «boton1.x» y «boton1.y»).

Elementos de selección y verificación

A la hora de elegir entre diferentes opciones, los elementos de elección y verificación son los controles más apropiados para ello. La principal diferencia entre ellos está en la posibilidad de elgir sólo una opción (radio buttons) o una o más opciones de una lista (checkbox).

Mediante el elemento input y el tipo «radio» (<input type=»radio»>) el usuario puede elegir una opción de una lista de elemento. Dado que sólo es posible seleccionar un elemento de entre los varios posibles, es aconsejable utilizarlo cuando los elementos son excluyentes (hombre-mujer, sí-no, …). El atributo «name» será el mismo para las distintas opciones que conformen el grupo de opciones, siendo el atributo «value» el que determinará el valor final de la elección realizada por el usuario. La selección de una opción impicará la deselección de las restantes.

<p>Introduzca edad</p> <ol> <li><input type="radio" name="edad" value="menos18"> Menos de 18</li> <li><input type="radio" name="edad" value="18_21" checked="checked"> De 18 a 21</li> <li><input type="radio" name="edad" value="22-25"> De 22 a 25</li> <li><input type="radio" name="edad" value="mas25"> Más de 25</li> </ol>

Los checkbox o casillas de verificación permiten mostrar una lista de elementos al usuario y que éste pueda elegir uno o varios de entre estos elementos. Para ello se utiliza el elemento input con el tipo checkbox: <input type=»checkbox»>. Como se ha indicado anteriormente, la diferencia principal frente a un radio button es que en un checkbox se puede seleccionar más de un elemento.

<p>Selecciona temas de interés</p> <ol> <li><input type="checkbox" name="intereses" value="deportes"> Deportes</li> <li><input type="checkbox" name="intereses" value="musica" checked="checked"> Música</li> <li><input type="checkbox" name="intereses" value="cine"> Cine</li> <li><input type="checkbox" name="intereses" value="pintura"> Pintura</li> </ol>

Es posible utilizar un checkbox de manera individual en situaciones donde simplemente el usuario necesite activar o no una casilla para una opción concreta.

<p><input type="checkbox" name="avisos" value="si"> Pulsa si deseas que te mandemos un email periódicamente con las novedades.</p>

En ambos controles, con el parámetro checked se le indica al navegador cuál de las opciones aparece marcada por defecto (es posible utilizar únicamente el parámetro checked, si bien se puede seguir una sintaxis XHTML y escribir checked=»checked»).

Menús/Listas

Los menús y las listas constituyen otra forma de elegir una opción concreta entre una serie de valores posibles. La etiqueta <select> sirve para crear una lista desplegable de elementos (especificados por las etiquetas <option> dentro de ella) de los que el usuario tendrá que seleccionar uno o varios. Los atributos de esta etiqueta son:

name: representa el nombre asociado al conjunto de valores, que permite su identificación en el par nombre/valor.
disabled: crea un lista desactivada (aparecerá atenuada).
size: representa el número de líneas de la lista (puede ser más grande que el número de elementos reales de la lista).
multiple: ofrece la posibilidad de que el usuario seleccione varios elementos de la lista.

Cada uno de los valores posibles del menú/lista se define mediante la etiqueta <option>. El contenido de cada una de estas etiquetas es lo que realmente se enviará al servidor cuando se procese el formulario. En caso de querer enviar un valor distinto se utilizará el atributo «value» con el contenido que se enviará al servidor.

<p>¿Cuál es tu deporte favorito?</p> <select name="deporte"> <option> Fútbol</option> <option> Baloncesto</option> <option> Balonmano</option> <option> Tenis</option> <option value="Tenismesa"> Ping-Pong</option> </select>

En el caso de que se desee mostrar el menú como una lista de varios elementos se utilizará el atributo «size» para seleccionar el número de elementos que se mostrarán simultáneamente en pantalla. En el siguiente ejemplo, además de mostrar varios elementos, se permitirá que el usuario seleccione más de uno (mediante el atributo «multiple«).

<p>¿Cuál es tu deporte favorito?</p> <select name="deporte" size="3" multiple> <option> Fútbol</option> <option> Baloncesto</option> <option> Balonmano</option> <option> Tenis</option> <option value="Tenismesa"> Ping-Pong</option> </select>

Existen situaciones donde puede resultar útil agrupar los distintos elementos de la lista. La etiqueta <optgroup> permite crear estas agrupaciones, siendo necesaria la utilización de la etiqueta «label» para identificar cada grupo de elementos.

<p>¿Cuál es tu deporte favorito?</p> <select name="deporte" size="6"> <optgroup label="De equipo"> <option> Fútbol</option> <option> Baloncesto</option> <option> Balonmano</option> </optgroup> <optgroup label="Individuales"> <option> Tenis</option> <option> Esgrima</option> </optgroup> </select>

Como en los controles anteriores, el valor inicial de los <option> puede ser establecido a «seleccionado» usando el atributo booleano «selected«.

Selección de ficheros

La entrada de archivos puede ser utilizada para subir archivos al servidor. Este control muestra una caja de texto donde el usuario debe especificar la ruta del archivo (que será adjuntado localmente por el navegador) que será enviado al servidor. El control habitualmente muestra un botón para elegir el archivo visualmente. El atributy type=»file» del control input permitirá incluir especificar una selección de ficheros.

Para que los formularios con subida de archivos puedan enviar correctamente el fichero al servidor es necesario especificar el valor «multipart/form-data» en el atributo «enctype» de la etiqueta <form> (en otro caso el archivo no será enviado).

Selección de fecha y hora

HTML5 ofrece la posibilidad de solicitar datos de tipo fecha y hora a través de controles sin necesidad de recurrir a librerías de JavaScript. Aunque algunos navegadores todavía no los soportan, pueden ser utilizados, ya que los navegadores que no los soportan mostrarán campos de texto normales para introducir los datos.

Algunos de los valores posibles son:

<input type=»date» name=»nombre_campo» value=»2012-03-21″>: Muestra un calendario para seleccionar una fecha (año, mes y día). Si se desea establecer un valor inicial para el campo debe realizarse en formato YYYY-MM-DD.
<input type=»time» name=»nombre_campo» value=»15:05:00″>: Muestra un control para seleccionar una hora (hora, minutos y segundos). Si se desea establecer un valor inicial para el campo debe realizarse en formato hh:mm:ss.
<input type=»datetime» name=»nombre_campo» value=»2012-03-21T15:05:00-1:00″>: Muestra un control para seleccionar una fecha y hora (año, mes, día, T,hora, minutos, segundos y zona horaria GMT).
<input type=»datetime-local» name=»nombre_campo» value=»2012-03-21T15:05:00″>: Idéntico al anterior pero sin especificar la zona horaria.
<input type=»week» name=»nombre_campo» value=»2012-03″>: Muestra un calendario para seleccionar un determinado mes del año. El formato es YYYY-MM.
<input type=»month» name=»nombre_campo» value=»2012-W3″>: Muestra un calendario para seleccionar una determinada semana del año. El formato es YYYY-W# (W de semana y un número).

Selección de colores

El tipo «color» aplicado a un campo de entrada hace que los navegadores que soporten este tipo muestren un control para la selección de colores.

<label>Color favorito <input type="color" name="color_favorito"> </label>

Controles ocultos

Se utilizan en situaciones donde se necesita comunicar cierta información al servidor acerca de cómo manipular los datos manteniendose ocultos a la vista de los usuarios. Los controles ocultos se añaden mediante el elemento input y el tipo oculto (type=»hidden»). A la hora de suministrar los valores al servidor se utilizarán los atributos name y value.

<input type="hidden" name="direccion_enlace" value="http://www.dir.com">

Otros controles

HTML5 proporciona otros controles que, aunque no están soportados a día de hoy en la mayoría de navegadores, serán de utilidad a medida que sean implementados correctamente. Algunos de estos controles son:

progress: Muestra el progreso de una tarea o de un proceso. Acepta 2 atributos, value y max, valor de la barra y valor máximo respectivamente. Es posible introducir un contenido dentro de las etiquetas de apertura y cierre; este contenido será interpretado por los navegadores que no soporten el elemento.
meter: Permite indicar una medida dentro de un rango o par de valores extremos conocidos. Los atributos min y max especifican esos valores extremos. Al igual que en el caso de progress, es posible especificar contenido para navegadores que no lo soporten.
oputput: Permite especificar que el valor correspondiente es un campo calculado. Esto puede ser útil en situaciones donde, por ejemplo, no interese que un buscador indexe el valor de un campo, pues no será fijo y pasará a depender del cálculo. El atributo «name» permite especificar el nombre del elemento. El atributo «for» asocia el campo con el identificador de los elementos de entrada con los que está relacionado (separados por espacios). El atributo «form» permite identificar el formulario propietario del output, ya que el campo output puede estar fuera de un formulario.
keygen: Se utiliza para generar 2 claves (pública/privada) a la hora de enviar fourmularios. La clave privada se almacena localmente, mientras que la pública se envía al servidor.Admite 5 atributos: «name» o nombre asociado al elemento, «challenge», que genera una serie de caracteres de validación que se envían junto con la clave, «keytype«, es especifica el tipo de algoritmo de seguridad utilizado por la clave (por defecto RSA), «autofocus» para indicar que el elemento debe tener el foco al cargar la página y «disabled«.

<label> Porcentaje de descarga</label> <progress value="30" max="100"> <span id="porcentaje_descarga">30</span> </progress>

<label> Valor</label> <meter min="0" max="60" value="40"> <span>2/3</span> </meter>

<form oninput="res.value =parseInt(op1.value) * parseInt(op2.value)"> <input name="op1" type="number" step="any"> x <input name="op2" type="number" step="any"> = <output name="res" for “op1 op2”></output> </form>

<form method="get"> <label> Usuario:</label><input type="text" name="usuario"> <label> Clave encriptada:</label> <keygen name="clavepub" challenge="serie"> <input type="submit" name="security" value="Enviar"> </form>

Agrupamiento de controles

En ocasiones puede ser interesante agrupar controles y rótulos de un formulario que puedan estar relacionados entre sí, por ejemplo, información personal, información laboral, etc. Esto ayudará al usuario a entender mejor el propósito de los diferentes controles, a la vez que facilitará la navegación con agentes de usuario visuales y la navegación por voz para agentes de usuario basados en voz. El elemento <fieldset> permite realizar esta agrupación; la identificando de cada conjunto con un título se lleva a cabo mediante la etiqueta «legend«.

Validación de formularios

Los nuevos tipos y atributos incorporados en HTML5 permiten realizar una «cierta» validación de los datos introducidos desde el propio navegador. De esta forma, el atributo «required» controlará cuándo un campo obligatorio está vacío. En campos establecidos como «email«, «url«, «number«, «range«, «date» o «time» también se realizará una verificación antes de enviar los datos al servidor. El atributo «novalidate» de la etiqueta <form> evita que el formulario sea validado antes de su envío. Esta validación depende en gran medida del soporte que tenga el navegador para estas nuevas etiquetas y tipos de datos. En cualquier caso, se recomienda siempre realizar un proceso de validación de datos desde el servidor si se quiere garantizar tanto la seguridad como la completa introducción de datos.