Componentes básicos de un formulario

Los campos de texto constituyen la principal forma de entrada de datos en un formulario, permitiendo al usuario introducir información no normalizada mediante caracteres alfanuméricos.

Su sintaxis es la siguiente:

<input type="text" ...>

Los atributos obligatorios que deberán añadirse a todos los campos de texto de un formulario son los siguientes:

• id: Identificación del elemento, que permitirá cumplir ciertas pautas de accesibilidad como son el uso no intrusivo del javascript.
• name: Nombre del campo, necesario para que el elemento sea identificado en el envío (submit) del formulario.
• size: Tamaño del campo en la pantalla ajustado al número de caracteres que contendrá habitualmente el mismo.
• maxlength: Longitud máxima de caracteres que podrán introducirse en el campo, evitando errores en el proceso de persistencia de la información por intentar almacenar un texto con una longitud mayor que la que soporte el campo de la base de datos.
• tabindex: El índice de tabulación para cumplir con las pautas de usabilidad.

Cambios sufridos en HTML5:

En HTML5 existen nuevos atributos para este tipo de campo. Entre ellos, cuando proceda, serán obligatorios los siguientes:

• Required: indica que es obligatorio introducir un valor en el campo para enviar ese formulario, algo que en XHTML y HTML4 se comprueba con Javascript o en el servidor.
• Min y Max: el valor que se introduzca en el campo debe estar comprendido en un rango dado por los valores de estos atributos.
• Autofocus: se utiliza en el primer elemento de un formulario para indicar que debe obtener el foco al cargar la página.

Para facilizar el acceso por teclado a ciertos campos de un formulario que son uso habitual por los usuarios, se recomienda incluir el atributo accesskey en los campos de texto.

El formato es el siguiente:

<input type="text" accesskey="[caracter]" ... >

Por ejemplo:

<input type="text" name="nombreUsuario" id="nombreUsuario" size="30" maxlength="28" accesskey="n">

Cambios sufridos en HTML5:

Se han incorporado los siguientes atributos:

• Pattern: obliga a que el valor introducido en el campo cumpla con el patrón introducido.
• Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
• Data-*, donde el asterisco puede ser cualquier nombre:  permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
• Spellcheck: indicará que el valor introducido en el componente debe pasar el corrector ortográfico.
• Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.

Dado que el campo de texto en estado disabled aporta una visualización menor (texto en gris oscuro sobre cuadro gris), se utilizará el atributo readonly para la visualización de campos de texto en los que no se permita al usuario editar su contenido.

Para implementar botones de acción en una pantalla, no se prodrán utilizar imágenes con un enlace sino que se realizará mediante botones haciendo uso de la etiqueta button.

Los tres tipos de botones disponibles son:

• submit: Cuando se activa realiza la presentación el formulario. Sólamente puede haber un botón submit por formulario
• button: No tienen un comportamiento por defecto y están asociados a la ejecución de scripts.
• reset: Restablece los valores de los componentes del formulario a sus valores originales. No recomendado atendiendo a las pautas de usabilidad.

Cambios sufridos en HTML5:

Se han incorporado los siguientes atributos:

• Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
• Data-*, donde el asterisco puede ser cualquier nombre:  permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
• Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.

Se utilizará la etiqueta html <input> con el siguiente formato para la implementación de un componente de selección booleana:

<input type="checkbox" name="seleccion">

Cambios sufridos en HTML5:

Se han incorporado los siguientes atributos:

• Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
• Data-*, donde el asterisco puede ser cualquier nombre:  permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
• Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.
• Required: indica que es obligatorio introducir un valor en el campo para enviar ese formulario, algo que en XHTML y HTML4 se comprueba con Javascript o en el servidor.

Para implementar una selección simple sobre un conjunto reducido de elementos (menor o igual a 3), se deberá utilizar una lista de componentes "radio" siguiendo el siguiente formato:

    <input type="radio" name="sexo" value="hombre">Hombre<br>

    <input type="radio" name="sexo" value="mujer">Mujer

Se debe asegurar que el atributo name de todas las etiquetas es el mismo para que cuando sea realizado el submit el valor seleccionado sea único.

Cambios sufridos en HTML5:

Se han incorporado los siguientes atributos:

• Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
• Data-*, donde el asterisco puede ser cualquier nombre:  permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
• Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.
• Required: indica que es obligatorio introducir un valor en el campo para enviar ese formulario, algo que en XHTML y HTML4 se comprueba con Javascript o en el servidor.

Para la introducción normalizada de fechas en un formulario se utilizará un componente compuesto por dos elementos:

• Campo de texto con una longitud adecuada para incluir una fecha y hora si fuera necesario. Permitirá introducir el dato manualmente, admitiendo tanto el caracter '-' como el '/' como separador de día, mes y año. El formato de fecha predeterminado será DD/MM/AAAA y tendrá que ser validado tanto en el cliente como en el servidor.
• Un enlace mediante un icono que permita visualizar una ventana emergente que contenta un componente Calendario. Este componente visualizará de forma predeterminada el día actual y permitirá seleccionar cualquier fecha, cargándola automáticamente en el campo de texto asociado.

Cambios sufridos en HTML5:

Para los campos de tipo fecha, se ha desarrollado un tipo específico:

<input type="date" ...>

Este tipo verifica automáticamente que la fecha introducida sea una fecha válida.

La etiqueta html <input> con el tipo "file" permite definir en un formulario un campo de subida de fichero que será enviado al servidor mediante el envío del mismo.

Para que el fichero asociado al campo se envío junto con el formulario, será necesario establecer el tipo de contenido (content type) al valor "multipart/form-data", tal y como se observa en el siguiente ejemplo:

    <form id="formulario" action="/procesarPeticion" method="multipart/form-data">

         <input id="fichero" name="fichero" type="file">

         ...

    </form>

El componente área de texto permite introducir en un formulario una información alfanumérica que supere la longitud de una línea. Este componente es similar al campo de texto pero permite varias líneas con la posibilidad de una barra de desplazamiento vertical si fuera necesario.

Alternativamente, se podrá habilitar un componente de editor enriquecido para que permita al usuario formatear el texto introducido. Este componente deberá cumplir las pautas de accesibilidad establecidas.

Cambios sufridos en HTML5:

Se han incorporado los siguientes atributos:

• Formaction, formenctype, formmethod, formnovalidate y formtarget: atributos que modifican la acción, el método de envío, la validación y el destino de un formulario respectivamente cuando se introduce algún valor en el campo.
• Data-*, donde el asterisco puede ser cualquier nombre:  permite la creación de atributos personalizados, que posteriormente se pueden obtener con Javascript
• Spellcheck: indicará que el valor introducido en el componente debe pasar el corrector ortográfico.
• Form: contendrá el nombre del formulario al que pertenezca el elemento. De esta forma se puede colocar un componente en cualquier parte de una página.
• Required: indica que es obligatorio introducir un valor en el campo para enviar ese formulario, algo que en XHTML y HTML4 se comprueba con Javascript o en el servidor.