Address Book

<!DOCTYPE html>
<html>
    <head>
		<title>Address Book</title>
	<meta name="description" content=".">

			<script type="text/javascript">

			document.cookie="name.value";

			function addFriend(theForm) {
			// Collect form information
				var name = theForm.name;
				var eMail = theForm.eMail;
				var Phone = theForm.Phone;
				var address = theForm.address;

				var ok = true;

				//Check if name is blank
				if(name.value == "") {
					ok = false;
					alert("Your friend does have a name, right?")
					name.focus();
				}

				if(ok && eMail.value == "") {
					ok = false;
					alert("You dont want to Email your friend? Well too bad.")
					name.focus();
				}

				if(ok && Phone.value == "") {
					ok = false;
					alert("No one uses phones right? Only hipsters do. Your a hipster.")
					name.focus();
				} else {
				}

				//Check if eMail is blank
				//Check if Phone is blank
				//Ruby sucks

				if(ok) {

							// Add new friend to friendsPanel
								var friendsPanel = document.getElementById("friendsPanel");
								var newFriend = "<b>Name:</b> " + name.value + "<br>";
								newFriend = newFriend + "<b>Email:</b> " + eMail.value + "</br>";
								newFriend = newFriend + "<b>Phone:</b> " + Phone.value + "</br>";
								newFriend = newFriend + "<b>Address:</b> " + address.value + "<br></br>";

									friendsPanel.innerHTML = friendsPanel.innerHTML + newFriend;

										// Clear form elements
										name.value = "";
										eMail.value = "";
										Phone.value = "";
										address.value = "";

										//Place cursor in "name" element
										name.focus();
						}

					return false;
			}

			</script>

			<style>
						h2
						{
						position:absolute;
						left:0px;
						top:0px;
						}
			</style>


						<link rel="stylesheet" href="css/metro-bootstrap.css">
				        <script src="js/jquery/jquery.min.js"></script>
				        <script src="js/jquery/jquery.widget.min.js"></script>
				        <script src="js/metro/metro.min.js"></script>

    </head>
    <body class="metro">
        <body background="wallpaper3.png">
		<h1 align="middle">My Address Book</h1>
			<div>

		<div id="forms" align="center">
			<form action="index.html" method="post" onsubmit="addFriend(this); return false;">
			<p>
			<b align="center">Name:</b> <input type="text" name="name"> <span style:>*</span><br>
			<b align="center">Email:</b> <input type="text" name="eMail"> <span class="madatory">*</span><br>
			<b align="center">Phone:</b> <input type="text" name="Phone"> <span class="madatory">*</span><br>
			<b align="center">Address:</b> <textarea name="address" rows="5" cols="30"></textarea><br>
			<input align="center" type="submit" value="Add Friend"
			</p>
			</form>
			</div>
		</div>

		<div id="friendsPanel">
			<h2>My Friends</h2>
		</div>


		<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
    </body>
</html>