MDN Learn > HTML > Forms > The native form widgets: <output>

MDN
#1

Hi folks,

I noticed at this section: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/The_native_form_widgets#Sliders

The instructions given are:

In this example we add an empty <span> element, in which we will write the current value of the slider, updating it as it is changed.

However, it’s followed by this HTML using <output> instead of <span>:

<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<output class="beancount"></output>

with this JavaScript:

var beans = document.querySelector('#beans');
var count = document.querySelector('.beancount');

count.textContent = beans.value;

beans.oninput = function() {
  count.textContent = beans.value;
}

The live example does use <span>.

<label for="beans">How many beans can you eat?</label>
<input type="range" name="beans" id="beans" min="0" max="500" step="10">
<span class="beancount"></span>

After looking up <output> on MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/output) it seems like, if JavaScript is required, it would be simpler for inexperienced developers to use the <output> element in in conjunction with the oninput attribute (I couldn’t find MDN documentation but here it is on w3schools: https://www.w3schools.com/tags/ev_oninput.asp )

Example:

<label for="beans">How many beans can you eat?</label>
<input oninput="beancount.value=parseInt(beans.value)" type="range" name="beans" id="beans" min="0" max="500" step="10">
<output name="beancount">250</output>

Tested and works - and pretty easy/nifty for a newbie like me.
image

#2

After additional investigation, it seems like the id attribute has more consistent implementation (at least in Beaker browser, which I think is Chrome-based). This comes after playing with this example:

<label for="beans">How many beans can you eat?</label><br>
<progress id="beancount" max="500" value="250">
<!-- <output id="beancount">250</output>/500<br> -->
</progress><br>
<input oninput="beancount.value=parseInt(beans.value)" type="range" name="beans" id="beans" min="0" max="500" step="10">

The id attribute works for <progress> but the name attribute does not. The id attribute works for <output> as well (instead of using the name attribute as previously) but unfortunately leaving <output> as a fallback for <progress> causes <progress> not to update. That’s why I’ve got the <output> line commented out. :smiley:

Live version: https://codepen.io/pawper/pen/qBWwJZR
I don’t know why, but the name attribute doesn’t work at all in codepen.

#3

Given that name is obsolete for use defining anchors, and <progress> is a newly-defined element, I would have been surprised if name worked there. It shouldn’t. Some browsers may support it but that’s not standard behavior (or at best is in the “legacy behavior you can support if you insist” category).

1 Like
#4

@sheppy has got it right here.

It is also worth noting that the only reason we still include the name attribute at all, is because this is the name given to the data point when you submit the form to the server and the data is sent across. It needs an identifying name so that you can grab it and put it in the database or whatever on the other side.

I am not 100% sure, but I don’t think it even submits the data if you don’t give it a name.

1 Like
#5

Another couple of things to note:

  1. Our oninput doc is here: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput

  2. We are currently in the process of rewriting the beginner’s forms docs, as they are not great at the moment. Expect these to improve soon.

1 Like
#6

Oh cool, will do. But honestly, I do think they’re great, as I’m going through some other HTML material that doesn’t even come close. Thank you !

2 Likes