(watch this video in a new tab or window)
There are many times on a website that you want to collect data from your users. To do that, you usually need a form. Here is a sample form that meets WCAG 2.0 Level AAA standards that covers types of items you would find on a form:
<section>
<h1>Forms</h1>
<h2>This is a place holder for a web page that has a completely accessible web form</h2>
<form name='formMyHDGLocationManager' action='' METHOD='post' ENCTYPE='application/x-www-form-urlencoded'>
<label for='a_text_field_01'>Text field</label>
<input type='text' name='a_text_field_01' id='a_text_field_01' value=''>
<label for='a_text_field_02'>Another Text field</label>
<input type='text' name='a_text_field_02' id='a_text_field_02' value=''>
<fieldset>
<legendphp>Radio Buttons</legendphp>
<br><input type='radio' name='gender' id='1st choice' value='1st choice'><label for='1st choice' class='radio'>1st choice</label>
<br><input type='radio' name='gender' id='2nd choice' value='2nd choice'><label for='2nd choice' class='radio'>2nd choice</label>
<br><input type='radio' name='gender' id='3rd choice' value='3rd choice'><label for='3rd choice' class='radio'>3rd choice</label>
</fieldset>
<fieldset>
<legendphp>Checkboxes</legendphp>
<br><input type='checkbox' name='1st one' id='1st one' value='1st one'><label for='1st one' class='checkbox'>1st one</label>
<br><input type='checkbox' name='2nd one' id='2nd one' value='2nd one'><label for='2nd one' class='checkbox'>2nd one</label>
<br><input type='checkbox' name='3rd one' id='3rd one' value='3rd one'><label for='3rd one' class='checkbox'>3rd one</label>
<br><input type='checkbox' name='4th one' id='4th one' value='4th one'><label for='4th one' class='checkbox'>4th one</label>
</fieldset>
<label for='a_dropdown_list'>Dropdown list</label>
<br><select name='a_dropdown_list' id='a_dropdown_list'>
<option value='Option 1'>Option 1</option>
<option value='Option 2'>Option 2</option>
<option value='Option 3'>Option 3</option>
<option value='Option 4'>Option 4</option>
</select>
<p><label for='a_textarea'>Textarea
<br><textarea name='a_textarea' id='a_textarea' rows='5' cols='55'></textarea></label></p>
<input type='submit' value='Submit'>
</form>
(watch this video in a new tab or window)
Accessibility is a hot topic these days and I will say, when it comes to design, it does limit your options. Color schemes need to have a lot of contrast. It's a good thing though, because there are tools to check your pages to make sure they're accessible by everyone, which is really the goal. The main tool that I use is the WAVE extension for Google Chrome (http://wave.webaim.org/extension/). With this tool installed, you can even check pages that require you to login first, because the tool runs from your local machine. Install this tool and check some of your web pages.
(watch this video in a new tab or window)
Copy KirksSampleSite.zip to your web space and tweak it to make it your own. Change the color scheme and the menu and, of course, the content to your own interest. This is a sample site to show you how to create a whole site, and not just a page. You need to fill it up with something that is of interest to you. Make it yours. Have a peer evaluate it. Have your parents or friends use it and tell you what they think. Are there any typo's? Does it look different enough from the original to know that it's yours? Do you have an appropriate amount of content? Good luck and have fun.