HTML5 workshop, forms
6 likes•4,155 views
The document discusses new HTML5 form types, attributes, and elements. It provides examples of new input types like color, date, and range. It also covers new form attributes, validation methods and styles. Validation is improved but still has limitations. Styling is introduced for states like required, valid, invalid and focused using CSS pseudo-classes. Custom validation messages can be set but override the default checkValidity method.
![<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">](https://image.slidesharecdn.com/html5workshopforms-120213100926-phpapp02/85/HTML5-workshop-forms-13-320.jpg)
HTML5 workshop, forms
- 1. HTML5 Forms - KISS time
- 2. Forms
- 3. Thou shalt make things simple
- 7. Types
- 8. 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">
- 11. Attributes
- 12. 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">
- 13. <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">
- 15. Elements
- 16. 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>
- 17. <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>
- 18. <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>
- 19. Validation
- 22. Only spaces are regarded as input :-(
- 23. <input type="text" required style="visibility: hidden">
- 24. No dialog, won't submit form Dialog at element No dialog, won't submit form Dialog at top left of screen (not browser)
- 27. No support for international characters, i.e. rö[email protected] won't work
- 30. Empty fields are seen as valid
- 31. <input type="text" title="So you tried to skip me?" required>
- 33. <input type="text" pattern="d{2}-d{5}" x-moz-errormessage="PLEASE, just do it right!">
- 37. Remove custom validation message by setting it to an empty string...
- 39. Using setCustomValidity totally kills the checkValidity method
- 42. (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); })();
- 43. Styling
- 44. input:required { border: 1px solid #00f; }
- 46. input:valid { border: 1px solid #0f0; } input:invalid { border: 1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
- 49. input:focus:invalid { border: 1px solid #f00; }
- 50. input:-moz-ui-valid { border: 1px solid #0f0; } input:-moz-ui-invalid { border: 1px solid #f00; }
- 51. input:-moz-placeholder { color: #f00; background: yellow; } input::-webkit-input-placeholder { color: #f00; background: yellow; }
- 53. Works in Safari, but only with the text color, not the background
- 54. 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; }
- 58. http://www.quirksmode.org/ html5/inputs.html http://www.quirksmode.org/ html5/inputs_mobile.html http://wufoo.com/html5/
- 62. Robert Nyman robertnyman.com/speaking/ [email protected] robertnyman.com/html5/ Twitter: @robertnyman robertnyman.com/css3/