Hi,
I hate form errors where you can't immediately see where the error was. I would go for a prominent message at the top of the page asking you to review the highlighted items below.
It should be clear immediately where the error is visually and then next to the input you can give more information. Remember there may be more than one error on submission so make sure they are all prominent.
I would go for something roughly like this.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input[type=text]:focus { background:#e4f0f8 }
.formtest {
width:350px;
margin:auto;
background:#f9f9f9;
}
.formtest label {
display:inline-block;
vertical-align:middle;
width:90px;
text-align:right;
margin:10px 0;
}
.formtest input {
width:200px;
margin:10px 0;
vertical-align:middle;
border:1px solid #ddd;
}
#submit {
border:1px solid #000;
color:#000;
padding:0;
overflow:hidden;
height:25px;
font-weight:bold;
margin:auto;
display:block;
}
#submit:hover {
background:#000;
color:#fff
}
.formtest div {
border:2px solid #fff;
padding:5px
}
/* error box */
.formtest .errorbox {
border:2px solid #f00;
background:#eed0d5;
color:#000;
padding:10px;
font-weight:bold;
}
.errorbox p { margin:0 0 1em }
.errorbox strong {
font-size:140%;
color:#f00
}
.errorbox ol {
font-weight:normal;
margin:0 0 1em 1.5em;
}
.errorbox a, .errorbox a:visited {
text-decoration:none;
color:#d80000
}
.errorbox a:hover { text-decoration:underline }
.formtest .err {
border-color:#f00;
color:#f00;
background:#eed0d5;
}
.err input {
border-color:#f00;
background:#eee;
}
.err label { font-weight:bold }
.err span {
color:#d80000;
font-size:80%;
margin:-5px 0 0 95px;
display:block;
padding:0 0 5px
}
</style>
</head>
<body>
<form class="formtest" id="form1" method="post" action="">
<fieldset>
<legend>Address Details</legend>
<div class="errorbox">
<p><strong>There are some Errors in your Submission!</strong></p>
<p>Please review the items below.</p>
<ol>
<li><a href="#lastname">Address Line1</a></li>
<li><a href="#zip">Zip Code</a></li>
</ol>
</div>
<div>
<label for="firstname">First Name:</label>
<input type="text" name="firstname" id="firstname" />
</div>
<div>
<label for="lastname">Last Name:</label>
<input type="text" name="lastname" id="lastname" />
</div>
<div class="err">
<label for="address1">Address 1:</label>
<input type="text" name="address1" id="address1" />
<span>Please fill in the first line of your address</span> </div>
<div>
<label for="address2">Address 2:</label>
<input type="text" name="address2" id="address2" />
</div>
<div>
<label for="address3">Address 3:</label>
<input type="text" name="address3" id="address3" />
</div>
<div>
<label for="address4">Address 4:</label>
<input type="text" name="address4" id="address4" />
</div>
<div>
<label for="city">City:</label>
<input type="text" name="City" id="city" />
</div>
<div>
<label for="state">State:</label>
<input type="text" name="state" id="state" />
</div>
<div class="err">
<label class="zip" for="zip">Zip:</label>
<input type="text" name="zip" id="zip" />
<span>Please enter a valid zip code</span> </div>
<div>
<label for="tel">Telephone:</label>
<input type="text" name="tel" id="tel" />
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit" />
</div>
</fieldset>
</form>
</body>
</html>
You should also take into account the extra features that Mallory suggests above which could also be built in.
Reply With Quote
Originally Posted by DoubleDee
Bookmarks