Print Page

Sunday, April 11, 2010

HTML5 trying out output tag - works in Opera

Was playing this morning with the manifest file example from W3C's HTML5 spec and trying to figure out why the simple clock example didn't work, and got sidetracked into learning about the <output></output> element used in the example. <output></output> is shown on the W3C page with is shown with this example code:

<form onsubmit="return false">
<input name="a" step="any" type="number"> +
<input name="b" step="any" type="number"> =
<output onforminput="value = a.value + b.value"></output>
</form>

Couldn't get any output in Safari or Firefox or Chrome, so I poked around for any browser that could show me this working. Wikipedia saysthat Presto 2.0 supports it, so off I went and downloaded Opera 10.10.

The first thing I noticed is that Opera uses type=number and gives incrementing and decrementing arrow buttons at the right. I like them. The second thing is the default clipping of the numbers in the box is ugly. To be presentable it needs a bit of CSS padding, something like:

input,output { font: 2em sans-serif; }
input { padding: .2em; }

Opera got something working, 1 + 2 = 12. Okay so it's not recognizing that type=number means the math in onforminput should be handling values as numbers. But a bit of tweaking got it actually working.

<form onsubmit="return false">
<input name="a" step="any" type="number"> +
<input name="b" step="any" type="number"> =
<output onforminput="value = parseFloat(a.value) + parseFloat(b.value)"></output>
</form>

Or parseInt if you want an integer calculator. It's a bit ugly to get NaN until you enter the second value. So let's try seeding it with zeros by default.

<form onsubmit="return false">
<input name="a" step="any" value="0" type="number"> +
<input name="b" step="any" value="0" type="number"> =
<output onforminput="value = parseFloat(a.value) + parseFloat(b.value)"></output>
</form>

That looks pretty good.