Forms with Tables, what is semantically correct?

[ro0bear]

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

Example 1

<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)

<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)

<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

[Jake Arkinstall]

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:

<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:

<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:

<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.

[oddz]

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.

[ro0bear]

My preferred method of laying out tables is by thinking as the fields as a list of fields:

<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

<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

[ro0bear]

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)

[oddz]

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.

[ro0bear]

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.

[cooper.semantics]

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?

[oddz]

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.

[kohoutek]

For this I'd rather use span or div. They're not as semantically ladden as lists or tables.

[cooper.semantics]

<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?

[Karpie]

A form is a list of questions that the user must fill out. Using a list for the task is fine.

[Jake Arkinstall]

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.

[cooper.semantics]

@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...