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.
Is this accessible?
What is the ideal way to label repetitive input fields without repeating the label for each row? Is this an ideal use-case for implementing aria-labelledby?
I just looked at this with my screen reading software and while it is technically accessible it is difficult to use. Specifically I tend to jump from form field to form field with hotkeys when filling out a form. With your example this does not work, I have to use navigation keys to read the table cell by cell so the corresponding column header will be read with the associated form field. While I do not have much web development experience it appears that aria-labelledby will fix your issue. If you look at the following
jsFiddle I used aria-labelledby ion the first row of fields. Any fields in the first row had meaningful names announced, in this case the header corresponding to the field. Since I did not use aria-labelledby on the other rows field labels were not automatically announced and I had to use table navigation to determine what the fields were. See jsFiddle code below.
<table class="table table-striped table-bordered table-condensed">
<caption><h2><em>-Express=</em> Time Entry</h2></caption>
<thead>
<tr>
<th><div id="dateInput">Date</div></th>
<th><div id="hoursInput">Hours</div></th>
<th><div id="notesInput">Notes</div></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" aria-labelledby="dateInput" 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" aria-labelledby="hoursInput" step="0.25" min="0" max="24" class="number span6">
</td>
<td>
<textarea rows="1" cols="25" name="notes1" id="notes1" aria-labelledby="notesInput" 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 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">
ARIA markup will work, but... I find, by far, the simplest and most effective solution is the title attribute when you have repeated form elements, especially if they are created dynamically. Just as Ryan B suggests.
Sometimes simpler is actually better.
Related
I'd like to add label on my website using Thymeleaf fields, too.
I wrote the following code:
<form id="newFoo" action="#" th:action="#{'/save'}" th:object="${foo}"
method="post" autocomplete="off">
<table>
<tr>
<td> <label for="name" form="newFoo">Name</label></td>
<td>
<input id="name" type="text" th:field="*{name}" required="required">
</td>
</tr>
<tr>
<td> <label for="gender" form="newFoo">Gender</label> </td>
<td>
<select id="gender" th:field="*{gender}" required="required">
<option th:each="g : ${genders}"
th:value="${g.id}" th:text="${g.name}" ></option>
</select>
</td>
</tr>
<tr>
<td> <label for="birthday" form="newFoo">Birthday</label></td>
<td>
<input id="birthday" type="date" th:field="*{birthday}" min="1900-01-01" max="2100-01-01" required="required">
</td>
</tr>
<tr>
<td><label for="height" form="newFoo">Height</label></td>
<td> <input id="height" type="number" th:field="*{height}" required="required"> </td>
</tr>
<tr>
<td colspan="2">
<button type="submit">Submit</button>
</td>
</tr>
</table>
</form>
When I tried to navigate through my form by NVDA, only the labels of texts and select were shown and said. Numbers and date were not shown. I tried it on Google Chrome and on Firefox.
Trying w3school, number worked, too.
How can I solve it?
I have read the other questions, but i cant seem to apply it to my problem.
In the validator it is giving me the problem 'The for attribute of the label element must refer to a form control'.
Can someone help me out? here is my code:
<h2>Contact Us</h2>
<form name="contactform" method="post"
action="http://dev.itas.ca/~christopher.allison/send_form_email.php">
<table>
<tr>
<td>
<label for="first_name">First Name *</label>
</td>
<td>
<input type="text" name="first_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td>
<label for="last_name">Last Name *</label>
</td>
<td>
<input type="text" name="last_name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td>
<label for="email">Email Address *</label>
</td>
<td>
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td>
<label for="telephone">Telephone Number</label>
</td>
<td>
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td>
<label for="comments">Comments *</label>
</td>
<td >
<textarea name="comments" maxlength="1000" cols="25" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<div class="buttonHolder">
<input value="Submit" title="submit" name="lucky" type="submit" id="btn_i">
</div>
</td>
</tr>
</table>
</form>
</div><!--close form_settings-->
The issue you have is that the for attribute must reference the id attribute of the input instead of the name:
<label for="first_name">First Name *</label>
<input type="text" id="first_name" name="first_name" maxlength="50" size="30">
You can still use the name attribute for whatever you want but to link label with input you need to add an id.
Check out label documentation.
I'm not sure what I'm missing here. I'm just trying to get the submit button to send the information to my email. What am I doing wrong? Sorry for all the table code, had to be a table for an assignment.
<form method="post" action="mailto:suzanne#nielsenwebdesigns.com" > <table width="478" align="center">
<tr>
<td width="166" style="font-family: 'Letter Gothic Std', 'Lithos Pro Regular', 'Mesquite Std', 'Trebuchet MS'">Name:
</td>
<td width="281">
<input name="name" type="text" required id="name" title="name" size="30">
</td>
</tr>
<tr>
<td>Email:
</td>
<td><input name="email" type="text" required id="email" title="email" size="30"></td>
</tr>
<tr>
<td>Phone:</td>
<td><input name="phone" type="text" id="phone" size="30"></td>
</tr>
<tr>
<td>Subject:</td>
<td><select name="subject" required id="subject" title="subject">
<option value="info">General Information</option>
<option value="web design">Web Design</option>
<option value="hosting">Hosting services</option>
<option value="logo design">Logo Design</option>
</select></td>
</tr>
<tr>
<td>How did you hear of us?</td>
<td>
<label>
<input type="radio" name="how did you hear" value="friend" id="howdidyouhear_0">
friend
</label>
<label>
<input type="radio" name="how did you hear" value="search" id="howdidyouhear_1">
search
</label>
<label>
<input type="radio" name="how did you hear" value="ad" id="howdidyouhear_2">
ad
</label>
</td>
</tr>
<tr>
<td>Message:</td>
<td><textarea name="message" cols="60" rows="15" id="message" title="message">
</textarea>
</td>
</tr>
<tr>
<td><input name="clear" type="image" id="clear" src="clear.png" alt="clear" /></td>
<td>
<input name="submit" type="image" id="submit" src="submit.png" alt="submit" value="send email" />
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</form>
are you dutch? a lot of dutch people have that name ;) )
I think what you're trying to do is send information which is in an input field to your e-mail adress. You can do this using PHP and maybe some other solution, but i dont know them.
For sending the mail with php i would recommend using something like this:
first change the html to:
<form action="mail.php" method="post">
<textarea cols='40' rows='7' name='mailcontent'></textarea>
<input type="submit" value="Submit"/>
</form>
Then create a file called "mail.php" and add this code to it:
<?php
$mail_content = $_POST['mailcontent'];
$mail_subject = "a subject you like, can not be removed."
$mail_to = "suzanne#nielsenwebdesigns.com";
$mail = mail($mail_to, $mail_subject, $mail_content);
if($mail){echo "Success!";}else{echo "Something went wrong, please try again later.";}
?>
or if you just want to let please send a mail themselves i suggest you use this:
Click here to send me a mail
i have one form and i want send data when i have disable input.
is way for this.
my code is :
<form method="post" action="">
<table class="tbl_wheader" style="width: 200px;">
<tbody>
<tr class="even">
<td>
state
</td>
<td>
<input type="text" id="state_id" name="state_id" disabled="">
</td>
</tr>
<tr class="even">
<td>
</td>
<td>
<input type="submit" value="ok" name="addschool">
</td>
</tr>
</tbody>
thanks.
you can store your data in hidden input
<input type="text" name="state_id" disabled="disabled" value="value" />
<input type="hidden" name="state_id" value="same value" />
or you can use readonly attribute
<input type="text" name="state_id" readonly value="value" />
my question is how would I use an HTML::Template tag inside a value of form field to change that field. For example
<table border="0" cellpadding="8" cellspacing="1">
<tr>
<td align="right">File:</td>
<td>
<input type="file" name="upload" value= style="width:400px">
</td>
</tr>
<tr>
<td align="right">File Name:</td>
<td>
<input type="text" name="filename" style="width:400px" value="" >
</td>
</tr>
<tr>
<td align="right">Title:</td>
<td>
<input type="text" name="title" style="width:400px" value="" />
</td>
</tr>
<tr>
<td align="right">Date:</td>
<td>
<input type="text" name="date" style="width:400px" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Cancel">
<input type="submit" name="action" value="Upload" />
</td>
</tr>
</table>
I want the value to have a <TMPL_VAR> variable in it.
You use it the same way you'd use a template variable anywhere else:
<input type="text" name="date" style="width:400px" value="<TMPL_VAR NAME=date>" />
Yeah, it's ugly and it breaks your HTML validator. Which is one of the many reasons why I like Template Toolkit better.