Jump to content

Question Regarding Accessible Forms

LaC0saNostra

By LaC0saNostra
in HTML/XHTML

 Share

Recommended Posts

LaC0saNostra Newbie

LaC0saNostra

Posted
Posted

Hello everybody. I am making a feedback page with accessible forms for disabled users. I was able to set up the labels, fieldsets and legends but my problem is in the attached image. I have to set up a label for my E-mail text box but I am confused on how to properly validate this.

 

I tried:

 

<label for="ToAddress"> E-mail </label>
I also tried
<label for="FromAddress"> E-mail </label>
Lastly I tried
<label for="LaC0saNostra11@gmail.com>E-mail</label>
None of these worked.I am still confused where exactly my tab after "E-mail" is in my assignment.
Here is my HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Edward Schubauer's Web Form</title>
<link href="web_form_page_css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
</head>
<body>
<div align="center">
<h1> My Personal Web Form</h1>
</div>
<p> I have been working diligently on this website. My portal page has some sample information and my CSS page has different examples of what concepts I have learned. At this point I would greatly appreciate if I could get some feedback on my webpage with the form below for you the user to fill out! Every person that gives me feedback will allow for vital information to improve the experience on this website. As always, your time will be greatly appreciated. Thank you. </p>
E-mail:
<input type="hidden" name="ToAddress" value="LaC0saNostra11@gmail.com" />
<input type="hidden" name="CCAddress" value="" />
<input type="hidden" name="Subject" value="WSD: Assignmebnt 2.2-Web Form for Edward Schubauer" />
<input type="text" name="FromAddress" />
<table border="0" width="75%" align="left">
<tr>
<td align="right" width="10%"><label for="CustName">Name:</label> </td>
<td><input type="text" name="CustName" id="CustName" size="30" />
</td>
</tr>
<tr>
<td align="right"><label for="CustAddress">Address:</label> </td>
<td><input type="text" name="CustAddress" id="CustAddress" /> </td>
</tr>
<tr>
<td align="right"><label for="CustCity">City:</label> </td>
<td><input type="text" name="CustCity" id="CustCity" /> </td>
</tr>
<tr>
<td align="right"><label for="CustState">State:</label> </td>
<td><input type="text" name="CustState" id="CustState" /> </td>
</tr>
<tr>
<td align="right"><label for="CustZipCode">Zip Code:</label> </td>
<td><input type="text" name="CustZipCode" id="CustZipCode" /> </td>
</tr>
<tr>
<td align="right"><label for="CustCountry">Country:</label> </td>
<td><input type="text" name="CustCountry" id="CustCountry" /> </td>
</tr>
<tr>
<td colspan="2"><label for="CustComment">Additional Feedback:</label><br />
<textarea rows="4" cols="60" name="CustComment"
id="CustComment">Please enter any feedback that comes to mind.</textarea></td>
</tr>
<tr>
<td align="right"><input type="submit" value="Send" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</table> <br />
<fieldset>
<legend>Please rate my webpage:</legend> <br /> <br />
<input type="radio" name="Rating" id="strongly_dislike"
value="strongly_dislike" /><label for="strongly_dislike">Strongly Dislike</label><br />
<input type="radio" name="Rating" id="dislike"
value="dislike" /><label for="dislike">Dislike</label><br />
<input type="radio" name="Rating" id="like"
value="like" /><label for="like">Like</label><br />
<input type="radio" name="Rating" id="strongly_like"
value="strongly_like" /><label for="strongly_like">Strongly Like</label><br />
<input type="radio" name="Rating" id="love"
value="love" /><label for="love">Love</label><br /><br />
</fieldset>
</form> <br /><br /><br /><br /><br /><br />
<p>
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>

post-170676-0-84155600-1394117927_thumb.png

Accessiblie_Web_Forms.html

post-170676-0-30309100-1394118021_thumb.jpg

web_form_page_css.css

Link to comment
Share on other sites
LaC0saNostra Newbie

LaC0saNostra

Posted
  • Author
Posted

If you look at my attached image when trying to validate this page using http://wave.webaim.org/ I have an error at the E-mail section. I want to be able to successfully validate this page.

 

I need a <label for=" "> </label> for the E-mail text box but I am having trouble figuring out how to configure it.

Link to comment
Share on other sites
Wolverine Newbie

Wolverine

Posted
Posted

Try

<!DOCTYPE html>

<html>
<head>
<title>Edward Schubauer's Web Form</title>
<link href="web_form_page_css.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content ="text/html; charset=utf-8"/>
</head>
<body>
<div align="center">
<h1> My Personal Web Form</h1>
</div>
<p> I have been working diligently on this website. My portal page has some sample information and my CSS page has different examples of what concepts I have learned. At this point I would greatly appreciate if I could get some feedback on my webpage with the form below for you the user to fill out! Every person that gives me feedback will allow for vital information to improve the experience on this website. As always, your time will be greatly appreciated. Thank you. </p>
<form action="http://cdlwebsysdev...._form_page.html" method="post">
E-mail:
<input type="hidden" name="ToAddress" value="LaC0saNostra11@gmail.com" />
<input type="hidden" name="CCAddress" value="" />
<input type="hidden" name="Subject" value="WSD: Assignmebnt 2.2-Web Form for Edward Schubauer" />
<input type="text" name="FromAddress" />
<table border="0" width="75%" align="left">
<tr>
<td align="right" width="10%"><label for="CustName">Name:</label> </td>
<td><input type="text" name="CustName" id="CustName" size="30" />
</td>
</tr>
<tr>
<td align="right"><label for="CustAddress">Address:</label> </td>
<td><input type="text" name="CustAddress" id="CustAddress" /> </td>
</tr>
<tr>
<td align="right"><label for="CustCity">City:</label> </td>
<td><input type="text" name="CustCity" id="CustCity" /> </td>
</tr>
<tr>
<td align="right"><label for="CustState">State:</label> </td>
<td><input type="text" name="CustState" id="CustState" /> </td>
</tr>
<tr>
<td align="right"><label for="CustZipCode">Zip Code:</label> </td>
<td><input type="text" name="CustZipCode" id="CustZipCode" /> </td>
</tr>
<tr>
<td align="right"><label for="CustCountry">Country:</label> </td>
<td><input type="text" name="CustCountry" id="CustCountry" /> </td>
</tr>
<tr>
<td colspan="2"><label for="CustComment">Additional Feedback:</label><br />
<textarea rows="4" cols="60" name="CustComment"
id="CustComment">Please enter any feedback that comes to mind.</textarea></td>
</tr>
<tr>
<td align="right"><input type="submit" value="Send" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</table> <br />
<fieldset>
<legend>Please rate my webpage:</legend> <br /> <br />
<input type="radio" name="Rating" id="strongly_dislike"
value="strongly_dislike" /><label for="strongly_dislike">Strongly Dislike</label><br />
<input type="radio" name="Rating" id="dislike"
value="dislike" /><label for="dislike">Dislike</label><br />
<input type="radio" name="Rating" id="like"
value="like" /><label for="like">Like</label><br />
<input type="radio" name="Rating" id="strongly_like"
value="strongly_like" /><label for="strongly_like">Strongly Like</label><br />
<input type="radio" name="Rating" id="love"
value="love" /><label for="love">Love</label><br /><br />
</fieldset>
</form> <br /><br /><br /><br /><br /><br />
<p>
src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
</p>
</body>
</html>
And see what happens.
Link to comment
Share on other sites
  • 3 weeks later...
LaC0saNostra Newbie

LaC0saNostra

Posted
  • Author
Posted

I actually figured this out on my own. After reading your comments I did some more research and figured out I needed to load the information to my FTP server before attempting to execute this e-mail. Thanks for the info though guys.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...