Skip to main content Skip to secondary navigation Accessibility Feedback

Better Forms

Ever notice how on some sites, the keyboard on your iPhone or Android changes based on what you’re doing?

Entering a URL? Here’s a .com button. Entering an email address? The @ symbol is conveniently located on the main keyboard.

This feature improves the usability of your site on mobile devices. It’s actually really easy to implement, and it’s already built-in to the Go Mobile First theme.

Here’s how to add it to your site…

Changing Input Type #

Just a quick heads up: this is an HTML5 feature.

Most input fields have a type="text" tag associated with them. For URLs, change this to type="url". For email addresses, type="email". There’s a bunch of stuff you can do with numbers, too.

What about older browsers that don’t support HTML5? They’ll treat the new tags like they’re type="text", so nothing breaks.

Learn more at Dive Into HTML5.

Bonus: Required Fields #

Content Management Systems like WordPress do server-side validation on forms and kick out an error if a required field is left blank. However, this requires your site to send data to the server, get a reply, and then reload the page. Not the fastest way to do things.

HTML5 offers browser-based form validation. Just add required to the required field, and modern browsers will generate an error if it’s left blank. Once again, older browsers just ignore it.

  1. Go Mobile First
  2. Dive Into HTML5
  • More articles on...
  • Code

Have any questions or comments about this post? Email me at chris@gomakethings.com or contact me on Twitter at @ChrisFerdinandi.

Get Weekly Digests