HTML5 Forms - KISS time - Fronteers

Transcript

1. HTML5 Forms - KISS time

2. None

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
5. None
6. None
7. None

8. Forms

9. Thou shalt make things simple

10. None
11. None
12. None
13. None

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?

17. None
18. None

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>

29. None

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>

34. None

35. No support for international characters, i.e. rö[email protected] won't work

36. <input type="text" pattern="\d{2}\-\d{5}">

37. None

38. Empty fields are seen as valid

39. <input type="text" title="So you tried to skip me?" required>

40. None

41. <input type="text" pattern="\d{2}\-\d{5}" x-moz-errormessage="PLEASE, just do it right!">

42. None

43. elm.setCustomValidity("No, that's wrong!");

44. None

45. Remove custom validation message by setting it to an empty

    string...

46. elm.setCustomValidity("");

47. Using setCustomValidity totally kills the checkValidity method

48. None
49. None

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; }

53. None

54. input:valid { border: 1px solid #0f0; } input:invalid { border:

    1px solid #f00; } input:out-of-range { border: 1px solid #f00; }
55. None
56. None

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; }
60. None

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; }
63. None
64. None
65. None

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?

68. None

69. Can I use it?

70. None

71. http://caniuse.com

72. None
73. None
74. None

75. The beauty of HTML5 Forms

76. Help each other

77. Robert Nyman [email protected] Twitter: @robertnyman robertnyman.com/speaking/ robertnyman.com/html5/ robertnyman.com/css3/