Etiquetas HTML5: formularios e inputs

En otros capítulos hemos hablado de más etiquetas de HTML5, en concreto: etiquetas multimedia (audio, video y canvas), etiquetas hgroup aside y mark. En este caso vamos a hablar de las etiquetas que incorpora HTML5 para la creación de formularios.

El formulario es una interfaz fundamental en las páginas web para interactuar con el usuario. Esta interacción se genera a través de variados elementos, como cajas para ingresar texto, botones sencillos o del tipo check o radio, controles de rangos, cajas para selección de colores y otros.

Una de las grandes novedades de HTML5 es la creación de nuevas etiquetas que nos asisten en la creación de estos formularios,  así como en el ingreso de información por parte del usuario. HTML5 también incluye validaciones nativas para el navegador sin necesidad de usar javascript.

Nuevas Etiquetas de Formularios HTML5

Datalist

La nueva etiqueta <datalist> permite automatizar el ingreso de datos. Genera una lista desplegable de  opciones para que el usuario realice su selección. La ventaja de este nuevo elemento es que reconoce los primeros caracteres ingresados por el usuario, para “autocompletar” la información.

<label>Selecciona tu país:</label>
<input type="text" name="pais" id="pais" list="paises"/>
<datalist id="paises">
<option value="España" />
<option value="México" />
<option value="Argentina" />
<option value="Perú" />
<option value="Colombia" />
<option value="Otro país" /> 
</datalist>

Si el navegador no soporta esta nueva característica, mostrará un casillero de input sencillo, sin desplegar las opciones. Para ver qué navegadores soportan estas etiquetas, visita can i use [eng].

Keygen

Esta etiqueta genera dos claves, una pública y una privada. Cuando se envía el formulario, la clave privada se almacena localmente y sólo la clave pública es enviada al servidor.

Es un elemento de seguridad útil para instituciones que deben validar el ingreso de usuarios a información privada desde el exterior de la red.

<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>

Los atributos propios de esta etiqueta son:

• Challenge: genera una serie de caracteres de validación que se envían junto con la clave.
• Keytype: especifica el tipo de algoritmo de seguridad utilizado por la clave. Si no se utiliza, se asume RSA.
• Name: el nombre asociado al elemento <keygen>.
• Autofocus: este elemento <keygen> debe tener el foco una vez cargada la página.
• Form: nombre del formulario al cual pertenece esta etiqueta.
• Disabled: este atributo booleano indica, si su valor es true, que la etiqueta está deshabilitada.

Output

La etiqueta <output> representa el resultado de un cálculo realizado a través de un script.

<form onsubmit="return false" 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>

 Los atributos específicos de esta etiqueta son:

• Name: asigna un nombre al elemento output.
• Form: asocia este elemento con el formulario en el cual está incluido.
• For: establece una relación entre el resultado del cálculo y los elementos del mismo.

Nuevos tipos de Input

De cara a maquetar una página web, los diseñadores debemos saber que actualmente contamos con nuevos inputs, que si bien en un pc no causen demasiado impacto, en un dispositivo móvil es mucho más evidente la mejora que proporcionan. Por ejemplo, el input epecífico de teléfono, cambia el teclado que aparece en un móvil para mostrar sólo números y caracteres relevantes. El input email muestra una tecla con la @ directamente, etc.

Number

El tipo number muestra el típico casillero para el ingreso de información, sólo que acepta únicamente números dentro de un rango determinado por el diseñador del formulario.

<input type=range name=”numero” min=20, max=999>

Range

Esta etiqueta nos presenta un deslizador. Es decir, una línea horizontal con un botón que podemos mover sobre ella para determinar un valor dentro de un rango dado. La etiqueta cuenta con los atributos mínimo (min) y máximo (max) con el objetivo de limitar nuestra selección a un número dentro de esos valores.

<input type=range name=”deslizador” min=1, max=100>

Search

La etiqueta search no es más que un típico campo de input de texto, sólo que con un formato similar al muy conocido de búsqueda de contenido. Algunos navegadores agregan a la derecha del casillero una “x” para eliminar el texto ingresado.

<input type=“search” name=“buscador”>

Ingreso de Fecha y Hora

HTML5 propone una nueva serie de tipos de input que nos dan la posibilidad de ingresar datos de fechas y horarios, los cuales pueden seleccionarse desde un calendario u otro tipo de elementos que automatizan el ingreso de información.

En los navegadores que aún no son compatibles con esta nueva característica de HTML5, estos nuevos tipos en entrada se presentarán como un casillero normal de ingreso. Sin embargo, se espera que en breve todos los navegadores soporten esta valiosa herramienta.

Datetime nos permite ingresar la fecha y la hora a partir de un calendario que el navegador nos propone.

<input type=”datetime” name=”fechayhora”>

Así, se comportan de una manera similar los tipos date, month, week, time.

Datos de Identificación

Una interesante novedad en HTML5 es la ampliación de la etiqueta input para simplificar el ingreso y la validación de variados elementos de identificación y localización. Los nuevos tipos de input relacionados con esta característica son:

tel, para el ingreso de números de teléfono.

<input type=”tel” name=”mitelefono”>

url, para ingresar una dirección web.

<input type=“url” name=“url”>

email, para la dirección de correo electrónico.

<input type=“email” name=“email”>

Atributos de Input en HTML5

Además de las novedades en cuanto a etiquetas y tipos de input para su uso en formularios, existen atributos nuevos que mejoran la experiencia de usuario y la usabilidad.

• Autofocus fuerza el foco (la posición del cursor) dentro de un campo, una vez que se carga la página. El mejor ejemplo de esto es google, cuando cargas la página automáticamente el foco esá puesto en la caja de búsqueda para permitir escribir directamente sin necesidad de hacer click en el input.
• Autocomplete permite el rellenado automático del input en base al texto que vaya escribiendo el usuario, en base a los textos introducidos anteriormente. Puede utilizarse como atributo de un campo de entrada o del formulario completo.
• Placeholder muestra un texto por defecto en el input hasta que este tiene el foco, en ese momento el texto desaparece para que el usuario ingrese el texto que desee.
• Required es un atributo que se aplica a un campo de entrada e impide que se envíe el formulario si el campo no se a rellenado.

Validación de Formularios

Los tipos y atributos de input de HTML5 han sido pensados también para la validación de formularios del lado del cliente, y hacen innecesario recurrir a otros lenguajes o scripts (al menos, en los navegadores que actualmente soporta esta funcionalidad). En lawebera tenemos un artículo extenso sobre validación de formularios con HTML5 y CSS3.

• El atributo required controla que el campo de entrada tenga contenido. Si no es así, emite un mensaje o señal de error e impide enviar el formulario.
• Los tipos email y url deben tener el formato adecuado para que el navegador permita el envío del formulario.
• Los tipos number y range se autocontrolan. En el caso de number, algunos navegadores incluyen un par de flechas para incrementar o disminuir el valor dentro del rango especificado en los atributos min y max. Lo mismo sucede con el deslizador de range, que tiene sus propios límites. Además de min y max, puede usarse el atributo step, que limita la escala de incremento o reducción de un valor. Un número que no esté dentro de esta escala dará un error e impedirá el envío.
• Los tipos de datos relacionados con fechas y horas son validados de acuerdo con su estructura particular.
• Además, el elemento <form> cuenta con el atributo opcional novalidate, el cual evita que el formulario sea validado antes de su envío.

No obstante, ni que decir tiene que este tipo de validación del lado del cliente nunca debe sustituir la validación del lado de servidor, para no mermar la seguridad de la página web.