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>