Registration Form for Pickup Soccer - Exercise

Contact Us or call 1-877-932-8228
Registration Form for Pickup Soccer - Exercise

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.

Next