Welcome to our free Responsive Web Design Training tutorial. This tutorial is based on Webucator's Responsive Web Design Training course.
In this lesson, we'll investigate a bevy of handy new HTML5 features well suited for use on mobile devices, from form elements to local storage.
Our mobile sites will need to accept user input - registration forms, comment forms, and the like to ask users to send us, via form fields, some information. HTML5 makes available a set of new form input types and attributes that enhance the user experience. Keep in mind that adoption for some of these new features is spotty at best; we'll cover the better implemented options.
There are 13 new input types:
We'll concentrate on a few of the more useful types for mobile.
The tel type input expects a phone number. Many phones will present a numeric keyboard:
The date type of input allows the user to enter a date with no time zone. Some smartphone browsers present a date picker when a field of type date receives focus. iPhones with iOS version 5 or later, for instance, offer a date picker - earlier versions do not.
Fields of type email expect a valid email address. Many phones will show a contextually appropriate set of characters for input; the iPhone, for instance, displays the "@" character:
Fields of type url are for entering full website address. This field type excludes invalid characters for a URL, such as a space. Many phones will show a contextually appropriate set of characters for input; the iPhone, for instance, displays the ".com" key:
The placeholder attribute is among the more useful new HTML5 field attributes: it allows us to specify an example value for the field, a value that disappears when the user begins to enter content in the field.
The required attribute is very useful - but, sadly, not well supported among mobile browsers: the automatic client-side HTML5 form validation that works on desktop browsers is lacking on their mobile counterparts.
Let's create a simple registration form for the Jazz Calendar site. Open HTML5MobileSpecific/Demos/forms.html in a mobile browser - this is page from which the above screenshots were taken.
We use a
placeholder value for the first ("name") field, and ask the user for information of type
Like cookies, HTML5 local storage offers a mechanism for storing key/value pairs locally, within the client browser, even after you navigate away from the page, close the browser, etc. Unlike cookies, these data are never sent back to the server.
In addition, HTML5 offers session storage - similar to local storage, session storage persists between page requests, but does not persist after the browser is closed.
We use HTML5 web storage to store key/value pairs. Browsers typically limit the amount of client-side storage space allocated to a single domain to 5 megabytes and throw a QUOTA_EXCEEDED_ERR exception if you try to store more than that.
|length||Holds the number of key/value pairs|
|setItem(key,value)||Creates or updates a key/value pair|
|getItem(key)||Gets the value of the specified key|
|key(n)||Returns the nth key. Useful for iterating through key/value pairs|
|removeItem(key)||Removes the key/value pair for the given key|
|clear()||Removes all key/value pairs|
Let's look at a simple page on the Jazz Calendar site - open the file HTML5MobileSpecific/Demos/storage.html in your browser:
When the Save button is clicked, the
save() function is called: the current values from the
name2 fields are saved (
localStorage.setItem) to keys
set() - called when the Update from Saved button is clicked - sets the values of the two fields from the last saved values.
Note that each function checks first, via function
html5_storage_support(), to see if the current browser supports web storage.
In this exercise, you will create a registration form for the Pickup Soccer site:
We add fields of type
date. We use web storage to save the current fields values when the user clicks the Save button and restore them when the user click Restore from Saved.