Hi,
I recommend this publication <http://www.rosenfeldmedia.com/books/webforms/
>. It just arrived from Amazon
today, and is very informative.
C
On Aug 19, 2009, at 1:42 PM, Erickson, Kevin (DOE) wrote:
FYI- I did replace align="right" & align="center" with CSS styling.
-----Original Message-----
From: Erickson, Kevin (DOE)
Sent: Wednesday, August 19, 2009 4:33 PM
To: '[email protected]'
Subject: RE: [WSG] Accessible Forms
I have two simple forms. Which is better?:
http://www.doedev.vi.virginia.gov/z_testing_area/kevin/form_mail_vi/form
_mailer4.shtml
Code:
<form name="form_submit" method="post"
action="/home_files/forms/form_mail_template.cfm">
<p>
<span id="sprytextfield1">
<label for="FirstName">First Name:<br />
<input type="text" name="FirstName"
id="FirstName" size="30" />
</label>
<span class="textfieldRequiredMsg">A
value is required.</span>
</span> <br />
<span id="sprytextfield2">
<label for="LastName">Last Name:<br />
<input name="LastName"
type="text" id="LastName" size="40" />
</label>
<span class="textfieldRequiredMsg">A
value is required.</span>
</span><br />
<span id="sprytextfield3">
<label for="Email">Email Address:<br />
<input name="Email" type="text"
id="Email" size="50" /><br />
</label>
<span class="textfieldRequiredMsg">A
value is required.</span><span
class="textfieldInvalidFormatMsg">Invalid
format.</span>
</span>
</p>
<p>
<span id="sprytextarea1">
<label for="Comments">Comments:<br />
<textarea name="Comments" id="Comments"
cols="50" rows="5"></textarea>
</label>
</span>
</p>
<p>
<label>
<input type="submit" name="submit2" id="submit"
value="Submit" />
</label>
</p>
</form>
AND
http://www.doedev.vi.virginia.gov/z_testing_area/kevin/form_mail_vi/form
_mailer6.shtml
Code:
<form name="form_submit" method="post"
action="/home_files/forms/form_mail_template.cfm">
<p>*Required information</p>
<table width="800">
<caption>
Form Mailer
</caption>
<tr>
<td width="158" align="right">
<label for="FirstName">*First Name:</label></
td>
<td width="626"><span id="sprytextfield1">
<input type="text" name="FirstName"
id="FirstName" size="30" />
<span class="textfieldRequiredMsg">A value is
required.</span></span></td>
</tr>
<tr>
<td align="right">
<label for="LastName">*Last Name:</label></
td>
<td><span id="sprytextfield2">
<input name="LastName" type="text"
id="LastName" size="40" />
<span class="textfieldRequiredMsg">A value is
required.</span></span></td>
</tr>
<tr>
<td align="right">
<label for="Email">*Email
Address:</label></td>
<td><span id="sprytextfield3">
<input name="Email" type="text" id="Email"
size="50" />
<span class="textfieldRequiredMsg">A value is
required.</span><span class="textfieldInvalidFormatMsg">Invalid
format.</span></span></td>
</tr>
<tr>
<td align="right">
<label for="Comments">Comments:</label></td>
<td><span id="sprytextarea1">
<textarea name="Comments" id="Comments"
cols="50" rows="5"></textarea>
</span></td>
</tr>
<tr>
<td colspan="2" align="center"><label>
<input type="submit" name="submit" id="submit"
value="Submit" />
</label></td>
</tr>
</table>
</form>
-----Original Message-----
From: [email protected] [mailto:[email protected]]
On Behalf Of Benjamin Hawkes-Lewis
Sent: Wednesday, August 19, 2009 4:10 PM
To: [email protected]
Subject: Re: [WSG] Accessible Forms
On 19/08/2009 20:04, David Dorward wrote:
On 19 Aug 2009, at 19:35, Tom Livingston wrote:
On a slightly related topic, I have wrapped inputs inside of labels
for browser compatibility for the label clickability/focus issue
(based on some research some time ago), but have just read for the
first time recently, that this is not a good idea. Any thoughts?
It isn't really a bad idea. It isn't as well supported as using the
for attribute, so you should use that as well. Beyond that it is a
matter of person taste.
Well, I haven't personally verified this, but there are apparently
some
interoperability drawbacks to nesting inside labels even when you also
use "for" and "id", i.e.
<label for="name-field">
Name:
<input id="name-field" name="name" type="text">
</label>
See:
http://green-beast.com/blog/?p=254
More generally, folks, see W3C's Web Accessibility Initiative's
advice,
which includes some reports about poor support for implicit labels:
http://www.w3.org/TR/WCAG-TECHS/H44.html
--
Benjamin Hawkes-Lewis
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
*******************************************************************
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [email protected]
*******************************************************************
