About Web Design Book Chapter 14 - Example 14-5
Here is the code for example 14-5 in the About Web Design book.
The Page | The HTML | The Stylesheet | The JavaScript
The HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Dogs and Their Toys</title>
<meta name="description" content="Dog leashes restraint devices dog leashes" />
<meta name="keywords" content="dog leashes, dogs, dog toys, canines, information about dogs, dog help" />
<link type="text/css" href="zexample14-5.css" rel="stylesheet" />
<script type="text/javascript" src="zexample14-5.js"> </script>
</head>
<body onload="document.contactus.firstname.focus();">
<div id="main">
<h1 id="branding">Dogs and Their Toys</h1>
<ul id="navigation">
<li><a href="../index.html">Home</a></li>
<li><a href="../products/index.html">Dog Toys for Sale</a></li>
<li><a href="../articles/index.html">Dog Information</a></li>
<li><a href="../about/index.html">About this Site</a></li>
</ul>
<div id="body">
<h2>Improving Your Contact Forms</h2>
<p>
All fields are required.
</p>
<div id="check"></div>
<form action="mailto:webdesign.guide@about.com" method="get" enctype="text/plain" id="contactus" name="contactus">
<label accesskey="f" for="firstname">First Name:
<input type="text" name="firstname" id="firstname" value="" size="40" onblur="validateForm(this);" /></label><br />
<label accesskey="l" for="last name">Last Name:
<input type="text" name="last name" id="last name" value="" size="40" onblur="validateForm(this);" /></label><br />
<label accesskey="e" for="email">Email:
<input type="text" name="email" id="email" value="" size="40" onblur="validateForm(this);" /></label><br />
Do you want a reply?
<label accesskey="y"><input type="radio" name="reply" id="reply" value="yes" /> Yes</label>
<label accesskey="n"><input type="radio" name="reply" id="reply" value="no" checked="checked" /> No</label><br />
What is your message?<br />
<textarea name="message" id="message" rows="10" cols="35" onblur="validateForm(this);"></textarea><br />
<input type="submit" value="Send Message" />
<input type="reset" value="Clear Form" />
</form>
</div>
<div id="information">
<p>
Copyright © 2006 <a href="http://webdesign.about.com/mpremail.htm">Jennifer Kyrnin</a>
</p>
</div>
</div>
</body>
</html>
Replace the title and meta tags with your own site content.
The Stylesheet (CSS)
html, body { margin: 0px 20px; }
html { background-color : #3c6; }
body {
font: normal 1em Geneva, Arial, Helvetica;
text-align: center;
}
div#main {
width : 700px;
margin: 0 auto;
background-color:#fff;
text-align: left;
}
#body { padding: 0 10px; }
#information { font-size: .7em; text-align: center; }
#branding {
height: 200px;
background: #fff url(http://z.about.com/d/webdesign/1/0/S/2/1/dogs_and_toys_logo.jpg) no-repeat;
margin: 0;
padding: 0 0 0 100px;
font-size: 3em;
color: #3c6;
}
#navigation {
margin: -30px 0 30px 180px;
background-color: #3c6;
}
#navigation li { display: inline; }
#navigation li a {
font-size: .9em;
padding: .25em .5em;
background-color: #3c6;
color: #fff;
text-decoration: none;
float: left;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
}
#navigation li a:link, #navigation li a:visited { color: #fff; }
ul#navigation li a:hover {
color: #000;
background-color: #fff;
}
#check {
float: right;
width: 250px;
}
The JavaScript
function validateForm(checkMe) {
// check that the field is filled in
var checkElement = document.getElementById("check");
var br = document.createElement("br");
// uncomment the next line if you want the error message to go away when the next appears.
// if (checkElement.value !== "") { clearError(); }
if (checkMe.value == "") {
// it's empty so display an error message
var gotitText = document.createTextNode("Please fill in the " + checkMe.name + " field.");
checkElement.appendChild(gotitText);
checkElement.appendChild(br);
}
}
function clearError() {
var element = document.getElementById("check");
while (element.firstChild) {
element.removeChild(element.firstChild);
}
}
Here's what the page looks like.
Jennifer Kyrnin