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/