www.tuljo.com

form html code

This is a sample of a form mark up I've used recently. It should survive any imaginable shanges you have to implement by request from aside. Adding or removing elements does not blow up the page. The same principle is suitable for more complex layouts. Simple cases of course, doesn't need such heavy artillery.

The basic layout

The sample

Markup

<form action="#" method="post">
	<div class="requiredField">
		Required field
	</div>
	<div class="formGroup">
		<div class="formTitle">
			<h3>My Favorite Form Group #1</h3>
		</div>
		<div class="formRow">
			<div class="formLabel">
				Text field:
			</div>
			<div class="formElements">
				<div class="noticeSign">
					&#160;
				</div>
				<div class="formElements-group">
					<input class="textbox-wide" id="text-field" type="text" />
					<script type="text/javascript">document.getElementById('text-field').focus()</script>
					<div class="inputError">
						$!{status.errorMessage}<!-- --><!--When the errorMessage is missing, this empty command collapses the empty div for IE.-->
					</div>
				</div>
			</div>
		</div>
		<div class="formRow">
			<div class="formLabel">
				Text field:
			</div>
			<div class="formElements">
				<div class="noticeSign">
					&#160;
				</div>
				<div class="formElements-group">
					<input class="textbox-wide" type="text" />
					<div class="inputError">
						$!{status.errorMessage}<!-- -->
					</div>
					<p>A paragraph with some lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p>
				</div>
			</div>
		</div>
		<div class="formRow">
			<div class="formLabel">
				Choose an option:
			</div>
			<div class="formElements">
				<div class="formElements-group">
					<select class="selectbox-wide">
						<option value="-1">Option -1</option>
						<option value="1">Option 1</option>
						<option value="2">Option 2</option>
					</select>
				</div>
			</div>
		</div>
		<div class="formRow">
			<div class="formLabel">
				Small options
			</div>
			First
			<select class="smallOptions-first">
				<option selected="selected" value="">First 0</option>
				<option value="First 1">First 1</option>
				<option value="First 2">First 2</option>
			</select>
			Second small option
			<select class="smallOptions-second">
				<option value="">Second</option>
				<option selected="selected" value="a">Second 1</option>
				<option value="b">Second 2</option>
				<option value="c">Second 3</option>
			</select>
		</div>
	</div>
	<div class="formGroup">
		<div class="formTitle">
			<h3>My Favorite Form Group #2</h3>
		</div>
		<div class="formRow">
			<div class="formLabel">
				Write something:
			</div>
			<div class="formElements">
				<div class="formElements-group">
				<textarea class='textarea-narrow' cols="65" rows="10">Write here...</textarea>
				</div>
			</div>
		</div>
		<div class="formRow">
			<div class="formLabel">
				&#160;
			</div>
			<div class="formElements">
				<input id="tickBox" type="checkbox" />
				<label for="tickBox">Tick a box. Or click on the text here.</label>
			</div>
		</div>
	</div>
	<div class="buttonRow">
		<input class="buttonStandard" type="submit" value="Submit" />
		<button id="cancelButton" class="buttonLight distance-left">Cancel</button>
	</div>
</form>

CSS

/*FORM*/
.formGroup{
	background:#eee;
	float:left;
	margin-bottom:44px;
	padding:20px 10px 0 10px;
	width:590px;
}
.requiredField{
	background:url(icon-notice.png) right center no-repeat;
	float:left;
	font-size:12px;
	font-style:italic;
	margin-bottom:22px;
	padding-right:30px;
	text-align:right;
	width:570px;
}
.formTitle{
	float:left;
	width:590px;
}
.formRow{
	float:left;
	padding-bottom:22px;
	width:590px;
}
.formLabel{
	float:left;
	padding-right:10px;
	width:140px;
	word-wrap:break-word;
}
.formElements{
	float:right;
	width:440px;
}
.formElements-group{
	float:left;
	width:415px;
}
.textbox-wide{
	margin-bottom:4px;
	width:410px;
}
.selectbox-wide{
	margin-bottom:4px;
	width:414px;
}
.smallOptions-first{
	margin-right:9px;
	width:155px;
}
.smallOptions-second{
	width:94px;
}
.textarea-wide{
	height:100px;
	overflow:auto;
	width:560px;
}
.textarea-narrow{
	height:100px;
	overflow:auto;
	width:410px;
}
.inputError{
	color:#e45;
	float:left;
	font-weight:bold;
	width:100%;
}
.noticeSign{
	background:url(icon-notice.png) right center no-repeat;
	float:right;
	height:22px;
	width:22px;
}
/*end FORM*/

/*BUTTON*/
.buttonRow{
	float:left;
	width:100%;
}
.buttonStandard{
	background:#c10128 url(/images/button-standard.png) center center repeat-x;
	border:none;
	color:#fff;
	cursor:pointer;
	font-family:verdana;
	font-weight:bold;
	overflow:visible;
	padding:6px 22px;
}
.buttonLight{
	background:transparent;
	border:none;
	color:#c10128;
	cursor:pointer;
	display:table-cell;/*FF*/
	font-family:verdana;
	font-weight:bold;
	padding:6px 0;
	text-decoration:underline;
}
/*end BUTTON*/

2009

Web Development - XHTML CSS JavaScript jQuery.