Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Using <table>, <span> and <label> with forms

    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.
    Code:
    <html> 
    <head> 
    <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; }
    </style>
    </head> 
    <body> 
    <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"/>
    <br>
    <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"/>
    </form>
    </body>
    </html>
    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>.

    Regards
    Dieter

  • #2
    Master Coder
    Join Date
    Feb 2003
    Location
    UmeŚ, Sweden
    Posts
    5,575
    Thanks
    0
    Thanked 83 Times in 74 Posts
    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.
    liorean <[lio@wg]>
    Articles: RegEx evolt wsabstract , Named Arguments
    Useful Threads: JavaScript Docs & Refs, FAQ - HTML & CSS Docs, FAQ - XML Doc & Refs
    Moz: JavaScript DOM Interfaces MSDN: JScript DHTML KDE: KJS KHTML Opera: Standards

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Sheffield, UK
    Posts
    552
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    "To be successful in IT you don't need to know everything - just where to find it in under 30 seconds"

    (Me Me Me Me Me Me Me Me Me)

  • #4
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks liorean,

    I have changed some of the code as follows,
    with <span>:
    Code:
    <span class="lbl1"><label for="txtbox1">Fairly long text:</label></span>
    <input type="text" name="txtbox1" value="textbox1" id="txtBox1"/>
    without <span>:
    Code:
    <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

  • #5
    New Coder
    Join Date
    Nov 2003
    Location
    Sasolburg, South Africa
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Dieter


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •