HTML5 Forms - KISS time
@robertnyman
Mozilla is a global non-profitdedicated to putting you incontrol of your online experienceand shaping the future of theWeb ...
Forms
Thou shalt make things simple
Types
New form types<input type="color">             <input type="range"><input type="date">              <input type="search"  ...
Siri, where is iPhone 5?
Attributes
New form attributes<input type="text" autocomplete="off"><input type="text" autofocus><input type="submit" formaction="htt...
<input type="text" list="data-list"><input type="range" max="95"><input type="range" min="2"><input type="file" multiple><...
<input type="text" mozactionhint="Next">
Elements
New form elements<input type="text" list="data-list"><datalist id="data-list">    <option value="Hugo Reyes">    <option v...
<keygen></keygen><meter min="0" max="10" value="7"></meter><input type="range" id="range"><output for="range" id="output">...
<input type="range" id="da-range"><output id="da-range-output"></output><script>    (function () {         var range = doc...
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"...
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 so...
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;    back...
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...
http://www.quirksmode.org/                          html5/inputs.html                          http://www.quirksmode.org/ ...
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/c...
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
HTML5 Forms - KISS time - Fronteers
Upcoming SlideShare
Loading in...5
×

HTML5 Forms - KISS time - Fronteers

10,967

Published on

Published in: Technology, Design
1 Comment
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
10,967
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
145
Comments
1
Likes
10
Embeds 0
No embeds

No notes for slide

HTML5 Forms - KISS time - Fronteers

  1. 1. HTML5 Forms - KISS time
  2. 2. @robertnyman
  3. 3. Mozilla is a global non-profitdedicated to putting you incontrol of your online experienceand shaping the future of theWeb for the public good
  4. 4. Forms
  5. 5. Thou shalt make things simple
  6. 6. Types
  7. 7. 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">
  8. 8. Siri, where is iPhone 5?
  9. 9. Attributes
  10. 10. 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">
  11. 11. <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">
  12. 12. <input type="text" mozactionhint="Next">
  13. 13. Elements
  14. 14. 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>
  15. 15. <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>
  16. 16. <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>
  17. 17. Validation
  18. 18. <input type="text" required>
  19. 19. Only spaces are regarded as input :-(
  20. 20. <input type="text" requiredstyle="visibility: hidden">
  21. 21. No dialog, wont submit formDialog at elementNo dialog, wont submit formDialog at top left of screen (notbrowser)
  22. 22. <input type="email" required>
  23. 23. No support for internationalcharacters, i.e.röbert@kissonline.com wont work
  24. 24. <input type="text" pattern="d{2}-d{5}">
  25. 25. Empty fields are seen as valid
  26. 26. <input type="text" title="So you triedto skip me?" required>
  27. 27. <input type="text" pattern="d{2}-d{5}"x-moz-errormessage="PLEASE, just do itright!">
  28. 28. elm.setCustomValidity("No, thats wrong!");
  29. 29. Remove custom validation messageby setting it to an empty string...
  30. 30. elm.setCustomValidity("");
  31. 31. Using setCustomValidity totallykills the checkValidity method
  32. 32. (function () { var oninvalidTest = document.getElementById("oninvalid-test"); oninvalidTest.addEventListener("input", function () { this.setCustomValidity(""); }, false); oninvalidTest.addEventListener("invalid", function () { this.setCustomValidity("No, thats wrong!"); }, false);})();
  33. 33. Styling
  34. 34. input:required { border: 1px solid #00f;}
  35. 35. input:valid { border: 1px solid #0f0;}input:invalid { border: 1px solid #f00;}input:out-of-range { border: 1px solid #f00;}
  36. 36. input:focus:invalid { border: 1px solid #f00;}
  37. 37. input:-moz-ui-valid { border: 1px solid #0f0;}input:-moz-ui-invalid { border: 1px solid #f00;}
  38. 38. input:-moz-placeholder { color: #f00; background: yellow;}input::-webkit-input-placeholder { color: #f00; background: yellow;}
  39. 39. Works in Safari, but only with thetext color, not the background
  40. 40. 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;}
  41. 41. http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.htmlhttp://wufoo.com/html5/
  42. 42. Can I use it?
  43. 43. Can I use it?
  44. 44. http://caniuse.com
  45. 45. The beauty of HTML5 Forms
  46. 46. Help each other
  47. 47. Robert Nymanrobertnyman.com/speaking/ robnyman@mozilla.comrobertnyman.com/html5/ Twitter: @robertnymanrobertnyman.com/css3/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×