too much output - Avoiding common HTML5 output mistakes

showcases the most common mistake explaining the new output element.

by trixta

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/loaders/sssl.js"></script>
<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/polyfiller.js"></script>
<h1>too much output - Avoiding common HTML5 output mistakes</h1>

<form>
    <h2><a href="http://dev.opera.com/articles/view/new-form-features-in-html5/#output">common</a> <a href="http://css-tricks.com/8964-value-bubbles-for-range-inputs/">bad</a> <a href="http://html5doctor.com/element-index/#output-element">example</a> - explaining the output element</h2>
    <input type="range" oninput=" $( output ).prop( 'value', value ) " />
    <output id="output">50</output>
</form>
<h2>Why is the code above a mistake?</h2>
<p><strong>The output element represents the result of a calculation.</strong></p>

<form>
    <h2>A googd default calculation example:</h2>
    <input name="a" type="number" value="1" oninput=" $( o ).prop( 'value' , ( $.prop( this, 'valueAsNumber') || 0 ) + ( $.prop( b, 'valueAsNumber') || 0 ) ) "> +
    <input name="b" type="number" value="1" oninput=" $( o ).prop( 'value' , ( $.prop( this, 'valueAsNumber') || 0 ) + ( $.prop( a, 'valueAsNumber') || 0 ) ) "> =
    <output name="o">2</output>
</form>

<form>
    <h2>A good non-calculation example:</h2>
    <p>But of course, you don't need to take the term "calculation" too seriously. Here is a good example without a real calculation:</p>
    <script>
        var rangeMap = ['Poor', 'Okay', 'Good', 'Great', 'Awesome'];
    </script>
    <input type="range" id="range3" max="4" oninput=" $( output2 ).prop( 'value', rangeMap[value] ) " />
    <output id="output2" for="range3">Good</output>
</form>
<h2>Again, why is the first example a mistake?</h2>

<p>The output element has a special a11y-property. Everytime...

CSS

#quietOutput {
            background: transparent;
            color: #000;
            border: none;
            width: auto;
            padding: 0;
        }

input[type="number"] {
     padding: 4px 2px;   
}

JavaScript

jQuery.webshims.polyfill('forms-ext');