Workshop given at Jfokus 2012

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">

14. <input type="text" mozactionhint="Next">

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

20. <input type="text" required>

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)

25. <input type="email" required>

27. No support for international
characters, i.e.
röja@kissonline.com won't work

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

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!">

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

37. Remove custom validation message
by setting it to an empty string...

38. elm.setCustomValidity("");

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/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/