HTML5 Forms - KISS time - Fronteers
Upcoming SlideShare
Loading in...5
×
 

HTML5 Forms - KISS time - Fronteers

on

  • 11,317 views

 

Statistics

Views

Total Views
11,317
Views on SlideShare
7,660
Embed Views
3,657

Actions

Likes
9
Downloads
54
Comments
1

23 Embeds 3,657

http://muffinresearch.co.uk 3043
https://muffinresearch.co.uk 208
http://fronteers.nl 129
http://lanyrd.com 93
http://paper.li 41
http://muffinresearch.wordpress.com 39
http://feeds.feedburner.com 23
http://a0.twimg.com 18
http://us-w1.rockmelt.com 15
https://twitter.com 10
https://fronteers.nl 7
http://www.onlydoo.com 6
http://localhost 4
http://drawn.ca 3
http://translate.googleusercontent.com 3
http://www.ofelio.com 3
http://www.rssmountain.com 3
http://www.slideshare.net 2
http://slideclip.b-prep.com 2
http://admin.totalmarketing.com 2
https://inoreader.com 1
http://forsearch.net 1
https://www.linkedin.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Forms - KISS time - Fronteers HTML5 Forms - KISS time - Fronteers Presentation Transcript

  • HTML5 Forms - KISS time
  • @robertnyman
  • Mozilla is a global non-profitdedicated 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<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">
  • <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
  • 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>
  • <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" requiredstyle="visibility: hidden">
  • No dialog, wont submit formDialog at elementNo dialog, wont submit formDialog at top left of screen (notbrowser)
  • <input type="email" required>
  • No support for internationalcharacters, i.e.röbert@kissonline.com wont work
  • <input type="text" pattern="d{2}-d{5}">
  • Empty fields are seen as valid
  • <input type="text" title="So you triedto skip me?" required>
  • <input type="text" pattern="d{2}-d{5}"x-moz-errormessage="PLEASE, just do itright!">
  • 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/