CSSKarma

display your <style>

designing the web since 2002

Styling & Marking up a Form

For some reason, lately I've been seeing a fair amount of articles on how to properly style/mark up a form. Frankly, I've disagreed with every one of them.

The most popular ways of marking up a form that I found seem to be using a table & using an unordered list and <li> for each section

Both these metods are technically perfectly fine, but they also use unnecessary XHTML code. The form has more than enough elements to be marked up without using <table> or <ul>.

view this example

Form elements:

  • form: The <form></form> tag defines a container for form controls and elements.
  • label: Defines a label to a control. If you click the text within the label element, it is supposed to toggle the control.
  • fieldset: The fieldset element is a container for grouping similar elements.
  • legend: The <legend></legend> element assigns a caption to fieldsets within forms.
  • input: The <input> tag defines the start of an input field where the user can enter data.
  • select: The select element creates a drop-down list.
  • option: The option element defines an option in the drop-down list.
  • optgroup: Defines an option group. This element allows you to group choices. When you have a long list of options, groups of related choices are easier to handle.
  • button: Defines a push button. Inside a button element you can put content, like text or images.

I got some of those definitions from w3schools.com

So, if you only use those elements (or any I forgot), you can keep everything in the form really slimmed down and meaningful. There are always going to to arguements for and against doing this, but it DOES cut down on your code, and you can style it just as easily

view this example

Exmaple

HTML
<form method="post" action="#" id="chooser">
<label for="name">name<input type="text" id="name"/></label>
<label for="waist">waist size<input type="text" id="waist"/></label>

<fieldset>
<legend>please select gender</legend>
<label for="boy">boy<input type="radio" name="gender" id="boy"/></label>
<label for="girl">girl<input type="radio" name="gender" id="girl"/></label>
<label for="both">both<input type="radio" name="gender" id="both"/></label>
<label for="neither">other<input type="radio" name="gender" id="neither"/></label>
</fieldset>

<label for="toes">number of toes
<select size="1" id="toes">
<option selected="selected" disabled="disabled">number of toes</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</label>
<label for="comments">comments</label>
<textarea cols="60" rows="6" id="comments"></textarea>
<button type="submit" id="btn_submit">send</button>
</form>

view this example

CSS
form{
border:1px solid #ccc;
width:35em;
padding:0 1em 1em;
}

form label{
font-weight:700;
font-size:.8em;
line-height:1.8;
text-transform:capitalize;
display:block;
margin:15px 0 0;
position:relative;
}

form label input, form label select{
position:absolute;
top:0;
}

form label input{
left:15%;
}

form label select{
left:22%;
}

form fieldset{
padding:0;
margin:1em 0;
border:0;
}

form fieldset legend{
font-size:.9em;
color:#999;
padding:0;
}

form fieldset label{
text-align:left;
width:10%;
float:left;
margin:0;
padding:0 0 0 22px;
}

form fieldset label input{
top:3px;
left:0;
}

form button{
text-transform:capitalize;
border:1px solid #a5a5a5;
background:#f7f7f7;
padding:5px 10px;
margin:5px 0;
}

view this example

That's my2cents on form styling/mark up

Featured writing