HTML5 Forms - KISS time - Fronteers

Transcript

1. HTML5 Forms - KISS time
3. @robertnyman
4. 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
8. Forms
9. Thou shalt make things simple
14. Types
15. <input type="color"> <input type="date"> <input type="datetime"> <input type="datetime-local"> <input type="email"> <input type="month"> <input type="number"> <input type="range"> <input type="search" results="5" autosave="saved-searches"> <input type="tel"> <input type="time"> <input type="url"> <input type="week"> New form types
16. Siri, where is iPhone 5?
19. Attributes
20. <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"> New form attributes
21. <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">
22. <input type="text" mozactionhint="Next">
23. Elements
24. <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> New form elements
25. <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>
26. <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>
27. Validation
28. <input type="text" required>
30. Only spaces are regarded as input :-(
31. <input type="text" required style="visibility: hidden">
32. No dialog, won't submit form Dialog at element No dialog, won't submit form Dialog at top left of screen (not browser)
33. <input type="email" required>
35. No support for international characters, i.e. röbert@kissonline.com won't work
36. <input type="text" pattern="\d{2}\-\d{5}">
38. Empty fields are seen as valid
39. <input type="text" title="So you tried to skip me?" required>
41. <input type="text" pattern="\d{2}\-\d{5}" x-moz-errormessage="PLEASE, just do it right!">
43. elm.setCustomValidity("No, that's wrong!");
45. Remove custom validation message by setting it to an empty string...
46. elm.setCustomValidity("");
47. Using setCustomValidity totally kills the checkValidity method
50. (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); })();
51. Styling
52. input:required { border: 1px solid #00f; }
54. input:valid { border: 1px solid #0f0; } input:invalid { border: 1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
57. input:focus:invalid { border: 1px solid #f00; }
58. input:-moz-ui-valid { border: 1px solid #0f0; } input:-moz-ui-invalid { border: 1px solid #f00; }
59. input:-moz-placeholder { color: #f00; background: yellow; } input::-webkit-input-placeholder { color: #f00; background: yellow; }
61. Works in Safari, but only with the text color, not the background
62. 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; }
66. http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/
67. Can I use it?
69. Can I use it?
71. http://caniuse.com
75. The beauty of HTML5 Forms
76. Help each other
77. Robert Nyman robnyman@mozilla.com Twitter: @robertnyman robertnyman.com/speaking/ robertnyman.com/html5/ robertnyman.com/css3/