HTML5 Forms - KISS time

@robertnyman

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

Thou shalt make things simple

New form types<input type="color"> <input type="range"><input type="date"> <input type="search" results="5"<input type="datetime"> autosave="saved-searches"><input type="datetime-local"> <input type="tel"><input type="email"> <input type="time"><input type="month"> <input type="url"><input type="number"> <input type="week">

Siri, where is iPhone 5?

Attributes

New form 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="Dont validate"><input type="submit" formtarget="_blank" value="Post to new tab/window">

Elements

New form 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>

<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

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.röbert@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

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?

http://caniuse.com

The beauty of HTML5 Forms

Help each other

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

http://muffinresearch.co.uk	2117
http://lanyrd.com	88
http://paper.li	41
http://fronteers.nl	32
http://a0.twimg.com	18
http://feeds.feedburner.com	16
http://us-w1.rockmelt.com	15
http://www.onlydoo.com	6
http://localhost	4
http://drawn.ca	3
http://slideclip.b-prep.com	2
http://translate.googleusercontent.com	2
http://admin.totalmarketing.com	2
http://www.slideshare.net	2
http://forsearch.net	1

HTML5 Forms - KISS time - Fronteers

by Robert Nyman on Oct 06, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 2,349

Statistics

HTML5 Forms - KISS time - Fronteers — Presentation Transcript