HTML5 workshop, forms
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,108
On Slideshare
2,106
From Embeds
2
Number of Embeds
2

Actions

Shares
Downloads
115
Comments
0
Likes
5

Embeds 2

https://twimg0-a.akamaihd.net 1
http://pmomale-ld1 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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