Enquiry Form Layout [Archive]

Click to See Complete Forum and Search --> : Enquiry Form Layout

Rodders

09-19-2003, 06:51 PM

Hi

I am trying to create a good-looking enquiry form. I would like each INPUT field to have a label which is to the left of the INPUT but right-aligned. Each label will be on the same vertical postion as the INPUT, although I will have one TEXTAREA and I would like the label to be aligned with the top of the TEXTAREA.

Is it possible to do this using one ID or CLASS for the labels and one ID or CLASS for the INPUTs ?

Here's a link to the file as it stands currently.

Enquiry Form (http://roundthebend.greater-peterborough.com/denovo/enquiry.php)

Thanks

PeOfEo

09-19-2003, 08:12 PM

I would use two div's with id's like left and right. The left would have a margin-right:2; and the right would have a margin-left:2; The use a <br> to put the text boxes on a new line and same with the text.

Charles

09-19-2003, 08:28 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example</title>

<style type="text/css">

</style>

<form action="">
<div>
<label>Name<input type="text"></label>
<label>Email<input type="text"></label>
<label>Phone<input type="text"></label>
<label>House No & Street<input type="text"></label>
<label>Area<input type="text"></label>
<label>Town<input type="text"></label>
<label>Post Code<input type="text"></label>
<label>Nature of Enquiry<input type="text"></label>
<label>Questions<textarea></textarea></label>
</div>
</form>

Rodders

09-19-2003, 09:00 PM

Many Thanks Charles, your example has helped me a lot. I've never heard of the LABEL tag or the 'display' property.

I am going to need a good resource for CSS, can you recommend one. I never seem to be able to find what I want on resource sites, should I get a book ?

Charles

09-19-2003, 09:40 PM

There's no better source than the specification. For CSS see http://www.w3.org/TR/REC-CSS2/. For the low down on the LABEL element see http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL. One note though, the LABEL element is essential for making forms accessible.