Download - HTML5 workshop, forms
HTML5 Forms - KISS time
Forms
Thou shalt make things simple
Types
<input type="color">
<input type="date">
<input type="datetime">
<input type="datetime-local">
<input type="email">
<input type="month">
<input type="number">
<input type="range">
<input type="search" results="5" autosave="saved-searches">
<input type="tel">
<input type="time">
<input type="url">
<input type="week">
New form types
Attributes
<input type="text" autocomplete="off">
<input type="text" autofocus>
<input type="submit" formaction="http://example.org/save" value="Save">
<input type="submit" formenctype="application/x-www-form-urlencoded" value="Save with enctype">
<input type="submit" formmethod="POST" value="Send as POST">
<input type="submit" formnovalidate value="Don't validate">
<input type="submit" formtarget="_blank" value="Post to new tab/window">
New form attributes
<input type="text" list="data-list">
<input type="range" max="95">
<input type="range" min="2">
<input type="file" multiple>
<input type="text" readonly>
<input type="text" required>
<input type="text" pattern="[A-Z]*">
<input type="text" placeholder="E.g. Robocop">
<input type="text" spellcheck="true">
<input type="number" step="5">
<input type="text" mozactionhint="Next">
Elements
<input type="text" 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>
New form elements
<keygen></keygen>
<meter min="0" max="10" value="7"></meter>
<input type="range" id="range"><output for="range" id="output"></output>
<progress max="100" value="70">70%</progress>
<input type="range" id="da-range"><output id="da-range-output"></output><script> (function () { var range = document.getElementById("da-range"), output = document.getElementById("da-range-output"); range.addEventListener("input", function () { output.value = this.value; }, false); })();</script>
Validation
<input type="text" required>
Only spaces are regarded as input :-(
<input type="text" required style="visibility: hidden">
No dialog, won't submit form
Dialog at element
No dialog, won't submit form
Dialog at top left of screen (not browser)
<input type="email" required>
No support for international characters, i.e. rö[email protected] won't work
<input type="text" pattern="\d{2}\-\d{5}">
Empty fields are seen as valid
<input type="text" title="So you tried to skip me?" required>
<input type="text" pattern="\d{2}\-\d{5}" x-moz-errormessage="PLEASE, just do it right!">
elm.setCustomValidity("No, that's wrong!");
Remove custom validation message by setting it to an empty string...
elm.setCustomValidity("");
Using setCustomValidity totally kills the checkValidity method
(function () { var oninvalidTest = document.getElementById("oninvalid-test"); oninvalidTest.addEventListener("input", function () { this.setCustomValidity(""); }, false);
oninvalidTest.addEventListener("invalid", function () { this.setCustomValidity("No, that's wrong!"); }, false);})();
Styling
input:required { border: 1px solid #00f;}
input:valid { border: 1px solid #0f0;}
input:invalid { border: 1px solid #f00;}
input:out-of-range { border: 1px solid #f00;}
input:focus:invalid { border: 1px solid #f00;}
input:-moz-ui-valid { border: 1px solid #0f0;}
input:-moz-ui-invalid { border: 1px solid #f00;}
input:-moz-placeholder { color: #f00; background: yellow;}
input::-webkit-input-placeholder { color: #f00; background: yellow;}
Works in Safari, but only with the text color, not the background
input::-webkit-validation-bubble-message { color: #f00; background: #000; border: 10px solid #f00; -webkit-box-shadow: 0 0 0 0;}
input::-webkit-validation-bubble-arrow { background: #ff3456; border-color: orange; -webkit-box-shadow: 0 0 0 0;}
http://www.quirksmode.org/html5/inputs.html
http://www.quirksmode.org/html5/inputs_mobile.html
http://wufoo.com/html5/
Robert [email protected]: @robertnyman
robertnyman.com/speaking/robertnyman.com/html5/robertnyman.com/css3/