How to create desired form with css without using too many div tags?

Question

The mailing list form I am creating has the following fields: first name, last name, street address, city, state, zip, email, and phone number. I created the form using list items and css NOT tables. I want the first name and last name labels together on the first line, the street address all by itself on the second line, the city, state, and zip all together on the third line, and the email and phone number together on the fourth line. Each line should line up properly with each other.

At first I had accomplished this, but I used so many div classes around almost each label and I want to know if this is possible without using many div tags. The following is the code for the mailing list:

<h1>Join our Mailing List</h1>
{exp:freeform:form form_name="cogar_form" return="thankyou" mailing_list="cogar_mail"  required="first_name|last_name|street_address|city|state|postalcode|email|phone1" notify="[email protected]" template="cogar_mail"}
<ul>         
<li><label for="first_name">First Name</label>
<br /><input type="text" id="first_name" name="first_name" value="" maxlength="30" /></li>

<li><label for="last_name">Last Name</label>
<br /><input type="text" id="last_name" name="last_name" value="" maxlength="30" /></li>

<li><label for="street">Street Address</label>
<br /><input type="text" id="street" name="street_address" value="" size="40" maxlength="50"/></li>

<li><label for="city">City/Town</label>
<br /><input type="text" id="city" name="city" value="" /></li>

<li><label for="state">State</label> <br /><select id="state" name="state">
<option>&nbsp;</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select></li>

<li><label for="postalcode">Zip</label>
<br /><input type="text" id="postalcode" name="postalcode" value="" size="11" maxlength="5" /></li>

<li><label for="email">Email</label>
<br /><input type="text" id="email" name="email" value="" maxlength="30" /></li>

<li><label for="phone">Phone Number</label>
<br /><input type="text" id="phone" name="phone1" value="" size="15" maxlength="14" /></li>
</ul>   
<p style="clear:left;"><input type="submit" name="submit" value="Submit" /></p>
{/exp:freeform:form}

Anyone have any ideas how this can be styled properly without using too many div tags?

Answer 1

You should be able to achieve it by use of classes, and by careful use of things like display property (e.g. you can put the first two fields on the same line by making the list items use display: inline).

You shouldn't need any divs at all, looking at the above stuff.

Answer 2

I recommend BluePrint. Its a css framework. If your learn to properly use it, it will reduce a lot the amount of divs that you need.

Answer 3

I'm not sure what you mean exactly by "Each line should line up properly with each other." If you mean, each label should be correctly above it's input element, that's relatively easy but does require nesting divs:

<div class="field">
  <div class="label"><label for="firstname">First Name</label></div>
  <div class="control"><input id="firstname" name="firstname" type="text"></div>
</div>

If you think that's too many layers of divs you've clearly never looked at the source of a blogging engine. :)

You can then arrange your field divs any way you wish.

If however you mean that divs on different lines should line up then that gets a lot harder unless you fix the widths of the divs. Sometimes that's practical, sometimes it isn't. This is just one thing that tables are better at than "pure" CSS.

At the risk of self-promotion here is my perspective on tables vs pure CSS. I take a pragmatic view: if what you're doing is easy to do in pure CSS, do it that way but due to limitations in CSS and differences in browsers there are some effects that you just won't be able to do (or do well) without using tables.

Answer 4

I recommend looking at the source from a few forms at Wufoo. For example, the Emergency Contact and Medical Information has many fields lined up in different ways. Like your example, to break apart groups of fields the author used <li> elements. I don't see why you couldn't replace them with <div>s if you so desire.

I don't think the author there uses "too many" <div>s by any means.

Also good: the horizontal and margin form from The Man in Blue. Creative use of <label>s.

There are so many techniques to lay out forms, I don't think there is any wrong way.

Answer 5

You can reduce the amount of div tags by using proper form tags such as fieldsets and labels:

<form>
    <fieldset>
        <legend>Fieldset title</legend>
        <label for="input-id">
            <span class="label-title">Label Title <span class="required">*</span></span>
            <input id="input-id" class="text-input" type="text" name="input-name" />
        </label>
        <!-- etc -->
    </fieldset>

    <ul class="form-buttons">
        <li><input type="submit" value="Submit" /></li>
    </ul>
</form>

This approach will give you a wide range of hooks: the form itself, fieldset, legend, label, label title, required text title, inputs of a certain type, form buttons (both grouped and individual), etc.

With all these hooks you can target your CSS and JavaScript validation very effectively.

Answer 6

If you're trying to do this without a lot of divs, you could do something like this:

 <style type="text/css">
       fieldset
       {
        width: 550px;
        padding: 5px 0;

       }             
       fieldset label
       {
          float: left;
          width: 200px;
          margin-right: 15px;
       }
    </style>
    <fieldset>
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />

. . . etc... the css above will cause the labels to line up nicely with the form elements. Note: Mark Hurd posted his answer as I was typing this - his answer is similar to mine

Answer 7

Just use tables. Why do we put ourselves through this torture?