Successfully reported this slideshow.
Your SlideShare is downloading. ×

HTML5 Forms - KISS time - Fronteers

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
HTML5 workshop, forms
HTML5 workshop, forms
Loading in …3
×

Check these out next

1 of 77 Ad
Advertisement

More Related Content

Advertisement

More from Robert Nyman (20)

Advertisement

HTML5 Forms - KISS time - Fronteers

  1. HTML5 Forms - KISS time
  2. @robertnyman
  3. Mozilla is a global non-profit dedicated to putting you in control of your online experience and shaping the future of the Web for the public good
  4. Forms
  5. Thou shalt make things simple
  6. Types
  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. Siri, where is iPhone 5?
  9. Attributes
  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="Don't validate"> <input type="submit" formtarget="_blank" value="Post to new tab/window">
  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. <input type="text" mozactionhint="Next">
  13. Elements
  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. <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. <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. Validation
  18. <input type="text" required>
  19. Only spaces are regarded as input :-(
  20. <input type="text" required style="visibility: hidden">
  21. No dialog, won't submit form Dialog at element No dialog, won't submit form Dialog at top left of screen (not browser)
  22. <input type="email" required>
  23. No support for international characters, i.e. röbert@kissonline.com won't work
  24. <input type="text" pattern="d{2}-d{5}">
  25. Empty fields are seen as valid
  26. <input type="text" title="So you tried to skip me?" required>
  27. <input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE, just do it right!">
  28. elm.setCustomValidity("No, that's wrong!");
  29. Remove custom validation message by setting it to an empty string...
  30. elm.setCustomValidity("");
  31. Using setCustomValidity totally kills the checkValidity method
  32. (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); })();
  33. Styling
  34. input:required { border: 1px solid #00f; }
  35. input:valid { border: 1px solid #0f0; } input:invalid { border: 1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
  36. input:focus:invalid { border: 1px solid #f00; }
  37. input:-moz-ui-valid { border: 1px solid #0f0; } input:-moz-ui-invalid { border: 1px solid #f00; }
  38. input:-moz-placeholder { color: #f00; background: yellow; } input::-webkit-input-placeholder { color: #f00; background: yellow; }
  39. Works in Safari, but only with the text color, not the background
  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. http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/
  42. Can I use it?
  43. Can I use it?
  44. http://caniuse.com
  45. The beauty of HTML5 Forms
  46. Help each other
  47. Robert Nyman robertnyman.com/speaking/ robnyman@mozilla.com robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/

×