Working With HTML5 Forms

html5

html5I’m going to start a series of tutorials over the next weeks and months about HTML5. A lot of web developers are not leveraging HTML5 for a variety of reasons. We have been so trained over the past decade to embrace XHTML 1.0 that we’ve avoided the new DOCTYPE as something new that needs to be learned.

The good news is, XHTML is still valid in HTML5. The better news is now you have much more fun toys to play with.

Admittedly, I was one of those people who delayed jumping on the HTML5 bandwagon. In the past few months, however, that has changed. This series of articles will hopefully help the web developer to rethink how they develop on the web. Much of the stuff I’m about to talk about does not require a lot of extra heavy lifting.

Use the Correct DOCTYPE

Just as a remedial exercise of laying out the premise, your HTML must have the correct DOCTYPE. In XHTML 1.0/1.1, the first line of the HTML page had to be something along these lines

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

That’s relatively confusing, huh? Makes you want to go drink spoiled milk with lumpy crud in it just because it’s tasty, right?

To declare a web page as HTML5, you do the same thing you did with the old 1990s era HTML4, before the web embarked on the XHTML idea of doing work. HTML5 is, essentially, a reset to HTML4 with all kinds of additional goodness. You simply start a web document with:

<!DOCTYPE html>

A lot easier, right? Heck, you can type that in your sleep once you’ve typed it enough (I know you already do that with your drivers license and credit card numbers).

Form Field Types

With all that remedial knowledge in play, let’s take a look at HTML5 forms. The importance of this might be lost if the only thing you think about, when building HTML pages, are computer browsers. But if you recognize we live in a mobile world, you own an Android or iPhone and have tried to do any kind of form filling on those devices, then you might start to realize the importance of field types.

In XHTML, you might have a form that looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="" method="post">
    <label for="name">Full Name:
        <input type="text" name="name" id="name" />
    </label>

    <label for="phone">Phone Number:
        <input type="text" name="phone" id="phone" />
    </label>

    <label for="email">Email Address:
        <input type="text" name="email" id="email" />
    </label>

    <label for="website">Web URL:
        <input type="text" name="website" id="website" />
    </label>
</form>

In XHTML, we didn’t have a lot of field types. We had text (which everything above is), hidden, password (*’s entered in the input), checkboxes and radio buttons. You could add other types of inputs (That don’t use the <input> tag and include <select> and <textarea>.

This works in HTML5 too, but you’re limited by one default keyboard – which is fine, but fairly bland and not at all contextual.

What would happen if we changed that form to use different field types? HTML5 support a bunch. The four fields above can more sematically have the following types, in order: text, tel, email, url.

Watch what happens on the iPhone when the HTML looks like this (Android is similar):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form action="" method="post">
    <label for="name">Full Name:
        <input type="text" name="name" id="name" />
    </label>

    <label for="phone">Phone Number:
        <input type="tel" name="phone" id="phone" />
    </label>

    <label for="email">Email Address:
        <input type="email" name="email" id="email" />
    </label>

    <label for="website">Web URL:
        <input type="url" name="website" id="website" />
    </label>
</form>

For a standard text field, your keyboard will look like this:

iOS "text" field

iOS “text” field


For a phone number, using the tel type:
iOS "tel" field

iOS “tel” field


For an email address, using the email type:
iOS "email" field

iOS “email” field


And for a URL field using the url type:
iOS "url" field

iOS “url” field

There are, of course, other field types that I’m not going to go into too much here. But to whet your appetite, there is a color type that attaches to a color picker. There’s a date type that binds to a date picker. There’s even a range type which binds to a slider picker.

Important: Not all browsers support all types. In the event that a browser does not support a specific type, it falls back to standard text type and you can bind other external Javascript to make the same functionality happen.

Reference: All HTML5 field types with browser support.

Form Field Placeholder

Another useful feature is the placeholder. In XHTML, we might have a form that looks like this:

1
2
3
<form action="" method="post">
    <input type="search" name="search" id="search" value="Search for your term" />
</form>

This would create a simple field that would be pre-populated with “Search for your term”. From a usability standpoint, when a user brings that field into focus, the text is supposed to disappear and allow the typing of a search term. If nothing is typed and the focus is switched to a different element, then that phrase should re-appear.

XHTML Placeholder Text

XHTML Placeholder Text

You can’t do this without a little Javascript help (I like jQuery for this) – which is outside the scope of this article. But in HTML5, you only have to add placeholder="Search for your term". Different browsers handle this slightly different, but they all insert some dummy text that can be replaced by the user’s own input.

1
2
3
<form action="" method="post">
    <input type="text" name="search" id="search" placeholder="Search for your term" />
</form>
HTML5 Placeholder Attribute

On iOS, the Placeholder attribute plays light grey text in the field that is replaced as the user types.

Form Field Validation

Validation is such a tedious thing for developers. You can do all kinds of ugly things to make sure fields that are required actually have a value or that a field meets a certain criteria (for instance, a zip code field having 5 numeric characters to match the U.S. format).

In terms of requiring a field, it’s as simple as adding required to the input tag. In HTML5, you don’t have to have an explicit value for an attribute as you do in XHTML. You can if you want, type <input type="text" name="zip" required="required" /> but this is a habit that does not need muscle exercise. Just use:

1
2
3
4
<form action="" method="post">
    <input type="text" name="zip" required />
    <input type="submit" />
</form>

Firefox "Required" Error Bubble

Firefox “Required” Error Bubble

Chrome "Required" Error Bubble

Chrome “Required” Error Bubble

Browsers handle this differently but they all pop up a notice if the field isn’t populated on submission. On the right, you’ll see how Chrome and Firefox handle this respectively.

Let’s validate that zip code field, though, because this is where HTML5 really shines.

Using the pattern attribute, you can designate a regular expression to match formatting needs. If we want to limit the zip field to 5 numbers (most simplistic example – it could also have a potential extra dash and 4 numbers too), you might use this HTML:

1
2
3
4
<form action="" method="post">
    <input type="text" name="zip" required pattern="\d{5}" />
    <input type="submit" />
</form>

You can find a list of helpful regexes at html5pattern.com.

Summary

There’s a lot more we could get into here, but the point of this exercise is to prove that it doesn’t take much to start using HTML5 in development. Doing so will also push the boundaries of what has been more commonly possible and the barrier to entry is so low that I struggle to find a reason why HTML5 should not be used more commonly.

I’ll have more of these in the days and weeks to come so stay tuned, subscribe to the RSS feed and, as always, if you’re interested in hiring me for a full time gig or contract basis, please reach out to me. I am actively looking.

Five Articles I Wish I could Take Back

Drawing by Romancement on Flickr. Used by Creative Commons.

Last night I was going through Google archives looking for a post (that I never found) from 2007-2008. I went through 30 some pages of search results and remembered some of the older content I wrote. Some of it is stuff I either wish I didn’t write or I don’t agree with anymore. So I figured I’d share some of these posts and explain why I feel differently today:

It’s a Read/Write/Execute Web and We Just Live in It.

In this post from 2009, I posit that the first generation of the web was a read-only web. It was website that were not engaged with outside of simply reading. The second generation of the web was a “read/write” web marked by social interaction. The third I called a “read/write/execute” web where I railed on the future of the internet being API oriented and that government should

Drawing by Romancement on Flickr. Used by Creative Commons.

get on board with open data initiatives at the time.

Where I have a modestly different view today and I did slightly alude to it back then, is that the next generation of the web would actually be mobile. That prediction would have been true, and while APIs have played a significant role in making that happen, the APIs were merely a means to an end.

There are hundreds of thousand apps on the Apple app store and Android Market, not to mention other available app stores out there. Games now are played largely on smartphones and tablets as the shift away from consoles, while mild, is undoubtable. Today, with HTML5 and CSS3, websites are being creative with “responsive” design that allows for appropriate displays on appropriate devices.

Fun Fact: In 2004, I mused about what a world look like if we were not dependent on keyboards and mouses. I think we see that world in front of us now.

Are People Talking About You?

Originally published in 2007, I rode a train of personal brand for a long time. Not in that I had it. Everyone has something and some people have more than others. It’s actually not personal brand. It’s just reputation. I have a reputation. I have a reputation as a no-BS guy that doesn’t have a lot of respect for drama professionally or personally. I’m a confidant and advisor and I know WordPress really well. I get clients via word of mouth because I have a reputation for great work that speaks for itself with a fairly in depth intimacy with the WordPress core code. That’s reputation, but if you must, you can call it personal brand.

Regardless, I wrote this in that article:

It’s important to create great “stuff” (define “stuff” for yourself). It’s really important to stand out above the crowd. It’s more important to get other people talking about you. You are a brand. You are a subject matter expert. Well, you have the potential to be a subject matter expert. But you’re not yet. Not if no one is talking about you when you’re not around.

Aaron, you had me until, “It’s more important to get other people talking about you.”

This is why I was completely wrong. Nobody knows Mike McDerment. Well a lot of people do, but he isn’t a household name in tech or startups. However, he is the CEO of the largest cloud accounting company in the world. He built Freshbooks from the ground up to solve a problem that he had in 2003 (I just read his back story today).

Similarly, do you know Jason Cohen? You might know him because I’ve mentioned him or because you use WP Engine but otherwise, Jason isn’t a flashy guy. When I got the call from Jason right before moving to Austin to come help start WP Engine, I was thinking he was another guy named Cohen. I had no idea how successful and amazing he was. He wasn’t worried about promoting himself. Product is everything and product speaks for itself.

So I entirely disagree with my 2007 theory of self-aggrandizement. The only reason you have to worry about personal brand is if you’ve got nothing going for you. Otherwise, shut up and do epic shit. The rest will follow.

Age of Exploration 500 Years Later

First of all, this story is all fluff. I tell a nice story of explorers and all but it takes me to the last paragraph to even make a point, much less a thesis statement. And even then, I’m unsure of my point.

Imperial Stout

Photo by Brostad. Used by Creative Commons

What I think I was trying to say is that technology and, more specifically, embracing technology and change makes us better business people, better communicators, better humans.

If I had to rewrite the end of this post, I’d say this:

All of these explorers that went before, discovered new lands, races, tribes, experiences and opportunity opened up the door to new innovations. They were able to lay the groundwork and stepping stones for new expansion of influence and find new technologies that would allow for growth into the Industrial age.

I would then use the example of the Imperial Stout created in England for the Queen of Russia:

Through the expansion of the Russian Empire, King Peter the Great of Russia discovered British Stouts. As they became popular among Russians, a problem emerged. There was no way to get these stouts in Russia because the trip was so long that the beer would spoil before arrival. In the 1800s, an English brewery, responding to demand, developed a way of “hopping” their stouts in such a way to allow the beer to be preserved and delivered to Queen Catherine of Russia. Thus, this more hoppy version of the typical stout became known as the Russian Imperial Stout, or just the Imperial Stout.

I would use that segue to explain that even in our technology-centric world, it takes innovators developing technology in order for other, new technologies to emerge. A classic example of this from the programming world is that of Ajax, an extension of JavaScript which has been around for years. Ajax is a technology that allows background communication with servers without the page reloading. Without Ajax being developed a few years ago, the interactivity we have come to expect on sites everywhere would not be able to exist.

So it’s not that I disagree with myself so much as I didn’t explore the real premise of the article enough.

Roadmap to Victory at the Washington Post

This article is still an interesting one. On one side, I saw the Washington Post, and traditionally print-based journalism, as a dying trade. On the other I made a naive assumption that newspapers exist for the sake of journalism.

Both of these premises are wrong. Let’s address both presuppositions.

Traditionally print-based journalism is alive and well, as it should be. It isn’t going anywhere, nor should it. Blogs and digital media are not in competition with newspapers. They complement newspapers. Both sides serve different roles. While it’s true that newspapers (print) can’t break news anymore, they should count their blessings.

There are no opportunities to destroy credibility with Dewey Beats Truman moments (or more recently, Mandate Struck Down, as famously misreported by CNN). There are plenty of opportunities for solid, in depth investigative reporting-style journalism. I know it costs money. So save money by not trying to break news and let the digital sources do that.

Secondly, my cynical take feeds right into that last sentence and is why the challenge lies in money. Journalism today is an art, and is a respectable skill, trade and profession. But news organizations aren’t run by journalists. They are run by business people. Many of them are not non-profits, so they are implicitly for-profit. That means the bottom-line, which is dictated by readership, circulation and sometimes the ratings of television sister networks, are what inform the decisions of the company.

Samuel Zell, owner of the Tribune Company, ran his media empire as an entertainment company and not a journalism company. Guess what? Tribune is still trying to emerge from bankruptcy protection.

Let’s get back to the Washington Post, though. When I wrote this story, WaPo was trailing in the digital race. Today, they did everything other than what I suggested in my piece and have become one of the foremost digital journalism centers around. Their blogs, including Capital Weather Gang and DC Sports Blog are stellar and I still read them regularly, even though neither pertain to me anymore.

Unlike when I wrote this post, WaPo’s digital and print operations are integrated, instead of separate. Online metrics are key and closely watched. Online traffic is the indicator of success at the Post. Circulation is not. Subscriptions are not. Traffic. Eyeballs on their apps, their blogs, their articles. That’s the important metric at the Post. No longer are digital operations a second class citizen. They are equal or greater than print.

Even the New York Times sees it:

They can look at where online visitors are when they read the site. And if their computers are registered with a government suffix — .gov, .mil, .senate or .house — editors know they are reaching the readers they want. “That’s our influential audience,” Mr. Narisetti said. “If a blog is over all not doing that great but has a higher percentage of those, we say don’t worry about it.”

The Washington Post is smarter than I am, clearly, and I applaud them for it.

Valleyboys: It’s All About the Money

Wow. How far off the mark can I be? This article, which matter-of-factly states something that was anything-but-fact, is a clear example o my lack of experience in 2007. In 2007, I apparently thought I knew everything there was about running a startup and raising funding. That from a perspective of someone who was  just over a year out of the corporate world working for my first startup. I wasn’t a founder nor had I raised money. I didn’t understand a thing about reputation (there’s that word again) of founders, the importance of co-founders, how to safely determine a valuation based on things like profit and loss, revenue, the value of burn, the value of users and more factors that go in to that process.

I don’t really know why I was so pissy at the Valley, but in 2012, let me go on record and say that it’s not all about money in the Valley and there are a lot of people working hard to create value. Many do raise money, but many bootstrap as well. There’s pros and cons to both, and that’s left to a different article.

In my defense, there is some absurd money flying around not just in the Valley, but everywhere. For instance, I still don’t see the reasoning behind a $30M raise on an 8x valuation for Path, a round that included Virgin empire mogul Sir Richard Branson. That company has pivoted so many times and still doesn’t seem to have a clue what it’s doing. Nor do I understand the $1 BILLION Instagram buyout by Facebook.

Here’s the money line (see what I did there?). Whether there’s a lot of money flowing or not is not the question. It is a question, but not the question. The question is whether there are good, innovative products being built that create value in the marketplace. If that can be done with no money, great. If it requires funding money on orders of magnitude, that’s a decision that the investors and entrepreneurs have to make. Money doesn’t come without strings. Big raises with low revenue and no profit generally mean the investors get more of the company and if the company sells, then the founders get less. But then big raises for profitable companies with low burn and high user numbers could also mean that the investors just want a piece of the action, even if they don’t get a big piece of the pie. But there’s always strings and the amount of money matters less than the percentage of ownership and the length of runway as it relates to a burn rate and overhead.

So if I believed in deleting articles entirely, this one would be a prime candidate. :)

In the spirit of making sure I’m not perceived as a douchebag, here are some good article I wrote many moons ago. Enjoy!

Friends vs. Fans, The Most Expensive Question, Social Media: How Much is Too Much?,