hughbris/form-personfields.html

## form-personfields.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ">  <!-- bru -->
<head>
	<title>Gotta sign up</title>

	<style type="text/css">
		/* <![CDATA[ */
			fieldset {
				border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
				padding: 0 2em 2em;
				margin-bottom: 1em;
			}

			legend {
				font-size: larger;
				margin-left: 5%;
				padding: 0 1em;
				font-weight: bolder;
			}

			.field {
				margin: 1em 0;
			}

			label {
				font-weight: bolder;
			}

			.field label {
				width: 20%;
				display: inline-block;
				vertical-align: middle;
			}

			.field.checkbox label {
				width: auto;
				font-weight: normal;
				font-style: italic;
			}

			.field.checkbox.selected label {
				font-style: normal; /* TODO: javascript to add class */
			}

			.field input {
				width: 65%;
			}

			.field.short input, .field textarea {
				width: 30%;
			}

			.field.mid input {
				width: 50%;
			}

			.field.checkbox input {
				width: auto;
				margin-left: 21%;
				margin-right: 0.5em;
				vertical-align: middle;
			}
			.control.address {
				height: 5em;
			}
		/* ]]> */
	</style>

</head>
<body>

	<form action="" method="POST">

		<fieldset>
			<legend>About you</legend>
			<div class="field input mid required">
				<label for="name">Name:</label>
				<input name="name" id="name" type="text" />
			</div>
			<div class="field textarea required">
				<label for="txtAddress">Address:</label>
				<textarea name="address" id="address" class="address control"></textarea>
			</div>
			<div class="field input short required">
				<label for="phone">Phone:</label>
				<input name="phone" id="phone" type="text" class="phone control" />
			</div>
			<div class="field input mid required">
				<label for="email">Email:</label>
				<input name="email" id="email" class="email control" type="text" />
			</div>
			<div class="field checkbox">
				<input name="spamMe" id="spamMe" type="checkbox" />
				<label for="spamMe">Please fill my mailbox with crap about your thing</label>
			</div>
		</fieldset>

	</form>

</body>
</html>
	<?xml version="1.0" encoding="utf-8" ?>
	<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
	>
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-NZ" lang="en-NZ"> <!-- bru -->
	<head>
	<title>Gotta sign up</title>

	<style type="text/css">
	/* <![CDATA[ */
	fieldset {
	border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
	padding: 0 2em 2em;
	margin-bottom: 1em;
	}

	legend {
	font-size: larger;
	margin-left: 5%;
	padding: 0 1em;
	font-weight: bolder;
	}

	.field {
	margin: 1em 0;
	}

	label {
	font-weight: bolder;
	}

	.field label {
	width: 20%;
	display: inline-block;
	vertical-align: middle;
	}

	.field.checkbox label {
	width: auto;
	font-weight: normal;
	font-style: italic;
	}

	.field.checkbox.selected label {
	font-style: normal; /* TODO: javascript to add class */
	}

	.field input {
	width: 65%;
	}

	.field.short input, .field textarea {
	width: 30%;
	}

	.field.mid input {
	width: 50%;
	}

	.field.checkbox input {
	width: auto;
	margin-left: 21%;
	margin-right: 0.5em;
	vertical-align: middle;
	}
	.control.address {
	height: 5em;
	}
	/* ]]> */
	</style>

	</head>
	<body>

	<form action="" method="POST">

	<fieldset>
	<legend>About you</legend>
	<div class="field input mid required">
	<label for="name">Name:</label>
	<input name="name" id="name" type="text" />
	</div>
	<div class="field textarea required">
	<label for="txtAddress">Address:</label>
	<textarea name="address" id="address" class="address control"></textarea>
	</div>
	<div class="field input short required">
	<label for="phone">Phone:</label>
	<input name="phone" id="phone" type="text" class="phone control" />
	</div>
	<div class="field input mid required">
	<label for="email">Email:</label>
	<input name="email" id="email" class="email control" type="text" />
	</div>
	<div class="field checkbox">
	<input name="spamMe" id="spamMe" type="checkbox" />
	<label for="spamMe">Please fill my mailbox with crap about your thing</label>
	</div>
	</fieldset>

	</form>

	</body>
	</html>