SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Threaded View

  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.


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
  •