Forms an appropriate use of tables?

M

Michael Wilcox

Is the following code a good use of tables?

<form action="store.php" method="post">
<table>
<tr><td style="text-align: right;">Name:</td><td><input type="text"
name="from"></td></tr>
<tr><td style="text-align: right;">Email:</td><td><input type="text"
name="email"></td></tr>
<tr><td style="text-align: right;">Body:</td><td><textarea
name="body"></textarea></td></tr>
</table>
<input type="submit" value="Send">
</form>

The labels (name, email, body) do refer to the adjacent cell, and it seems
like it should be acceptable, but I thought I should ask.
 
T

Toby A Inkster

Michael said:
Is the following code a good use of tables? (snip example)
The labels (name, email, body) do refer to the adjacent cell, and it seems
like it should be acceptable, but I thought I should ask.

It is pushing the bounds, but I would class it as reasonable.

Make sure to also use the <label> tag, for example:

<tr>
<td style="text-align: right;">
<label for="from">Name</label>:
</td>
<td>
<input type="text" name="from" id="from">
</td>
</tr>

This explicitly specifies the relationship between input fields and their
labels. Note that the "for" attribute specifies an *id*, not a *name*, so
it means you have to add both an *id* _and_ a *name* to your fields. This
does not cause any problems in submitting the forms.
 
J

Jukka K. Korpela

Michael Wilcox said:
Is the following code a good use of tables?

Opinions differ on the question whether a set of a field label, input
field pairs logically constitutes a table. If you ask me, it does.
On the practical side, for accessibility it would be useful to associate
the labels with the fields in markup, but this is also true (though not as
important) when tables are not used. Example:

<tr><td ...><label for="name" Name:</td><td><input id="name" type="text"
name="from"></td></tr>

By the way, your textarea lacks the required rows and cols attributes,
which means that the effect is unpredictable:
<tr><td style="text-align: right;">Body:</td><td><textarea
name="body"></textarea></td></tr>
</table>

Better use some rows and cols attributes, even if you have a style sheet
that may override those dimensions.
 
M

Michael Wilcox

Isofarro said:

Why not?
The table cell holding the text "Name:" is actually a table header so
mark it up as such, and add in a scope="right" . Then migrate the
style information into a stylesheet.

Why is it a table header? It only has to do with one input.
 
I

Isofarro

Michael said:
Is the following code a good use of tables?
No.


<form action="store.php" method="post">
<table>
<tr><td style="text-align: right;">Name:</td><td><input type="text"
name="from"></td></tr>

The table cell holding the text "Name:" is actually a table header so mark
it up as such, and add in a scope="right" . Then migrate the style
information into a stylesheet.

Then encapsulate Name: in a label element with the attribute for="from".
 
E

EightNineThree

Michael Wilcox said:
Is the following code a good use of tables?

<form action="store.php" method="post">
<table>
<tr><td style="text-align: right;">Name:</td><td><input type="text"
name="from"></td></tr>
<tr><td style="text-align: right;">Email:</td><td><input type="text"
name="email"></td></tr>
<tr><td style="text-align: right;">Body:</td><td><textarea
name="body"></textarea></td></tr>
</table>
<input type="submit" value="Send">
</form>

The labels (name, email, body) do refer to the adjacent cell, and it seems
like it should be acceptable, but I thought I should ask.

Not really.
At least they're adjacent to each other.
However, if it is accessibility you're after, you should label those inputs,
too.

http://webaim.org/howto/forms/
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,482
Members
44,901
Latest member
Noble71S45

Latest Threads

Top