Subscribe by RSS
Form of… HTML5!
6/9/2010 12:00 AM By Jeff BIf you caught the Wonder Twins reference in the title, pat yourself on the back. Now, on to examine all the delights that HTML5 can offer us freelance designers and developers when it comes to forms. So, let’s take a look at a basic HTML form:
<form>
<input name="q">
<input type="submit" value="Search">
</form>Beautiful, we’ve got ourselves a search form. Now, let’s jazz it up a bit. How about some placeholder text?
<form>
<input name="q" placeholder="Enter your query here">
<input type="submit" value="Search">
</form>Look ma, no JavaScript! If you don’t see any placeholder text in the form above, then your browser doesn’t support this property yet. Check out Firefox or Safari, though—they rock the house.
Next up, there’s the autofocus property. Traditionally, this is handled via JavaScript, but that’s obtrusive to anyone who doesn’t like this behavior, or finds that it detracts from usability.
<form>
<input name="q" autofocus>
<input type="submit" value="Search">
</form>Now, if you want to ensure the behavior is consistent, you can detect for whether the browser supports autofocus or not, and only run some autofocusing JavaScript if there’s no native support. Here’s an example with JavaScript fallback:
<form name="autofocus-fallback">
<input id="q" autofocus>
<script>
if (!("autofocus" in document.createElement("input"))) {
document.getElementById("q").focus();
}
</script>
<input type="submit" value="Go">
</form>Ok, so now we’ve jazzed up our basic text input fields. Now on to some of the “specialized” new input types. Any browser that doesn’t know about these new input types falls back to treating them like plain-Jane text inputs, which is just fine. First up is the email input type:
<form>
<input type="email">
<input type="submit" value="Go">
</form>Now, for browsers that support the new type fully, we get whatever features the browser maker offers: Opera adds a little email icon, Safari and Chrome do nothing, and the iPhone, well, it gives us that email-optimized keyboard instead of the stock one. You know, the one with the “@” symbol in the middle, with the period next to it? Pretty awesome. This is one of those little things that will make your more observant users smile a little and thank you for being so inconspicuously awesome.
Next up, we’ve got <input type="url">. Like the email input type, this one doesn’t really do anything special in desktop browsers, but on the iPhone, again we get an optimized keyboard. This time, it’s the one with the forward slash in the bottom center, instead of the “@” symbol, and the “.com” button instead of just the period.
An aside: On the iPhone, if you hold your finger down on certain “keys,” you get a pop-up menu of extra characters. In the case of the period key on the email-optimized keyboard and the “.com” key on the URL-optimized keyboard, you get a pop-up menu of alternate top-level domains like .org, .edu, etc. Very cool, and quite a time-saver! Try it out on all different keys and enjoy some fancier text.
Now, how about another common form control, like a time- or date-picker? HTML5 has that. Sadly, only Opera has implemented support for it, but this is one of those things that hopefully will catch on soon. We’ve got all of these marvelous options:
<input type="date"><input type="datetime"><input type="month"><input type="time"
And a few others as well. For now, since Opera is the only offering this kind of HTML 5 support at the moment, you’ll like want to utilize a JavaScript-based fallback, like so:
<form>
<input type="date">
</form>
…
<script>
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// No native date picker support
// Use Dojo/jQueryUI/YUI/Closure to create one,
// then dynamically replace that <input> element.
}
</script>There are a few other things offered in HTML5’s form offerings, but one last, excellent bit that’s only supported in Opera for the moment (those guys really love forms!) is automatic input validation, within the browser. If you set the type attribute to "email" or "url," Opera runs these through a validator and prevents the form’s submission if the inputed text isn’t valid. Hopefully, Opera won’t be the only HTML 5 browser to support this feature for long.
If you’d like to examine the entirely of what’s now available with input, head on over to the HTML5 spec.
Tags: cheat-sheet, HTML 5
