Form Layout v1.0

The help button () will make more info appear when the cursor hovers over it. This is done with CSS for the good browsers, but for bad browsers (IE6), a JavaScript makes it work.

I'll eventually have a bit of JavaScript validation as well, and them maybe the same validation done in PHP.

HTML Used

<form action="form_layout_1-0.php" method="post" name="test" id="test"> <div class="formRow"> <label for="testName">Name</label> <input name="testName" type="text" id="testName" size="40" maxlength="40"> </div> <div class="formRow"> <label for="testName">Email</label> <input name="testEmail" type="text" id="testEmail" size="40" maxlength="40"> <a class="help"><img src="images/question.gif" width="13" height="13" alt="More Info"><span>Help Message Here</span></a></div> <div id="errorMessageSection">  </div> <div class="buttons"> <input type="hidden" name="validated" value="false"> <input type="submit" value="Submit" name="Submit"> </div> </form>

CSS Used

You can also just grab the CSS file used on this page...

/* Forms v1.0 */ /* *************************************************************************************** */ form { width:50%; margin: 0 0 1em 0; } .formRow { clear:both; margin-bottom: .5em; background: #F8F8F8; } .formRow:hover {background: #F4F4F4;} #content .formRow {margin:0 0 .5em; padding:0} label { display:block; float:left; text-align:right; width:38%; margin:0 15px 0 0; } textarea, input, select {margin:0 .25em 0 0;} form div.buttons,#container form .counter { text-align:left; display:block; float:none; clear:both; margin: 0 0 0 15px; padding:0 0 .5em 8px; } form div.buttons {margin:0 0 0 39.5%;} * > form div.buttons {margin:0 0 0 39%;} form div.buttons input { background:#A83600; border-style:none; color:#FFFFFF; cursor:pointer; height:auto; letter-spacing:0.125em; line-height:normal; text-transform:lowercase; width:auto; padding: .25em 2em; font-weight: bold; } form div.buttons input:hover, form div.buttons input:active, form div.buttons input:focus {background: #666666;} .formRow .note {display:block; padding:0 0 0 33%} p.validationError {text-align:center;color:#ed8224;} .formRow .validationError { display:block; color:#ed8224; font-size:.9em; float:none; clear:both; margin:0 0 0.7em; padding:0 0 0 44%; background: url(images/validationErrorArrow.gif) no-repeat 41.5% 5px; } * > .formRow .validationError { padding:0 0 0 43%; background: url(images/validationErrorArrow.gif) no-repeat 40.5% 5px; } .formRow label .note {display:inline; padding:0} a.help {cursor:help; text-decoration:none} a.help:hover {overflow:visible;color:#333333} a.help span{ display:none; padding:0 2em 0 44%; background: url(images/questionPointer.gif) no-repeat 41.5% 5px; } * > a.help span { padding:0.5em 0 0 43%; margin-top:-0.5em; background: url(images/questionPointer.gif) no-repeat 40.5% .8em; } a.help:hover span, .help span:hover{display:block} .required { color: #FF0000; font-size: 1.3em; line-height: 0em; font-weight: bold; padding-right: 0.125em; padding-left: 0.125em; }

JavaScript fix for IE6

Below is the JavaScript that makes the help info work in IE6. Or you can grab the file.

//* Forms v1.0 - IE6 script //* *************************************************************************************** function helpLinks() { var as = document.getElementsByTagName('a'); for (var i=0; i<as.length; i++) { if (as[i].className.indexOf("help") != -1) { as[i].onmouseover = function(){this.style.overflow="visible";this.lastChild.style.display="block"}; as[i].onmouseout = function(){this.style.overflow="auto";this.lastChild.style.display="none"}; } } } // addLoadEvent() // Adds event to window.onload without overwriting currently assigned onload functions. // Function found at Simon Willison's weblog - http://simon.incutio.com/ function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function(){oldonload();func();}; } } addLoadEvent(helpLinks);

Navigation