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:

<!DOCTYPE html>
  <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" />

  <div id="container">
	<div id="main">
		<img src="images/logo.gif" alt="Jazz Calendar" />
		<h3 id="tagline">Local jazz info</h3>
		  <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>
	  <div id="maincontent">
				<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>
					<label for="phone">Phone</label><br>
					<input type="tel" name="phone" id="phone"><br>
					<label for="email">Email</label><br>
					<input type="email" name="email" id="email"><br>
					<label for="website">Website URL</label><br>
					<input type="url" name="website" id="website"><br>
					<label for="DOB">Date of Birth</label><br>
					<input type="date" name="DOB" id="DOB"><br>
					<input type="submit">
	  <aside id="sidebar">
		  <p>Become a member of Jazz Calendar now! <a href="#">Email us</a> to receive frequent notices on upcoming live shows.</p>
	  <footer id="contactinfo">
		<p>Jazz Calendar
		<br />123 Fake Street, Sometown, USA | 555-123-4567</p>

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.