HTML5 Forms - KISS time
@robertnyman
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
Forms
Thou shalt make things simple
Types
New form types
autosave="saved-searches">
Siri, where is iPhone 5?
Attributes
New form attributes
Elements
New form elements
70%
(function () {
var range = document.getElementById("da-range"),
output = document.getElementById("da-range-output");
range.addEventListener("input", function () {
output.value = this.value;
}, false);
})();
Validation
Only spaces are regarded as input :-(
No dialog, won't submit form
Dialog at element
No dialog, won't submit form
Dialog at top left of screen (not
browser)
No support for international
characters, i.e.
röbert@kissonline.com won't work
Empty fields are seen as valid
elm.setCustomValidity("No, that's wrong!");
Remove custom validation message
by setting it to an empty string...
elm.setCustomValidity("");
Using setCustomValidity totally
kills the checkValidity method
(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);
})();
Styling
input:required {
border: 1px solid #00f;
}
input:valid {
border: 1px solid #0f0;
}
input:invalid {
border: 1px solid #f00;
}
input:out-of-range {
border: 1px solid #f00;
}
input:focus:invalid {
border: 1px solid #f00;
}
input:-moz-ui-valid {
border: 1px solid #0f0;
}
input:-moz-ui-invalid {
border: 1px solid #f00;
}
input:-moz-placeholder {
color: #f00;
background: yellow;
}
input::-webkit-input-placeholder {
color: #f00;
background: yellow;
}
Works in Safari, but only with the
text color, not the background
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;
}
http://www.quirksmode.org/
html5/inputs.html
http://www.quirksmode.org/
html5/inputs_mobile.html
http://wufoo.com/html5/
Can I use it?
Can I use it?
http://caniuse.com
The beauty of HTML5 Forms
Help each other
Robert Nyman
robertnyman.com/speaking/ robnyman@mozilla.com
robertnyman.com/html5/ Twitter: @robertnyman
robertnyman.com/css3/