Consider the following form (jsFiddle here):
<table class="table table-striped table-bordered table-condensed">
<caption><h2><em>-Express=</em> Time Entry</h2></caption>
<thead>
<tr>
<th>Date</th>
<th>Hours</th>
<th>Notes</th>
</tr>
</thead>
<tfoot class="well">
<tr>
<td colspan="4">
<input type="submit" name="Submit" value="Submit Time Entry" class="btn btn-primary">
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td scope="row">
<input type="date" name="date1" id="date1" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours1" id="hours1" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes1" id="notes1" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date2" id="date2" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours2" id="hours2" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes2" id="notes2" wrap="soft" class="span12"></textarea>
</td>
</tr>
<tr>
<td scope="row">
<input type="date" name="date3" id="date3" min="2014-01-02" max="2014-03-02" value="" maxlength="10" class="span8 date">
</td>
<td>
<input type="number" name="hours3" id="hours3" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes3" id="notes3" wrap="soft" class="span12"></textarea>
</td>
</tr>
</tbody>
</table>
You might notice that each of the input fields lack an associated label
; this design relies on the table's headers to describe what should go into each input element.
label
for each row? Is this an ideal use-case for implementing aria-labelledby
?You can do what Jared said, or in this case, I would support using the title
attribute on the <input>
s.
<input type="date" name="date1" id="date1"
min="2014-01-02" max="2014-03-02" value="" maxlength="10"
class="span8 date" title="date worked">