Help with CSS-only forms?

I’ve been searching around for hours trying to find information on making a specific kind of CSS-only HTML form. I’m trying to design a form with text input fields, captions underneath those fields, and horizontal radio buttons/check boxes. Unfortunately, nothing I can find can tell me anything about captions or the horizontal items. This is the HTML I’m using so far:


<form class="new_form" action="submit.php">
    <fieldset>
        <legend>Update information</legend>
        <ol>
            <li>
                <label for="name">Name*</label>
                <input id="name"/>
                <span class="error">Please enter your name.</span>
                <label></label>
                <span class="note">Please enter your name.</span>
            </li>
            <li>
                <label for="password">Password*</label>
                <input id="password"/>
                <span class="error">Please enter a valid password.</span>
            </li>
            <li>
                <label for="address">Address*</label>
                <input id="address"/>
                <span class="error">Please enter a valid address.</span>
            </li>
            <li>
                <label for="subject">Subject: </label>
                <select name="subject" id="subject">
                    <option value ="Comment">Comment</option>
                    <option value ="Question">Question</option>
                    <option value ="Suggestion">Suggestion</option>
                    <option value="URGENT: Copyright">Copyright Issue</option>
                    <option value ="URGENT: Bug Report">Report a Bug</option>
                </select>
            </li>
            <li>
                <label for="post">Post*</label>
                <textarea name="feedback" id="post" rows="10" cols="45"></textarea>
            </li>
            <li>
                <input type="submit" value="Submit" />
            </li>
            <li class="radio">
                <fieldset class="radio">
                    <legend>Is this address also your invoice address?*</legend>
                    <label><input type="radio" name="invoice-address" /> Yes</label>
                    <label><input type="radio" name="invoice-address" /> No</label> 
                </fieldset>
            </li> 
        </ol>
    </fieldset>
</form>

and this is the CSS:


form.new_form fieldset {
    margin-bottom: 10px;
}
form.new_form legend {
    padding: 0 2px;
    font-weight: bold;
}
form.new_form label {
    display: inline-block;
    line-height: 1.8;
    vertical-align: top;
}
form.new_form fieldset ol {
    margin: 0;
    padding: 0;
}
form.new_form fieldset li {
    list-style: none;
    padding: 5px;
    margin: 0;
}
form.new_form fieldset fieldset {
    border: none;
    margin: 3px 0 0;
}
form.new_form fieldset fieldset legend {
    padding: 0 0 5px;
    font-weight: normal;
}
form.new_form fieldset fieldset label {
    display: block;
    width: auto;
}
form.new_form em {
    font-weight: bold;
    font-style: normal;
    color: #f00;
}
form.new_form label {
    width: 100px; 
}
form.new_form fieldset fieldset label {
    margin-left: 103px; 
}

form.new_form .radio {
    display:inline;
}

form.new_form fieldset textarea {
    max-width:28em;
    max-height:20em;
    overflow:auto;
}

I’m not very good with CSS or HTML, and so much of the information I’ve found has been thousands of lines of code that I just can’t sort through. I’m desperate to try to find information, though, and this form looks pretty nice with some basic CSS, so I’m hoping that I’m really close.

Can anyone please help me? Thank you!

Im not clear on the order you want it to look like. But in short if you you want anything on one line then say display block. If you want items next to each other say display inline-block. I would also remove the ul/li to make it easier. It doesn’t hurt being there. Just really no reason for them unless you need the hooks.

Sorry, that’s only the test form I was using, so it’s full of sample fields with nothing concrete. So if I want elements on the same line (Ex. a label, an input field, and the space for an error message) I should wrap those in a div with display:inline-block set? display:block would put each element on its own line, while display:inline-block would put them next to each other?

How would I fit this into captions, though? I’m trying to set up something like the google create account page (mail.google.com/mail/signup) where captions are immediately underneath the input boxes.

Yes that’s right. The label can be your caption. So how do you want it to appear?

label input

or

input
label

I want it to appear as the second option. The input fields will have a label (say Name: ______________) and then a caption underneath that field with more information, hopefully with support for more lines of text. This is the HTML I threw together so far:


<form class="common_form">
    <fieldset>
        <div class="form_line">
            <label for="name">Name:</label>
            <input id="name" name="name" type="text" size="15" maxlength="9"></input>
            <span class="error">Please enter your name.</span>
        </div>
        <div class="form_line">
            <label for="password">Password:</label>
            <input id="password" name="password" type="password" size="15" maxlength="9"></input>
            <span class="error">Please enter the correct password.</span>
        </div>
        <div class="form_line">
            <label for="email">Email address:</label>
            <input id="email" name="email" type="text" size="15" maxlength="30"></input>
            <span class="error">Please enter a valid email address</span>
        </div>
    </fieldset>
</form>

and the CSS code is only this:


.form_line {
    display:block;
}

.form_line label {
    width:10em;
}

Maybe the width isn’t 100% necessary, but I’m using an elastic layout to ensure users zooming the text only doesn’t cause problems.

The HTML is perfect. No need to give the div display block as that’s it’s default state. So give the label and input display inline-block with a width and vertical-align middle. And give the span display block. Then use the divs to space it as desired.

Thank you very much! It seems to be working so far, except I still can’t seem to decrease the caption size without throwing off the alignment. CSS:


.form_line label {
    display:inline-block;
    width:8em;
}

.form_line input {
    display:inline-block;
    width:15em;
}

.caption {
    font-size:60%;
    color:blue;
}

and HTML:


<div class="form_line caption">
   <label></label>
      Input field caption
</div>

Am I lining this up incorrectly by having a blank label there? I wouldn’t think that would be the best solution for accessibility purposes, and when I decrease the font size using either % or em, it shrinks the label too.

Never mind my last question; I fixed the caption by formatting the text only with a custom span class in place of a class on the entire div. Unless its a poor choice to use labels for alignment, I think I’ve almost got this particular form figured out.