https://www.anerbarrena.

com/html5-output-935/
(https://www.anerbarrena.com)

 Programación y ejemplos de PHP, jQuery, HTML5, WordPress, MySQL, AMP y  (/feed/)

 (https://www.linkedin.com/in/aner-barrena-valbuena-154ba2150/)
 (https://twitter.com/anerbarrena)


Inicio (https://www.anerbarrena.com) 
HTML5 (https://www.anerbarrena.com/programacion/html5/)  Formularios en HTML5

(https://www.anerbarrena.com/programacion/html5/form-html5/)

HTML5 output: Operaciones matemáticas en tiempo real en tu formulario

 Aner Barrena (https://www.anerbarrena.com/author/aner-barrena/)  15 mayo, 2013
 Formularios en HTML5 (https://www.anerbarrena.com/programacion/html5/form-html5/), HTML5
(https://www.anerbarrena.com/programacion/html5/), Nuevos input, etiquetas y atributos en HTML5
(https://www.anerbarrena.com/programacion/html5/nuevas-etiquetas-y-atributos/)

(https://www.facebook.com/sharer/sharer.php?u=https://www.anerbarrena.com/html5-output-935/)
(https://twitter.com/intent/tweet?url=https://www.anerbarrena.com/html5-output-

935/&text=%20vía%20@anerbarrena) (https://www.linkedin.com/cws/share?

url=https://www.anerbarrena.com/html5-output-935/) (whatsapp://send?text=
https://www.anerbarrena.com/html5-output-935/)
La etiqueta HTML5 output va a facilitarnos el trabajo a la hora de realizar operaciones matemáticas en los
formularios.

De esta manera seguimos analizando las nuevas etiquetas e input

(https://www.anerbarrena.com/programacion/html5/nuevas-etiquetas-y-atributos/) de HTML5
(https://www.anerbarrena.com/programacion/html5/). Veamos cual es la definición de HTML5 output según la
WHATWG (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-output-
element):
 La etiqueta output representa el resultado de un cálculo

Hasta hace bien poco, este tipo de cáculos los veníamos haciendo con JS o con lenguajes de servidor tras el envío
del formulario.

Os muestro la siguiente imagen para que os hagáis un idea de su utilidad.

(https://www.anerbarrena.com/wp-content/uploads/2013/05/html5-output.png)

Ejemplo de HTML5 output

Voy a realizar un sencillo ejemplo de HTML5 ouput (https://www.anerbarrena.com/demos/2013/09-output-
html5.php) para que probéis su funcionamiento, aquí el código:

XHTML
1 <form method="POST" oninput="resultado.value=parseInt(valor1.value)+parseInt(valor2.value)">
2 <input type="number" id="valor1" value="0"> +
3 <input type="number" id="valor2" value="0"> =
4 <output name="resultado" for="valor1 valor2"></output>
5 </form>

El ejemplo lo he probado en Google Chrome, os voy a explicar el funcionamiento del formulario:

1. En la etiqueta form encontramos el atributo oninput, en el cogemos los valores de las etiquetas ‘valor1‘ y
‘valor2’ y las sumamos.
2. Los input con id ‘valor1’ y ‘valor2‘ son te tipo number HTML5 (https://www.anerbarrena.com/html5-
number-input-form-1469/), es decir que siempre contendrán valores numéricos.

3. Por último la etiqueta HTML5 output con name ‘resultado‘ obtiene el valor de la suma de ‘valor1’ y
‘valor2′ en tiempo real, es decir, según se escriben los valores vas obteniendo el cálculo.

Listado de los nuevos input y etiquetas HTML5

En esta url tenéis el listado completo de los nuevos input y etiquetas de HTML5
(https://www.anerbarrena.com/nuevos-input-html5-3739/).

Listado de los nuevos atributos HTML5

En esta otra url tenéis todos los nuevos atributos HTML5 para inputs y formularios
(https://www.anerbarrena.com/nuevos-atributos-html5-4813/).

Post Relacionados:
1. Examples of PHP, jQuery, HTML5, WordPress, MySQL, AMP and JavaScript
(https://en.anerbarrena.com)
 2. keygen HTML5: Un nuevo campo para la generación de claves
(https://www.anerbarrena.com/keygen-html5-933/)
3. HTML5 url input: Un campo de formulario para urls (https://www.anerbarrena.com/html5-url-
input-2781/)
4. Input datetime-local HTML5: fecha y hora local sin timezone para formularios
(https://www.anerbarrena.com/input-datetime-local-html5-3094/)

5. Month input HTML5: Un campo de tipo mes para formularios

(https://www.anerbarrena.com/month-input-html5-3368/)
6. Autocomplete HTML5: Atributo para autocompletar datos en formularios
(https://www.anerbarrena.com/atributo-autocomplete-html5-4488/)


(https://www.anerbarrena.com/facebook-fan-box-1240/)
Facebook Fan Box: Pon en tu web el plugin like box (https://www.anerbarrena.com/facebook-fan-box-1240/)


(https://www.anerbarrena.com/php-addslashes-escapar-comillas-simples-1428/)
PHP addslashes y stripslashes: Escapar las comillas simples y dobles (https://www.anerbarrena.com/php-
addslashes-escapar-comillas-simples-1428/)

PUBLICIDAD

ÚLTIMOS POST

Función de WordPress is_single() para detectar si un contenido es de tipo post (https://www.anerbarrena.com/wordpress-is_single-10064/)

 Aner Barrena (https://www.anerbarrena.com/author/aner-barrena/)  13 julio, 2021
(https://www.anerbarrena.com/wordpress-is_single-10064/)

Función de WordPress
is_front_page() para
detectar la home
(https://www.anerbarre
is_front_page-
detectar-home-
10026/)
 Aner Barrena
(https://www.anerbarre
barrena/)
 12 octubre, 2020

(https://www.anerbarrena.com/wordpress-is_front_page-detectar-home-10026/)

Función de WordPress is_home() para detectar si estamos en la home (https://www.anerbarrena.com/wordpress-is_home-detectar-home-10016/)

 Aner Barrena (https://www.anerbarrena.com/author/aner-barrena/)  19 septiembre, 2020
(https://www.anerbarrena.com/wordpress-is_home-detectar-home-10016/)

WordPress Multisite: Pasos a

seguir configurar el multisitio
de WP
(https://www.anerbarrena.com
multisite-configuracion-
10006/)
 Aner Barrena
(https://www.anerbarrena.com
barrena/)
 3 septiembre, 2020

(https://www.anerbarrena.com/wordpress-multisite-configuracion-10006/)

Repaso al atributo rel UGC para los enlaces generados por usuarios (https://www.anerbarrena.com/atributo-rel-ugc-9979/)
 Aner Barrena (https://www.anerbarrena.com/author/aner-barrena/)  25 agosto, 2020
(https://www.anerbarrena.com/atributo-rel-ugc-9979/)

PUBLICIDAD

THEMES, PLUGINS Y TEMPLATES

Salient WordPress Theme - Una plantilla para múltiples temáticas

(https://www.anerbarrena.com/producto/salient-wordpress-theme/)
$60,00

X WordPress Theme - Una plantilla todoterreno (https://www.anerbarrena.com/producto/x-

wordpress-theme/)
$29,00

Eduma Education WordPress Theme - Una plantilla de e-learning para escuelas y universidades
(https://www.anerbarrena.com/producto/eduma-education-wordpress-theme/)
$48,00

WoodMart WordPress Theme - Una plantilla optimizada para tiendas online

(https://www.anerbarrena.com/producto/woodmart-wordpress-theme/)
$59,00

XStore WordPress Theme - Una plantilla para crear tiendas online

(https://www.anerbarrena.com/producto/xstore-wordpress-theme/)
$48,00
 TOP POST

jQuery load() (https://www.anerbarrena.com/jquery-load-html-div-460/), jQuery get()

(https://www.anerbarrena.com/jquery-get-5049/), jQuery post() (https://www.anerbarrena.com/jquery-post-
5064/), jQuery each() (https://www.anerbarrena.com/jquery-each-5297/), jQuery append()
(https://www.anerbarrena.com/jquery-append-5300/)
Obtener el valor de un radio button con jQuery, comprobar si está seleccionado y checkearlo
(https://www.anerbarrena.com/value-radio-button-jquery-checked-1580/)
jQuery change() (https://www.anerbarrena.com/jquery-change-1879/), jQuery toggle()
(https://www.anerbarrena.com/jquery-toogle-mostrar-ocultar-divs-1728/), Selectores jQuery
(https://www.anerbarrena.com/jquery-selectors-selectores-4768/), Efectos jQuery
(https://www.anerbarrena.com/efectos-en-jquery-5026/)
PHP date(): Obtener día, mes, año y hora actual con PHP (https://www.anerbarrena.com/php-date-1018/),
Compresión GZIP: Ahorrar ancho de banda en tu web (https://www.anerbarrena.com/compresion-gzip-
ahorrar-ancho-de-banda-5271/)
Date input HTML5: Un sencillo datepicker para tu formulario (https://www.anerbarrena.com/date-input-html5-
2829/), Gráficos SVG (https://www.anerbarrena.com/etiqueta-svg-5174/), video HTML5
(https://www.anerbarrena.com/html5-video-player-multimedia-5241/), audio HTML5
(https://www.anerbarrena.com/etiqueta-html5-audio-5259/) , AMP (https://www.anerbarrena.com/amp-
optimizar-paginas-moviles-5470/), JavaScript alert (https://www.anerbarrena.com/javascript-alert-confirm-
prompt-js-5497/)
PHP array(): Tipos y ejemplos para recorrer arrays (https://www.anerbarrena.com/php-array-tipos-ejemplos-
3876/), Redirect 301 (https://www.anerbarrena.com/redirect-301-htaccess-204/), PHP mail()
(https://www.anerbarrena.com/php-mail-enviar-emails-5417/)
jQuery animate() (https://www.anerbarrena.com/jquery-animate-3787/), jQuery css()
(https://www.anerbarrena.com/jquery-css-4900/), jQuery on() y off() (https://www.anerbarrena.com/jquery-on-
off-4767/)
Facebook Live (https://www.anerbarrena.com/facebook-live-video-movil-app-ios-android-5590/)

PUBLICIDAD

ÚLTIMOS POST

Función de WordPress is_single() para detectar si un contenido es de tipo post (https://www.anerbarrena.com/wordpress-is_single-10064/)

  Aner Barrena
(https://www.anerbarrena.com/author/aner-
barrena/)
 13 julio, 2021

(https://www.anerbarrena.com/wordpress-is_single-10064/)

Función de WordPress
is_front_page() para
detectar la home
(https://www.anerbarre
is_front_page-
detectar-home-
10026/)
 Aner Barrena
(https://www.anerbarre
barrena/)
 12 octubre, 2020

(https://www.anerbarrena.com/wordpress-is_front_page-detectar-home-10026/)

Función de WordPress is_home() para detectar si estamos en la home (https://www.anerbarrena.com/wordpress-is_home-detectar-home-10016/)

 Aner Barrena (https://www.anerbarrena.com/author/aner-barrena/)  19 septiembre, 2020
(https://www.anerbarrena.com/wordpress-is_home-detectar-home-10016/)

WordPress Multisite: Pasos a

seguir configurar el multisitio
de WP
(https://www.anerbarrena.com
multisite-configuracion-
10006/)
 Aner Barrena
(https://www.anerbarrena.com
barrena/)
 3 septiembre, 2020

(https://www.anerbarrena.com/wordpress-multisite-configuracion-10006/)

Repaso al atributo rel UGC para los enlaces generados por usuarios (https://www.anerbarrena.com/atributo-rel-ugc-9979/)
 Aner Barrena (https://www.anerbarrena.com/author/aner-barrena/)  25 agosto, 2020
(https://www.anerbarrena.com/atributo-rel-ugc-9979/)

OTRAS WEBS

Aner Barrena in english (https://en.anerbarrena.com)

Egocast (http://www.egocast.es/)

TAGS

botones compartir redes sociales (https://www.anerbarrena.com/etiquetas/botones-compartir-en-redes-

sociales/)

escapar caracteres especiales (https://www.anerbarrena.com/etiquetas/escapar-caracteres-especiales/)

expresiones regulares (https://www.anerbarrena.com/etiquetas/expresiones-regulares/)

redirect 301 (https://www.anerbarrena.com/etiquetas/redirect-301/)

robots.txt (https://www.anerbarrena.com/etiquetas/robots-txt/)

script (https://www.anerbarrena.com/etiquetas/script/)
Sistemas de comentarios para tu web o WordPress (https://www.anerbarrena.com/etiquetas/sistema-de-
comentarios/)

Sitemap (https://www.anerbarrena.com/etiquetas/sitemap/)

CATEGORÍAS

.htaccess Apache (https://www.anerbarrena.com/programacion/htaccess-apache/) (35)

AMP (https://www.anerbarrena.com/programacion/amp-js-cache-html/) (9)
HTML5 (https://www.anerbarrena.com/programacion/html5/) (88)
Ejemplos y programación de la API de HTML5
(https://www.anerbarrena.com/programacion/html5/device-api-dispositivo/) (2)
Formularios en HTML5 (https://www.anerbarrena.com/programacion/html5/form-html5/) (37)
Gráficos SVG (https://www.anerbarrena.com/programacion/html5/graficos-svg/) (2)
Nuevos input, etiquetas y atributos en HTML5
(https://www.anerbarrena.com/programacion/html5/nuevas-etiquetas-y-atributos/) (79)
Vídeo y audio HTML5 (https://www.anerbarrena.com/programacion/html5/video-audio/) (15)
JavaScript JS (https://www.anerbarrena.com/programacion/javascript-js/) (11)
jQuery (https://www.anerbarrena.com/programacion/jquery/) (71)
PHP y MySQL (https://www.anerbarrena.com/programacion/php/) (139)
Funciones de cadenas en PHP (https://www.anerbarrena.com/programacion/php/cadenas-string/)
(33)
Funciones de fechas en PHP (https://www.anerbarrena.com/programacion/php/fechas/) (22)
MySQL (https://www.anerbarrena.com/programacion/php/mysql/) (45)
Recursos (https://www.anerbarrena.com/programacion/recursos/) (163)
Facebook (https://www.anerbarrena.com/programacion/recursos/facebook-recursos/) (17)
Google y Youtube (https://www.anerbarrena.com/programacion/recursos/google/) (7)
SEO y Google Analytics (https://www.anerbarrena.com/programacion/recursos/seo/) (23)
Streaming (https://www.anerbarrena.com/programacion/recursos/streaming/) (3)
Twitter (https://www.anerbarrena.com/programacion/recursos/twitter/) (17)
WordPress (https://www.anerbarrena.com/programacion/recursos/wordpress/) (79)
Mejores plugins WordPress
(https://www.anerbarrena.com/programacion/recursos/wordpress/plugins/) (12)
WPO (https://www.anerbarrena.com/programacion/recursos/wpo/) (6)
 Copyright @ Aner Barrena . Powered by WordPress and Valenti theme.

Política de privacidad (https://www.anerbarrena.com/politica-de-privacidad/)

Política de cookies (https://www.anerbarrena.com/politica-de-cookies/)
Más información sobre las cookies (https://www.anerbarrena.com/mas-informacion-sobre-las-cookies/)
Contactar (https://www.anerbarrena.com/contactar/)

Uso de cookies
Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento
para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies (https://www.anerbarrena.com/politica-de-
cookies/), pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies ()