How can I create the desired shape using css without using too many div tags?
The mailing list form I'm creating has the following fields: first name, last name, address, city, state, zip code, email address, and phone number. I created a form using list items and css NOT tables. I want the first names and surnames to appear together on the first line, the street address one on the second line, the city, state and zip all together on the third line, and the email and phone number on the fourth line. Each line must match correctly with each other.
I achieved this at first, but I used so many div classes for almost every label and I want to know if this is possible without using a lot of div tags. Below 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="kneeskeh81@herkimer.edu" 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> </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 created correctly without using too many div tags?
a source to share
If you're trying to do it without a lot of divs, you can 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. css above will cause the labels to blend well with form elements. Note: Mark Hurd wrote his answer when I was typing it - his answer is similar to mine
a source to share
I'm not sure if you mean exactly "Each line must fit together correctly". If you mean, each label needs to be positioned correctly above the input element, which is relatively simple, but requires 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 there are too many layers of divs, you've clearly never looked at the blog engine source. :)
Then you can arrange your field fields any way you want.
If you mean that divs on different lines have to line up, then it gets a lot harder if you don't lock in the width of the div. Sometimes this is practical, sometimes it is not. It is only one thing that tables are better than pure CSS.
At the risk of self-promotion, here's my spreadsheet perspective versus pure CSS . I take a pragmatic view: if what you are doing is easy to do in pure CSS, do it that way, but due to CSS limitations and browser differences, there are some effects that you simply cannot (or are good) do not using tables.
a source to share
I recommend looking at the source from several forms on Wufoo . For example, Emergency Contact and Health Information has many fields organized in different ways. Like your example, to break up the field groups, I used elements <li>
. I don't understand why you couldn't replace them <div>
if you like.
I don't think the author uses "too much" there in <div>
any way.
Also good: horizontal and margin from Man in Blue . Creative use of <label>
s.
There are so many ways to lay out forms, I don't think there is a wrong way.
a source to share
You should be able to achieve this with classes and careful use of things like the display property (for example, you can the first two fields on the same line using list items display: inline
).
You don't need any divs at all, looking at the above stuff.
a source to share
You can reduce the number of div tags by using appropriate form tags like margins 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 variety of hooks: the form itself, set of fields, legend, label, label name, text title required, specific type inputs, form buttons (both grouped and separate), etc.
With all these hooks, you can customize your CSS and JavaScript validations very efficiently.
a source to share