Tables are designed to show tabular data. But they are also good for building contact forms, because of their easy positioning without having to write much CSS. In this article I will show you how to create simple contact form with less code and less CSS and no tables. Is that possible? You’ll find out.
Note from the author
I updated this article in order to give you the best method of creating simple contact forms. I made a few adjustments to the code and CSS as pointed in Miha’s comment.
The code
I tried to simplify the code for displaying contact form. I used only FIELDSET (which in this case acts like DIV or a container), LABEL (for displaying text) and INPUT and TEXTAREA (for entering text). So, this is the code.
<form method="post" action="#">
<fieldset>
<legend>Simple contact form</legend>
<label>Name<br /><input name="name" type="text" class="text" /><br /></label>
<label>Your e-mail<br /><input name="email" type="text" class="text" /><br /></label>
<label>Subject<br /><input name="subject" type="text" class="text" /><br /></label>
<label>Message<br /><textarea name="message" cols="50" rows="10" class="text" ></textarea><br /></label>
<input name="Submit" type="submit" value="Send message" class="button"/>
</fieldset>
</form>
Without CSS the page doesn’t look so nice. But when we write the CSS for this code it looks quite pretty. Take a look.
We used BREAKS (<BR />
) because, as suggested by Miha, the page is not readable when CSS is turned off. This way if you turn off the CSS the page stays readable because every new element (LABEL, INPUT, TEXTAREA) automatically goes into a new row. Thanks for pointing that out.
Here is the CSS.
fieldset {
padding:20px;
border:none;
}
legend {
font-size:2em;
padding:0px;
font-weight:bold;
}
label, input, textarea {
display:block;
}
label {
font-size:1.1em;
}
input, textarea {
margin-top:5px;
}
.text {
width:100%;
border:1px solid #E5E5E5;
padding:5px;
}
The explanation
In this case FIELDSET acts like a DIV or a container inside FORM tag. We removed the default border for FIELDSET, and gave it a 20px padding. The padding is here just to create the effect that elements are inside a form, if we wish to add a background-color
to the contact form at later time.
Please note: Because of the box model rendering difference between Firefox and Internet Explorer you could have problems when adding a padding to the FIELDSET and calculating the right width. The correct method of calculating the overall box width is WIDTH(200px) + PADDING (20px) = 240px, while Internet Explorer calculates the overall width all together (200px).
In updated contact form we also used LEGEND instead of H2. I prefer using the LEGEND tag when dealing with many forms on one page, but this way the semantic looks better. This is the right way. Quick tip: if you wish that your LEGEND tag looks the same as H2, you could group them like this h2, legend { ... }
.
LABEL acts like a mini-container because we added INPUT and TEXTAREA inside it. We said to the browser to display LABEL, INPUT and TEXTAREA as block so we could apply the margins. We added a Because we used BREAKS, we didn’t have to use margin-bottom:10px
value to the LABEL so the labels (or mini-containers) get separated from each other.margin-bottom:10px
, because the <BR />
does it for us.
To the INPUT and TEXTAREA tags we added a margin-top:5px
value to make space between the text shown and text that has to be entered into input area.
We also created class TEXT and then applied it to INPUT and TEXTAREA so we can accomplish the exact look of the all input areas. This could be accomplished with input[type=text]
, but this will work only in Firefox.
Leave a Reply