Use HTML to create a simple form that is SEO friendly

This form illustrates the most common elements you'll need to code in html as...It should look like this when you're done.

Comment Form

1. Name:
2. Email:
3. Comment:
4. Request Type: Question Comment
5. Subscribe to our mailing list? Yes
6. How did you hear about us? Choose... A friend Facebook Twitter

This form will submit to an email. It's also semantically correct and will display well in all major browsers. Here's the code for the form itself.

<form id="myform" action="mailto:planetoftheweb@gmail.com?subject=Comments" method="POST" enctype="text/plain">
<fieldset>
<legend>Comment Form</legend>
<ol>
	<li><label>Name:</label><input type="text" name="myname" /></li>
	<li>
		<label>Email:</label>
		<input type="text" name="myemail" />
	</li>
	<li>
		<label>Comment:</label>
		<textarea name="mycomments"></textarea>
	</li>
	<li>
		<label>Request Type:</label>
		<input type="radio" name="requesttype" value="question"> Question
		<input type="radio" name="requesttype" value="comment"> Comment
	</li>
	<li>
		<label>Subscribe to our mailing list?</label>
		<input type="checkbox" name="subscribe" CHECKED value="yes" /> Yes
	</li>
	<li>
		<label>How did you hear about us?</label>
		<select name="reference">
			<option>Choose...</option>
			<option value="friend">A friend</option>
			<option value="facebook">Facebook</option>
			<option value="twitter">Twitter</option>
		</select>
	</li>
	<li><input id="submit" type="submit" value="Send" /></li>
</ol>
</fieldset>
</form>

You can use the fieldset tag to declare different sections of forms. The form elements are placed into a list. That makes each element a separate entity and is important for you CSS code.

I used the CHECKED attribute in the input checkbox field in order to pre-check that. If you want to pre-select a SELECT OPTION, you can use the keyword SELECTED...otherwise, you should have a "Choose..." OPTION element as your first element with no value to make sure people don't submit a form with a specific default value.

The CSS code looks like this:

 
<style>
#myform fieldset {
	font-family: Arial;
	font-size: 11px;
	padding: 10px;
	border: 1px dotted #666;
	background-color: #DDD;;
	width:300px;
}
 
#myform legend {
	font-family: Arial;
	font-size: 14px;
	color: #FFF;
	background-color: #666;
	padding: 5px;
	margin-top:-30px;
	
}
 
#myform ol {
	margin: 0px;
	padding: 0px;
}
 
#myform li {
	list-style: none;
	clear: both;
}
 
#myform label {
	width: 90px;
	font-weight: bold;
	padding-right: 10px;
	padding-bottom: 10px;;
	display: block;
	float: left;
}
 
#myform input,#commentform textarea {
	margin-bottom: 5px;
}
 
#myform #submit {
	clear: both;
	width: 80px;
	float: right;
}
 
</style>

I created an ID tag for the form called myform which allows me to target just the form elements in my form. If I didn't do this, then any other form elements on the page would have been affected. So for every element in my form, I begin the css with #myform and then the specific selector.

This form is by no means comprehensive, but it's a great starting point for a good semantically correct form that illustrates every major element.