Web development, coding & SEO

Form HTML

The basic layout

The basic structure for a form html. Amount of fix-width elements is brought to minimum.

Sample of form html

Code of form html

<div class="formRow">
	<div class="formLabel">
		Your first name:
	</div>
	<div class="formElements-half">
		<input class="textBox" id="cursorIn" type="text" />
		<script type="text/javascript">document.getElementById('cursorIn').focus()</script>
		<div class="inputError">
			error message error message error message error message <!-- -->
		</div>
	</div>
	<div class="formLabel">
		Your last name:
		<p class="labelNote">
			Note no note no note no note no note no note no note no note te.
		</p>
	</div>
	<div class="formElements-half">
		<input class="textBox" type="text" />
		<p class="formNote">
			Note note note note note note note note note note note note note note note.
		</p>
		<div class="inputError">
			error message error message error message error message <!-- -->
		</div>
	</div>
</div>
<div class="formRow">
	<div class="formLabel firstItem">
		Your e-mail address:
	</div>
	<div class="formElements-wide">
		<input class="textBox" type="text" />
		<div class="inputError">
			error message error message error message error message <!-- -->
		</div>
	</div>
</div>
<div class="formRow">
	<div class="formLabel firstItem">
		&#160;
	</div>
	<div class="formElements-wide">
		<input class="checkBox" id="checkBox" type="checkbox" />
		<div class="checkBoxLabel">
			<label for="checkBox">I accept the Terms and Conditions</label> of the <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons</a> licence licence licence licence licence licence licence licence licence.
		</div>
		<div class="inputError">
			error message error message error message error message <!-- -->
		</div>
	</div>
</div>
<div class="formRow">
	<div class="formLabel firstItem">
		&#160;
	</div>
	<input class="buttonStandard" type="submit" value="Submit" />
	<button id="cancelButton" class="buttonLight">Cancel</button>
</div>

CSS of form html

.formRow {
	float:left;
	padding:10px 0;
	width:100%;
}
.formLabel{
	float:left;
	padding-left:50px;
	padding-right:10px;
	width:100px;
	word-wrap:break-word;
}
.labelText{
	padding-bottom:0.3em;
}
.formElements-wide{
	float:left;
	width:560px;
}
.formElements-half{
	float:left;
	width:200px;
}
.textBox{
	margin-bottom:4px;
	width:100%;
}
.labelNote{
	font-size:0.7em;
	font-style:italic;
}
.formNote{
	font-size:0.7em;
}
.inputError{display:none;
	color:#e45;
	float:left;
	font-weight:bold;
	width:100%;
}
.checkBox{
	float:left;
	height:13px;
	margin-top:4px;
	overflow:hidden;
	padding:0;
	width:13px;
}
.checkBoxLabel{
	float:right;
	width:530px;
}
.checkBoxLabel label{
	cursor:pointer;
}
.buttonStandard{
	color:#a02;
	cursor:pointer;
	font-family:verdana;
	font-weight:bold;
	overflow:visible;
	padding:3px 11px;
}
.buttonLight{
	background:transparent;
	border:none;
	color:#c10128;
	cursor:pointer;
	display:table-cell;/*FF*/
	font-family:verdana;
	font-weight:bold;
	padding:6px 0 6px 20px;
	text-decoration:underline;
}
.buttonLight:hover{
	text-decoration:none;
}
.firstRow{
	margin-top:0 !important;
	padding-top:0 !important;
}
.firstItem{
	margin-left:0 !important;
	padding-left:0 !important;
}

2010