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.