facebook google plus twitter
Webucator's Free Developing Mobile Websites Tutorial

Lesson: HTML5: Mobile Specific

Welcome to our free Developing Mobile Websites 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.

Lesson Goals

  • Learn how to use new HTML5 form input types on mobile devices.
  • Learn how to use new HTML5 form input attributes.

Forms

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:

  1. search
  2. tel
  3. url
  4. email
  5. datetime
  6. date
  7. month
  8. week
  9. time
  10. datetime-local
  11. number
  12. range
  13. color

We'll concentrate on a few of the more useful types for mobile.

Telephone

The tel type input expects a phone number. Many phones will present a numeric keyboard:

tel field

Dates

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.

date field

Email

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:

email field

Web Address

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:

url field

New Field Attributes

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.

A Jazz Calendar Registration Form

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.

Code Sample:

HTML5MobileSpecific/Demos/forms.html
<!DOCTYPE html>
<html>
<head>
  <title>Jazz Calendar - Local Live Jazz Music Events</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/forms.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>

<body>
  <div id="container">
	<div id="main">
	  <header>
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
	  </header>
	  <nav>
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="performances.html">Performances</a></li>
		  <li><a href="about.html">About</a></li>
		  <li><a href="contact.html">Contact</a></li>
		</ul>
	  </nav>
	  <div id="maincontent">
		  <article>
				<h2>Register</h2>
				<p>Use the form below to register as a <em>Jazz Calendar</em> user.</p>
				<form action="forms.html" method="post">
					<label for="name">Name</label><br>
					<input type="text" name="name" id="name" placeholder="Jane Doe"><br>
					<br>
					<label for="phone">Phone</label><br>
					<input type="tel" name="phone" id="phone"><br>
					<br>
					<label for="email">Email</label><br>
					<input type="email" name="email" id="email"><br>
					<br>
					<label for="website">Website URL</label><br>
					<input type="url" name="website" id="website"><br>
					<br>
					<label for="DOB">Date of Birth</label><br>
					<input type="date" name="DOB" id="DOB"><br>
					<br>
					<input type="submit">
				</form>
			
		  </article>
	  </div>
	  <aside id="sidebar">
		  <h3>Signup</h3>
		  <p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
	  </aside>
	  <footer id="contactinfo">
		<p>Jazz Calendar
		<br />123 Fake Street, Sometown, USA | 555-123-4567</p>
	  </footer>
	</div>
  </div>
</body>
</html>

Code Explanation

We use a placeholder value for the first ("name") field, and ask the user for information of type tel, email, url, and date.

Local Storage

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.

Here are the JavaScript methods and properties for working with web storage:

Web Storage Methods & Properties
Method/Property Description
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

Local Storage Example

Let's look at a simple page on the Jazz Calendar site - open the file HTML5MobileSpecific/Demos/storage.html in your browser:

local storage example

  1. Enter "Jane" for the Name 1 field and "Abby" for the Name 2 field.
  2. Click the Save button.
  3. Close and reopen the browser.
  4. Click the Update from Saved button to see the stored values replaced.

Code Sample:

HTML5MobileSpecific/Demos/storage.html
<!DOCTYPE html>
<html>
<head>
  <title>Jazz Calendar - Local Live Jazz Music Events</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/storage.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <script type="text/javascript">
  	function html5_storage_support() {
  		//check to see if this browser support local storage: return true if so, false if not
		try {
			return 'localStorage' in window && window['localStorage'] !== null;
		} catch (e) {
			return false;
		}
	}
  	function save() {
  		if (html5_storage_support()) {
  			//get the user-entered values from the two text fields:
  			var name1 = document.getElementById("name1").value;
  			var name2 = document.getElementById("name2").value;

  			//create two local-storage keys (name1, name2) and assign
  			//each the respective value from the text fields:
  			localStorage.setItem('name1',name1);
  			localStorage.setItem('name2',name2);
  		}
  	}

  	function set() {
  		if (html5_storage_support()) {
  			//set the value of each text field from the stored values:
  			document.getElementById('name1').value = localStorage.getItem('name1');
  			document.getElementById('name2').value = localStorage.getItem('name2');
  		}
  	}
  </script>
</head>

<body>
  <div id="container">
	<div id="main">
	  <header>
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
	  </header>
	  <nav>
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="performances.html">Performances</a></li>
		  <li><a href="about.html">About</a></li>
		  <li><a href="contact.html">Contact</a></li>
		</ul>
	  </nav>
	  <div id="maincontent">
		  <article>
			<h2>Storage Example</h2>
			<label for="name1">Name 1</label><br>
			<input type="text" name="name1" id="name1"><br>
			<br>
			<label for="name2">Name 2</label><br>
			<input type="text" name="name2" id="name2"><br>
			<br>
			<button onclick="save()">Save</button>
			<button onclick="set()">Update from Saved</button>
		  </article>
	  </div>
	  <aside id="sidebar">
		  <h3>Signup</h3>
		  <p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
	  </aside>
	  <footer id="contactinfo">
		<p>Jazz Calendar
		<br />123 Fake Street, Sometown, USA | 555-123-4567</p>
	  </footer>
	</div>
  </div>
</body>
</html>

When the Save button is clicked, the save() function is called: the current values from the name1 and name2 fields are saved (localStorage.setItem) to keys name1 and name2, respectively.

Function 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.

Registration Form for Pickup Soccer

Duration: 20 to 30 minutes.

In this exercise, you will create a registration form for the Pickup Soccer site:

Pickup Soccer form

  1. Open the file HTML5MobileSpecific/Exercises/soccer/index.html in your file editor and in your browser.
  2. Add a form and input fields for name, phone, email, website URL, and date of birth - choose the appropriate input type for each.
  3. Allow the user to save his or her values in the form using web storage: Save saves the entered data, and Restore from Saved repopulates the fields with saved data.
  4. Check your work with a mobile browser.

Solution:

HTML5MobileSpecific/Solutions/soccer/index.html
<!DOCTYPE html>
<html>
<head>
  <title>Soccer Pickup</title>
  <link rel="stylesheet" type="text/css" href="css/reset.css" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <meta name="viewport" content="initial-scale=1.0, width=device-width" />
  <script type="text/javascript">
	function html5_storage_support() {
	  try {
		return 'localStorage' in window && window['localStorage'] !== null;
	  } catch (e) {
		return false;
	  }
	}
	function saveit() {
	  if (html5_storage_support()) {
		var name = document.getElementById("name").value;
		var phone = document.getElementById("phone").value;
		var email = document.getElementById("email").value;
		var website = document.getElementById("website").value;
		var DOB = document.getElementById("DOB").value;
		localStorage.setItem('name',name);
		localStorage.setItem('phone',phone);
		localStorage.setItem('email',email);
		localStorage.setItem('website',website);
		localStorage.setItem('DOB',DOB);
	  }
	}

	function restoreit() {
	  if (html5_storage_support()) {
		document.getElementById('name').value = localStorage.getItem('name');
		document.getElementById('phone').value = localStorage.getItem('phone');
		document.getElementById('email').value = localStorage.getItem('email');
		document.getElementById('website').value = localStorage.getItem('website');
		document.getElementById('DOB').value = localStorage.getItem('DOB');
	  }
	}
  </script>
</head>

<body>
  <div id="container">
	<header>
	  <a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
	  <nav id="mainnav">
		<ul>
		  <li><a href="index.html">Home</a></li>
		  <li><a href="find-a-game.html">Find a Game</a></li>
		  <li><a href="about.html">About</a></li>
		  <li><a href="contact.html">Contact</a></li>
		</ul>
	  </nav>
	</header>
	<div id="maincontent">
		<h1>Register Now</h1>
		  <form action="index.html" method="post">
			<label for="name">Name</label><br>
			<input type="text" name="name" id="name" placeholder="Jane Doe"><br>
			<br>
			<label for="phone">Phone</label><br>
			<input type="tel" name="phone" id="phone"><br>
			<br>
			<label for="email">Email</label><br>
			<input type="email" name="email" id="email"><br>
			<br>
			<label for="website">Website URL</label><br>
			<input type="url" name="website" id="website"><br>
			<br>
			<label for="DOB">Date of Birth</label><br>
			<input type="date" name="DOB" id="DOB"><br>
			<br>
			<input type="submit">
		  </form>
		  <button onclick="saveit()">Save</button>
		  <button onclick="restoreit()">Restore from Saved</button>
	</div>
	<aside id="sidebar">
		<h3>About Us</h3>
		<p>Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!</p>
	</aside>
	<footer id="footerinfo">
	  <p>Soccer Pickup: Your guide to finding a game.</p>
	</footer>
  </div>
</body>
</html>

We add fields of type text, tel, email, url, and 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.