Posted by on Tuesday, March 9th, 2010 at 12:11 pm.
If, like me, you’ve ever come across the problem of trying to lay out your forms in the best way – then this tutorial is for you!
I always struggled with getting my form label to the left and my input field to the right. I wanted a way to do this without using extra mark-up, like divs or lists. The other night I had a brain wave – why not use the label itself to form the basic layout?
The final form's wireframe with no aesthetic styling
The following tutorial will show you what I think is the best way to code HTML forms using CSS, W3C valid mark-up, and as little elements as possible. My form will end up looking like the image on the right; you will then be able to style the form elements to your specific needs.
The HTML
So, as I stated earlier, I will compile this form using the label element to lay it out. I feel this is a great way to make use of the elements that you would be using anyway when building your forms.
Below you can see the HTML code I’ll be using for the form:
As you can see, I added the input elements inside the label elements; this allows me to style the label text and the input within the restraints of the label element.
The CSS
Below is the CSS I will use for this form. This CSS gives my form a truly basic styling, but is a good starting point for you, as everyone’s forms will look different.
form { overflow:hidden; width:300px; }
label { display:block; float:left; clear:both; overflow:hidden; width:300px; margin:0 0 10px; }
form input { display:block; float:left; width:100px; }
label span { display:block; width:100px; font-style:italic; font-size:0.9em; }
label input { float:right; width:180px }
The form and label elements have been given a fixed width, this sets the overall width of your form. This will then be divided into 2; the text on the left and the input field on the right.
Because the input fields are first in the label tags, when you float them right they sit nicely next to your text. You can then give these a width, in this case I’ve used 180px. This leaves me with 120px for the left side, i.e. the text and sub-labels. I have set the span (sub-label) to be 100px in width and also given it the display:block attribute; this means it will never exceed 100px in width and will sit on a new line under the main label.
So, by using the above code, you can make forms using little mark-up but still have a lot of control over the layout of your form. This method also gives you an added bonus, you can now click the label to start typing in the input field – this can be very useful for check boxes!
Other Methods
I’d be interested in hearing other methods of laying out forms in web design. What methods do you use?
Channel
on March 9th, 2010 Says:
Hi, I like the way you’ve used span classes to change the form style. I also use span classes for form data entry fields. Although I use just one bit of CSS coding to change the form style and simply call it “.formdatatext” and then simply aply the class to the data entry fields.