HTML5 Forms - To: Information and samples for HTML5 and related APIs

Code used in this page

<div>
    <h3>Datalist</h3>
    <input type="text" name="characters" list="data-list">
    <datalist id="data-list">
        <option value="Hugo Reyes">
        <option value="Jack Shephard">
        <option value="James 'Sawyer' Ford">
        <option value="John Locke">
        <option value="Sayid Jarrah">
    </datalist>
</div>

<div>
    <h3>Keygen</h3>
    <keygen name="key"></keygen>
</div>

<div>
    <h3>Meter</h3>
    <meter min="0" max="10" value="7"></meter>
</div>

<div>
    <h3>Output</h3>
    <p>If input type="range" and the oninput event on forms are supported in your web browser, slide the range below to see the value in the output element.</p>
    <input type="range" id="range" name="range">
    <output for="range" id="output"></output>
</div>

<script>
    (function () {
        var theForm = document.getElementById("the-form");
        if ("oninput" in theForm) {
            theForm.addEventListener("input", function () {
                output.value = range.value;
            }, false);
        }
    })();
</script>

<div>
    <h3>Progress</h3>
    <progress max="100" value="70">70%</progress>
</div>

<div>
    <input type="submit" value="Send">
</div>