Css-design. Form field hints with CSS and JavaScript (Ask the CSS Guy) My co-workers pointed out a nice effect on the Vox registration form. As you tab through each input field, some helper text appears in box out to the right. Try it out. Update (4/20/2007): It has been pointed out that Vox has changed their form, and it no longer uses this effect. Vox Registration Form It’s a basic example of how helpful a little JavaScript and CSS can be in a form. View demo; Download zip The HTML We’ll start with a simple form. <dl><dt><label for="firstname">First Name:</label></dt><dd><input name="firstname" id="firstname" type="text" /></dd> ... more <dt>'s and <dd>'s ...
Immediately after each input field, add a span with a class of hint and create a hint for each input, like so: <dl><dt><label for="firstname">First Name:</label></dt><dd><input name="firstname" id="firstname" type="text" /><span class="hint">Use your real name! View what we have so far – an unstyled form. Some CSS Let’s give this form some style. It’s coming along. See how it looks. The JavaScript. Free XHTML/CSS Website Templates - Template World. WebDev - CSS Layout Templates.
Well this section of the site contains my CSS layout templates (see below) as well as various articles on web development and authoring. The templates are freely redistributable for noncommercial use under the terms of their license. Since moving to WordPress the templates aren’t used on this site any more. CSS Layout Templates The templates available for download are divided into three main groups. The first group is for people who want to recreate common, one, two or three column layouts which are also popular table layout styles. The templates below are licensed under a Creative Commons License. “Column” Layout Templates, with print style sheet Two column – left hand sidebar, Netscape 4 friendlyTwo column – right hand sidebarTwo column – split sidebar top and rightThree column – split sidebar left and rightThree column – split sidebar left and right with footer Demonstration / Funky Layout Templates Discussion / Message Board Layout Templates Download Templates as a zip file [approx 218kb]