SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question Forms with Tables, what is semantically correct?

    Hello, When you create a form in html you should give a label to describe each input e.g.

    Example 1
    HTML Code:
    <h1>Tell us about you</h1>
    <form method="post" action="example.html">
       <p>
       <label for="yourname">Please enter your name</label>
       <input type="text" name="yourname" id="yourname" />
       <input type="submit" value="Submit Data" />
       </p>
    </form>
    But what if you are presenting data in a table about something that is editable; does that require labels? e.g.

    Example 2 (without labels)
    HTML Code:
    <h1>Employee Information</h1>
    <h2>Joe Bloggs</h2>
    <form method="post" action="example.html">
       <table summary="Joe Bloggs Employment Details">
          <tbody>
             <tr>
                <th scope="row">Hours Per Week</th>
                <td>
                   <input type="text" name="hoursperweek" value="40">
                </td>
    
                <th scope="row">Salary</th>
                <td>
                   <input type="text" name="salary" value="25000">
                </td>
             </tr>
          </tbody>
       </table>
       <input type="submit" value="Change Details" />
    </form>
    or

    Example 3 (with labels)
    HTML Code:
    <h1>Employee Information</h1>
    <h2>Joe Bloggs</h2>
    <form method="post" action="example.html">
       <table summary="Joe Bloggs Employment Details">
          <tbody>
             <tr>
                <th scope="row">Hours Worked Per Week</th>
                <td>
                   <label for="hoursperweek">Hours Worked Per Week</label>
                   <input type="text" name="hoursperweek" id="hoursperweek" value="40">
                </td>
    
                <th scope="row">Salary (GBP)</th>
                <td>
                   <label for="salary">Salary (GBP)</label>
                   <input type="text" name="salary" id="salary" value="25000">
                </td>
             </tr>
          </tbody>
       </table>
       <input type="submit" value="Change Details" />
    </form>
    Which is correct? or are they both incorrect?

    Thanks
    ro0bear
    Last edited by ro0bear; Apr 20, 2009 at 11:17.

  2. #2
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Your final example is still far from ideal. How about scrapping the idea of a table for this kind of thing all together?

    Tables are for tabular data. The above example is not this case, because the data isn't tabular. Tabular data is where you have columns defining fields (such as Name, Hours/Week, Salary) and you have many rows containing this information, For example:
    Code html:
    <table>
        <tr>
            <th>Name</th>
            <th>Hours / Week</th>
            <th>Salary</th>
        </tr>
        <tr>
            <td>Joe Bloggs</th>
            <td>40</th>
            <td>25,000</th>
         </tr>
         <tr>
            <td>John Smith</th>
            <td>42</th>
            <td>28,000</th>
          </tr>
         <tr>
             <td>James Jones</th>
             <td>32</th>
             <td>18,000</th>
          </tr>
    </table>

    What you're showing is a simple display page, so you would still have things in the same place:
    Code html:
    <h1>Employee Information</h1>
    <h2>Joe Bloggs</h2>
    <form method="post" action="example.html">
        <label for="hoursperweek">Hours Worked Per Week</label>
        <input type="text" name="hoursperweek" value="40" />
        <label for="salary">Salary (GBP)</label>
        <input type="text" name="salary" value="25000" />
        <input type="submit" value="Change Details" />
    </form>
    You can style the labels and inputs so that they align correctly.

    My preferred method of laying out tables is by thinking as the fields as a list of fields:
    Code html:
    <h1>Employee Information</h1>
    <h2>Joe Bloggs</h2>
    <form method="post" action="example.html">
        <ul>
            <li>
                <label for="hoursperweek">Hours Worked Per Week</label>
                <input type="text" name="hoursperweek" value="40" />
            </li>
            <li>
                <label for="salary">Salary (GBP)</label>
                <input type="text" name="salary" value="25000" />
            </li>
        </ul>
        <input type="submit" value="Change Details" />
    </form>
    This helps quite a bit with keeping things tidy, and also stays semantically correct.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    The for attribute value should correspond to the id of a element. So the inputs in the above example should have a id attribute with a value of hoursperweek and salary. The for attribute does not correspond to the name attribute.

  4. #4
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by arkinstall View Post
    My preferred method of laying out tables is by thinking as the fields as a list of fields:
    Code html:
    <h1>Employee Information</h1>
    <h2>Joe Bloggs</h2>
    <form method="post" action="example.html">
        <ul>
            <li>
                <label for="hoursperweek">Hours Worked Per Week</label>
                <input type="text" name="hoursperweek" value="40" />
            </li>
            <li>
                <label for="salary">Salary (GBP)</label>
                <input type="text" name="salary" value="25000" />
            </li>
        </ul>
        <input type="submit" value="Change Details" />
    </form>
    This helps quite a bit with keeping things tidy, and also stays semantically correct.
    Thanks, would a definition list be more correct though?

    e.g.

    Example 4
    HTML Code:
    <form method="post" action="example.html">
        <dl>
            <dt>
                <label for="hoursperweek">Hours Worked Per Week</label>
            </dt>
            <dd>
                <input type="text" name="hoursperweek" id="hoursperweek" value="40" />
            </dd>
            <dt>
                <label for="salary">Salary (GBP)</label>
            </dt>
            <dd>
                <input type="text" name="salary" id="salary" value="25000" />
            </dd>
        </dl>
        <p>
           <input type="submit" value="Change Details" />
        </p>
    </form>
    Thanks

  5. #5
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    The for attribute value should correspond to the id of a element. So the inputs in the above example should have a id attribute with a value of hoursperweek and salary. The for attribute does not correspond to the name attribute.
    You're quite right (edited)

  6. #6
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    Actually, a definition list could be more appropriate, but then you won't have a wrapping element for each field and label pair. This can become a problem so you should be aware of it before choosing to use a definition list. I stick to the ul for that very reason.

  7. #7
    Non-Member
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    623
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by oddz View Post
    Actually, a definition list could be more appropriate, but then you won't have a wrapping element for each field and label pair. This can become a problem so you should be aware of it before choosing to use a definition list. I stick to the ul for that very reason.
    A bit of CSS should sort that out though. If it is more semantically correct, I think I will go with a definition list.

  8. #8
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I usually use unordered list items to mark up form fields.

    You could use <dl>,<ul>,<ol> - Careful with ordered lists though. To be marked up as an ordered list the steps must be in sequential order. Make sense?

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,147
    Mentioned
    16 Post(s)
    Tagged
    3 Thread(s)
    This is one thing CSS can't easily sort out. If you need a encapsulating item for each label / input pair your going to have major problems using a definition list. Its much easier to use a ul - there's no shame in it.

  10. #10
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    For this I'd rather use span or div. They're not as semantically ladden as lists or tables.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  11. #11
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code HTML4Strict:
    <form action="">
    	<fieldset>
    		<legend>Registration Form</legend>
    		<ul>
    			<li>
    				<label for="first-name">First Name</label>
    				<input id="first-name" name="first-name" type="text" value="">
    			</li>
     
    			<li>
    				<label for="last-name">Last Name</label>
    				<input id="last-name" name="last-name" type="text" value="">
    			</li>
    		</ul>
    	</fieldset>
    </form>

    You are listing 'items' in no particular order for the user to fill out, correct?

  12. #12
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A form is a list of questions that the user must fill out. Using a list for the task is fine.

  13. #13
    Theoretical Physics Student bronze trophy Jake Arkinstall's Avatar
    Join Date
    May 2006
    Location
    Lancaster University, UK
    Posts
    7,062
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There's a certain rule I try to stick to as much as possible, and that is to avoid having a tag with just one child tag inside it, unless that child tag is dependent on that parent tag.

    For example, when you open the <body /> tag. There's NO point in putting just <div /> inside that, which is what alot of people do. Instead you can style the <body /> just like that div, so it isn't required.
    Jake Arkinstall
    "Sometimes you don't need to reinvent the wheel;
    Sometimes its enough to make that wheel more rounded"-Molona

  14. #14
    SitePoint Wizard silver trophybronze trophy
    Join Date
    Jul 2008
    Location
    New York, NY
    Posts
    1,432
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @arkinstall

    I abide by the same rule. The only thing I don't do now is use the body as the direct wrapper because of ie6/ie7 buggy behavior. For the most part setting position: relative; as a body declaration clears issues up...


Bookmarks

Posting Permissions

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