View Full Version : Using <table>, <span> and <label> with forms

Dieter Rausch
01-14-2004, 10:01 PM
Hi everyone,

I am trying to create a form with various text boxes, buttons and labels, i.e. a short section of text on the left of each text box. In VB such text is referred to as a label. The text boxes and buttons need to line up vertically.
Below is some experimental code.

<title>My web page</title>
<style type="text/css">
#txtBox1 {width:70px; text-align:center;}
#txtBox2 {width:80px; text-align:center;}
#txtBox3 {width:90px; text-align:center;}
#txtBox4 {width:100px; text-align:center;}
.lbl1 {width:100px; text-align:right; background-color:#7EBBC2;}
.lbl2 {width:130px; text-align:right; background-color:#7EAAC2;}
#lbl4 {width:110px; text-align:right; background-color:#AABBCC;}
#bt1 {width:90px; }
<form action="post">
<label class="lbl1">Fairly long text:</label>
<input type="text" name="textbox1" value="textbox1" id="txtBox1"/>
<span class="lbl2">Short text:</span>
<input type="text" name="textbox2" value="textbox2" id="txtBox2"/>
<input type="button" name="button1" value="Button 1" id="bt1"/>
<label class="lbl1"> Short text:</label>
<input type="text" name="textbox3" value="textbox3" id="txtBox3"/>
<label id="lbl4"> Much longer text:</label>
<input type="text" name="textbox4" value="textbox4" id="txtBox4"/>
<input type="button" name="button2" value="Button 2"/>

Is this approach correct for solving this problem, or should I have used tables for positioning the labels? I have used tables on a previous occasion and found that once I started using "position: absolute; left: n px" for the first text box to the right of the table, I had to position each and every subsequent text box and button. In the above case this is not necessary. However, I am not certain at all whether the way I have used the <label> tag is correct. I have also used <span>. Both seem to work. What is the appropriate use of <label>.


01-14-2004, 10:07 PM
A label element's for attribute points to the form field with a corresponding id attribute. Note that moz may have problems with labels, espeacially if you are floating them.

01-14-2004, 11:04 PM
labels can also be used as the parent element of an input field:

<label>Fairly Long Text: <input type="text" name="textbox1" value="textbox1" id="txtBox1"/></label>

Dieter Rausch
01-14-2004, 11:16 PM
Thanks liorean,

I have changed some of the code as follows,
with <span>:

<span class="lbl1"><label for="txtbox1">Fairly long text:</label></span>
<input type="text" name="txtbox1" value="textbox1" id="txtBox1"/>

without <span>:

<label for="txtbox1" class="lbl1>Fairly long text:</label>
<input type="text" name="txtbox1" value="textbox1" id="txtBox1"/>

Both work. Clicking on "Fairly long text" places the cursor in txtbox1 in both cases. Which one is the preferred one? I am concerned that I am using the <label> tag for the wrong purpose (see original post) and that span is the correct one to use if one is not trying to associate that particular label to a form element.


Dieter Rausch
01-14-2004, 11:36 PM
Thanks ReadMe.txt,

I have tried your suggestion - it works - but, only textbox1's formatting was correct because of the reference to id "txtBox1".
I could not get the label "Fairly long text:" to format correctly, no matter where I placed the class="lbl1" attribute.