[HTML5] Uso del elemento Output

Hola que tal, hace un tiempo que no hablaba de los nuevos elementos de HTML5, y ya era hora. En este post vamos a ver el nuevo elemento Output.  Hoy hay bastantes sitios que tienen formularios que realizan cálculos, como calculo de porcentajes, descuentos, recargos, etc. Hasta hora no existía un tag semántico que  soportara este tipo de operaciones, es por eso que vamos a revisarlo.

La definición

Este es un elemento relacionado con los formularios (tag form). De hecho en la especificación se define “el elemento output representa el resultado de una operación”.

Los atributos que acepta son los siguientes:

for :A una lista separada por espacios que contiene el ID de los elementos cuyos valores participan en el calculo.

form: Corresponde el Id del form al que se asociará el elemento <output>, el formulario debe estar en la misma página. Este tag se usa cuando elemento <output> no está contenido dentro del formulario

name: El nombre del elemento.

Implementación

Esto es bastante sencillo, veamos un ejemplo:

<!doctype html>
<html>
<head>
   <meta charset="utf-8">
</head>
     <body>
      <form onsubmit="return false" oninput="result.value= num1.valueAsNumber
                                   + num2.valueAsNumber">
          <input name="num1" id="num1" type="number" step="any">
       + <input name="num2" id="num2" type="number" step="any">
           <output name="result" for="a b"></output>
     </form>
  </body>
</html>

Puedes ver que tenemos un atributo del formulario oninput, que indica cual es la formula cuyo resultado vamos a exponer en el resultado. Puedes utilizar valueAsNumer o parseInt Con valueAsNumber no debemos especificar parseInt o parseFloat, sin embargo no todos los navegadores han implementado valueAsNumber.

<form onsubmit="return false" oninput="result.value= parseInt(num1.value) + parseInt(num2.value)">

image

Puedes ver que a medida que escribes dentro de las cajas de texto se va calculando inmediatamente.

El soporte de los navegadores respecto a este tag es el siguiente:

Browser

Soporte

Chrome

13+

Safari

5.1+

Firefox* (no soporta valueAsNumber)

6+

Opera

9.20+

Internet Explorer

10+

Espero que te sirva!

Chao!

Un comentario en “[HTML5] Uso del elemento Output”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *