HTML5 Forms - KISS time

@robertnyman

Mozilla is a global non-protdedicated to putting you incontrol of your online experienceand shaping the future of theWeb for the public good

Forms

Thou shalt make things simple

Types

New form types autosave="saved-searches">

Siri, where is iPhone 5?

Attributes

New form attributes

Elements

New form elements

70%

Validation

Only spaces are regarded as input :-(

No dialog, wont submit formDialog at elementNo dialog, wont submit formDialog at top left of screen (notbrowser)

No support for internationalcharacters, i.e.rbert@kissonline.com wont work

Empty elds are seen as valid

elm.setCustomValidity("No, thats wrong!");

Remove custom validation messageby setting it to an empty string...

elm.setCustomValidity("");

Using setCustomValidity totallykills the checkValidity method

(function () { var oninvalidTest = document.getElementById("oninvalid-test"); oninvalidTest.addEventListener("input", function () { this.setCustomValidity(""); }, false); oninvalidTest.addEventListener("invalid", function () { this.setCustomValidity("No, thats 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 thetext 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.htmlhttp://wufoo.com/html5/

Can I use it?

Can I use it?

http://caniuse.com

The beauty of HTML5 Forms

Help each other

Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/