Nuevos elementos en HTML5: el tag <output> y el <input> de tipo "number"

La llegada de HTML5 nos ha traido muchas capacidades nativas para los navegadores que antes no quedaba más remedio que suplir a base de todo tipo de añadidos y extensiones. Sin embargo, hay algunas innovaciones desde el punto de vista semántico que han pasado muy desapercibidas pese a su utilidad.

Una de ellas es el elemento output. Desde los inicios del lenguaje de hipertexto estamos habituados a usar diversos tipos de inputs para pedirle información al usuario, pero hasta ahora no nos habíamos preocupado de devolverle el resultado correctamente, sino que lo hacíamos en otro input o, en el mejor de los casos, en un label. Y resulta curioso que hayan sido necesarios casi 20 años de uso y abuso hasta que por fin se ha añadido un elemento semánticamente correcto para esa función.

Definición y utilidad

La especificación del WHATWG define el elemento output así de escuetamente:

El elemento output representa el resultado de un cálculo

A nivel meramente representativo, este elemento no tiene ninguna particularidad que lo distinga de un simple label. Su importancia radica en la facilidad para comunicar a robots de buscadores (o a cualquier otro tipo de interfaz capaz de interpretar HTML) que lo contenido ahí es un campo calculado cuyo valor no debería indexarse y que además se trata posiblemente del dato más importante dentro del formulario al que pertenece, ya que será el que atraiga la atención del usuario.

Pasemos a verlo desde el punto de vista técnico. Su uso es muy sencillo, ya que sólo admite tres atriutos:

• name: El nombre del elemento.

• for: Al igual que en los labels que acompañan a inputs, este campo sirve para indicar el id de los elementos de entrada con los que está relacionado. En este caso, dado que lo lógico es que el resultado dependa de más de un valor de entrada, hay que separar con un espacio los identificadores de todos ellos.

• form: Identificador del formulario propietario del output. La utilidad de este atributo es poder situar el output fuera del formulario, siempre y cuando se encuentre en la misma página.

Uso

Vamos a usarlo en combinación con otro nuevo integrante de la definición HTML5: el input de tipo number. La representación de este input dependerá del navegador que uséis. En algunos como Firefox o Internet Explorer, aparecerá como un textbox que sólo admite valores numéricos, mientras que en otros como Chrome cuenta con dos flechas para poder elegir valores superiores o inferiores sin necesidad de teclear.

<form name=“division”>
    <input id=“dividendo” type=“number” step=“any”/> :
    <input id=“divisor” type=“number” step=“any”/> = 
    <output name=“cociente” for=“dividendo divisor”>
</form>

Pero lo que aún no hace HTML5 es adivinar qué operación queremos hacer con los inputs ni en qué momento realizarla. Haciendo uso de JavaScript podemos diseñarlo de tal manera que no necesitemos botón de envío para el formulario. Para ello basta con usar el evento oninput que ha venido a reemplazar a onforminput.

<form name=“division” onsubmit=“return false” oninput=“cociente.value = parseInt(dividendo.value) / parseInt(divisor.value)”>
    <input id=“dividendo” type=“number” step=“any”/> :
    <input id=“divisor” type=“number” step=“any”/> = 
    <output name=“cociente” for=“dividendo divisor”>
</form>

Idealmente, en lugar del parseInt para convertir a número el valor del input, que es una cadena, deberíamos usar la nueva propiedad valueAsNumber. Desgraciadamente, todavía son muy pocos navegadores los que la implementan, así que de momento seguiremos parseando cadenas como hasta ahora. Veámoslo en funcionamiento:

¿No os funciona? Entonces será porque vuestro navegador aún no ha implementado alguna de las opciones. Para saber en cuáles podéis utilizarlos, aquí tenéis una tabla con la versión a partir de la que está disponible cada elemento o atributo:

Vía | HTML5 Doctor – The output element
En GenbetaDev | Introducción a los formularios de HTML5