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 (<!-- m --><a class="postlink" href="http://roundthebend.greater-peterborough.com/denovo/enquiry.php">http://roundthebend.greater-peterboroug ... nquiry.php</a><!-- m -->)
ThanksI 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.<!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">
<!--
label {display:block; text-align:right; width:20em}
input, textarea {display:inline; margin-left:1ex; width:10em}
-->
</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>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 ?There's no better source than the specification. For CSS see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m -->. For the low down on the LABEL element see <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL">http://www.w3.org/TR/html4/interact/for ... edef-LABEL</a><!-- m -->. One note though, the LABEL element is essential for making forms accessible.
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 (<!-- m --><a class="postlink" href="http://roundthebend.greater-peterborough.com/denovo/enquiry.php">http://roundthebend.greater-peterboroug ... nquiry.php</a><!-- m -->)
ThanksI 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.<!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">
<!--
label {display:block; text-align:right; width:20em}
input, textarea {display:inline; margin-left:1ex; width:10em}
-->
</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>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 ?There's no better source than the specification. For CSS see <!-- m --><a class="postlink" href="http://www.w3.org/TR/REC-CSS2/">http://www.w3.org/TR/REC-CSS2/</a><!-- m -->. For the low down on the LABEL element see <!-- m --><a class="postlink" href="http://www.w3.org/TR/html4/interact/forms.html#edef-LABEL">http://www.w3.org/TR/html4/interact/for ... edef-LABEL</a><!-- m -->. One note though, the LABEL element is essential for making forms accessible.