Forms Without Tables

CreaTECH Tips

With CSS you can create nice forms without using tables.  In this article, I will share the CSS and methodology that I use.  In the applications that I develop, I often have more than one form on a page and I use javaScript and jQuery to manage the form submissions.

Each form div has it’s own CSS ID and I use the same basic CSS for each form, just tweaking the width parameters to make sure that the labels and input fields align properly.

First Form

In this first example, I am going to create a form that has 3 labels and input fields.  The label fields are right aligned and the input fields are left aligned.  The final form will look like this.

The html

The basic html for this form is as follows, but without any styling, the form appears as shown:

2015-06-16_18-06-36

Linking a Stylesheet

We can create a stylesheet called styles.css  and link it to the html page (1).  At the same time, I am going to surround the form fields in a div with an id of Form1Layout. (2)  I could use a class instead of an id but that would mean that all of my forms will have the same style, whereas I might have multiple forms on my page with multiple labels and input fields so I want to use an id for each form so that they can all be styled individually.  Adding the div and stylesheet will not change the appearance of our form because our stylesheet is still empty.

Formatting the form div

The first thing I do is add some styling to the form itself.  I change the font family and size and add a 10px margin at the top to give it some spacing above.  Next I add a border around the form, give it a background colour and some padding to indent the labels and input fields from both sides.  The form itself takes up the entire width of the page but we will fix that later.

2015-06-16_18-07-07

Formatting the label

The next thing I do is set the width of the label and right justify the label with 10px padding on the right.  The width of 80px is sufficient to ensure that my longest label (Full Name:) will be enclosed within the 80px.  Notice that the label is styled within the #Form1Layout id.  These styles do not appear to make that much difference to my form as it appears that only the 10px padding has been applied.  We still need to do a couple of other things.

2015-06-16_18-07-21

Setting the width of the input fields

For this example, I am going to specify a width of all input fields to be 300px.  In the next example, I will show you how you can control individual ones.  Again, notice that the input field is stylized within the #Form1Layout id.

2015-06-16_18-07-36

Specify the #Form1Layout width

Before we specify vertical spacing between the rows, we need to define the width of our #Form1Layout div.

This width should be equal to the sum of the label width (80px) the label padding (10px) and the input field width (300px) so 390px.  We add this to the #Form1Layout id and this reduces the width of our grey form.

Add Vertical Spacing and display type

Now you can add the vertical spacing and define the display of both the label and input fields as block elements with both floating left.

With this done, our form is looking pretty good.

2015-06-16_18-07-57

Styling the button.

I like to have all of my buttons styled the same way so I will add a class to my button html and define a style for my button class.

The class I will use is .My_Button with the following CSS that gives it a background colour and floats it to the right..  Doing so however ruins our form height.

2015-06-16_18-08-22

Fixing the height

Fixing the height is easy.  All we have to do is add a height selector to our #Form1Layout id.  The height should be enough to enclose all of your rows, the button and all padding.

The height of each row is governed by the height of the input field.  If you inspect the input field you will see that it takes up a vertical space of 29 px including the 10 px bottom margin.  There are 3 rows so 3 X 29 = 87 px.  The button has a total height of 28 px so the total vertical height required for the #Form1Layout is 87 + 28 = 115 px.

We can add this to the #Form1Layout rule set, finishing our form.

Second Form

In this second form, I will show you how you can place 2 fields on the same row.  We will break up the Full Name field into First Name, Last Name so our final form will look like this.

The html

The html for this form will be similar to the previous example, but instead of breaking our row after each input, we keep the First name and Last Name fields on the same row.

2015-06-16_18-08-44

Adding a new form div

Since I am keeping this form in the same index page as the previous form, I need to surround my form by a div with a unique ID.  Let’s call it Form2Layout.

 

Adding CSS

I will start by duplicating the CSS that I used for Form1Layout but change it to #Form2Layout.  Notice that with our CSS, it appears that the <br> are ignored and the two fields are now on separate rows.  However, this is only because the width of our form is forcing the fields on to the next line.  In the last section of this tutorial, I will show you what you will need to do to ensure that the line breaks still work even if our form is wider.

Assign IDs to the labels and input fields.

The First Name  label is OK but the input field is too wide.  Similarly the Last Name label needs be shortend so it can move up on to the same line with a shortened  input field.  To address the label and input fields differently we can assign a CSS class or ID to each of the elements.  If you know that all of your new width input fields have the same width, you could use a CSS class, but if you want to treat them specifically, then you must use IDs and that is what I am going to do.  I will assign an ID to each of the two input fields as well as the lable for the second column (Last Name) field.

Adding CSS

Basically, all we have to do is add widths to each of these selectors within the Form2Layout div.

We know that in our case (and this could be adjusted later, the form width as defined in #Form2Layout is 390 px.  So, our total widths and padding for the two labels and input fields cannot exceed this.

Our first label has not changed so it uses 80 px width plus a 10 px padding to the right.  Our second label can be set to the width we need for the ‘Last Name’ label so I figure 90 px plus the 10 px padding it will still inherit from the label selector.  That uses 190 px which leaves us with 200 px for each of the two input fields.  So, for lack of something better, I can divide this up to 100 px each.  The CSS then is just this.

Now, if these two input fields are not wide enough, you could increase the width of the form2Layout div and increase the width of the input fields accordingly but see the final note to ensure that your line breaks work.

2015-06-16_18-09-26

Styling the button

All that is left to do is to assign our button class to our submit button so that it will be styled to our liking.

last

Enforcing the line breaks.

If we decided, as I mentioned above that we want to increase the width of our first and last name input fields to say 150 px each, we will need to increase the width of our form to 490 px.  If we do so, it causes a problem. As you can see in the image below, there is no break after the Address field and the phone label is on the same line.  This is because the CSS for both the labels and input fields have a declaration of float: left.

We need to have a declaration of the br rule set that will clear the floats so that it will start a new line.

The br rule set declaration

It is likely a good practice then to add a #FormXLayout br rule set for all of your form ids.  The declarion is simple.  You just have to assign the value of both to the clear property.

This will ensure that the line breaks work as designed.

2015-06-16_18-09-43

Leave a Reply

Your email address will not be published. Required fields are marked *