A Jazz Calendar Registration Form

Contact Us or call 1-877-932-8228
A Jazz Calendar Registration Form

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.

Next