Use HTML to create a simple form that is SEO friendly

This form illustrates some of the common approaches that I'm currently using when building forms. I've done a lot of research and I'm currently using this approach

  • Place form labels at the top to make labels easier to read, especially in mobile browsers
  • Use list items for each form element
  • Use fieldsets for separating groups of elements. You may or may not want to use the legend tag for adding a header to each fieldset. You can use fieldsets to group different sections and lay out your forms with positioning attributes.
  • When using sub-groups, you can use a second set of lists
  • Use a lot of the new HTML5 form attributes like placeholder, required and autofocus to enhance your forms for newer browsers that support them. This will also provide some nice validation benefits and allows you to style things with attribute specific CSS (like the required fields outlined in red on my form).
  • Instead of using <input type="submit" />, I like to use the <button> tag because it has better styling options.
  • Use the for attribute of the
Personal Info
Other
  1. Request Type
<form id="myform" action="mailto:planetoftheweb@gmail.com?subject=Comments" method="POST" enctype="text/plain">

<fieldset>
<legend>Personal Info</legend>
<ol>
<li>
<label for="myname">Name *</label>
<input type="text" name="myemail" id="myname" autofocus placeholder="Last, First" required />
</li>
<li>
<label for="myemail">Email *</label>
<input type="email" name="myemail" id="myemail" required autocomplete="off" />
</li>
<li>
<label for="mypassword">Password *</label>
<input type="password" name="mypassword" id="mypassword" required />
</li>
</ol>
</fieldset>
<fieldset>
<legend>Other</legend>
<ol>
<li>
<label for="mywebsite">Website</label>
<input type="url" name="myemail" id="mywebsite" />
</li>
<li>
<div class="grouphead">Request Type</div>
<ol>
<li>
<input type="radio" name="requesttype" value="question" id="question" />
<label for="question">Question</label>
</li>
<li>
<input type="radio" name="requesttype" value="comment" id="comment" />
<label for="comment">Comment</label>
</li>
</ol>
</li>
<li>
<label for="mycomments">Comment</label>
<textarea name="mycomments" id="mycomments"></textarea>
</li>
<li class="singleline">
<input type="checkbox" id="subscribe" name="subscribe" CHECKED value="yes" />
<label for="subscribe">Subscribe to our mailing list?</label>
</li>
<li>
<label for="reference">How did you hear about us?</label>
<select name="reference" id="reference">
<option>Choose...</option>
<option value="friend">A friend</option>
<option value="facebook">Facebook</option>
<option value="twitter">Twitter</option>
</select>
</li>
</ol>
<button type="submit">send</button>
</fieldset>
</form>

The CSS is pretty explanatory. There's a lot of different types of selectors in there including the attribute selector class, which is quite useful for doing things with specific elements (like checkboxes)


<style>

#myform {
	font: normal .8em/1em Arial, Helvetica, Geneva, sans-serif;
}

#myform fieldset {
	border: none;
	width:300px;
	margin: 0;
	padding: 0;
	margin-top: 10px;
}
 
#myform legend {
	color: #FFF;
	background-color: #666;
	padding: 8px;
	font-size: 1.3em;
	font-weight: bold;
}

#myform ol {
	margin: 0px;
	padding: 0px;
}
 
#myform ol li {
	list-style: none;
	padding: 8px;
	border-top: 1px solid #999;
	border-bottom: 1px solid #EEE;
	background-color: #DDD;
}

#myform ol li ol li {
	padding-bottom: 0;
	display: inline;
	padding: 0px;
	border-top: none;
	border-bottom: none;
}

#myform ol li label, .grouphead {
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
	color: #444;
}

#myform ol li.singleline label {
	font-weight: normal;
	display: inline;
}

#myform ol li ol li label {
	font-weight: normal;
	display: inline;
	cursor: pointer
}
 
#myform ol li input, #myform textarea {
	display: block;
	width: 270px;
	border: 1px solid #888;
	padding: 5px;
	background: #EEE;
	
}

#myform ol li:hover {
	background: #CCC;
}

#myform ol li input[required] {
	border-color: #F00;
}

#myform ol li ol li input {
	display: inline;
	width: auto;
}

#myform ol li input[type="checkbox"] {
	width: auto;
	display: inline;
}

#myform ol li select {
	width: 200px;
}

#myform textarea {
	height: 75px;
}

#myform button {
	width: 120px;
	float: right;
	margin-top: 10px;
	border: 1px solid #999;
	background: #DDD;
	cursor: pointer;
}
 
#myform button:hover {
	background: #BBB;
}
 
</style>
 
blog comments powered by Disqus