More Related Content
Similar to HTML5 Forms - KISS time - Fronteers
Similar to HTML5 Forms - KISS time - Fronteers (20)
More from Robert Nyman (20)
HTML5 Forms - KISS time - Fronteers
- 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
- 15. 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">
- 20. 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">
- 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">
- 24. 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>
- 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>
- 32. No dialog, won't submit form
Dialog at element
No dialog, won't submit form
Dialog at top left of screen (not
browser)
- 35. No support for international
characters, i.e.
röbert@kissonline.com won't work
- 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);
})();
- 54. input:valid {
border: 1px solid #0f0;
}
input:invalid {
border: 1px solid #f00;
}
input:out-of-range {
border: 1px solid #f00;
}
- 59. input:-moz-placeholder {
color: #f00;
background: yellow;
}
input::-webkit-input-placeholder {
color: #f00;
background: yellow;
}
- 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;
}
