hughbris/form-elaboratedradios.html

## form-elaboratedradios.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>What will it be? You must choose</title>

	<style type="text/css">
		/* <![CDATA[ */
			.field.radios.logos input {
				position: relative;
				top: 1em;
				margin: 0.5em;
			}

			.field.radios.logos .option {
				width: 45%;
				text-align: center;
				display: inline-block;
				padding: 1em;
				vertical-align: top;
			}

			.field.radios.logos label {
				width: 100%;
			}

			.field.radios.logos label .blurb {
				text-align: justify;
				font-weight: normal;
			}
		/* ]]> */
	</style>

</head>
<body>

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

		<fieldset>
			<legend>Select an option if you dare</legend>
			<!-- <p class="hint fieldset"> *** See https://gist.github.com/hughbris/aa9c0d75132f023bba3b for pattern and CSS *** </p> -->
			<div class="field radios logos required">
				<div class="option">
					<input name="radioOption" id="radioA" value="valueA" type="radio" />
					<label for="radioA">
						<h3><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_repo.png" alt="ElaborationTitleA: the cosy box"></h3>
						<p class="blurb">This is the obvious choice for obvious reasons. Obviously. We hold it self-evident. Some things don't need to be explained because they are so obvious, and yet we feel the need to fill the paragraph with words. We call these filler words (obviously).</p>
					</label>
				</div>
				<div class="option">
					<input checked="checked" name="radioOption" id="radioB" value="valueB" type="radio" />
					<label for="radioB">
						<h3><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_fork.png" alt="ElaborationTitleB: the forks"></h3>
						<p class="blurb">If you have rocks in your head, choose this one. Why? Because no-one really does this. You might think you are being "individual", "random", or making some sort of statement against humanity, but really have these peanuts and lie down with a towel between your legs.</p>
					</label>
				</div>
			</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>What will it be? You must choose</title>

	<style type="text/css">
	/* <![CDATA[ */
	.field.radios.logos input {
	position: relative;
	top: 1em;
	margin: 0.5em;
	}

	.field.radios.logos .option {
	width: 45%;
	text-align: center;
	display: inline-block;
	padding: 1em;
	vertical-align: top;
	}

	.field.radios.logos label {
	width: 100%;
	}

	.field.radios.logos label .blurb {
	text-align: justify;
	font-weight: normal;
	}
	/* ]]> */
	</style>

	</head>
	<body>

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

	<fieldset>
	<legend>Select an option if you dare</legend>
	<!-- <p class="hint fieldset"> * See https://gist.github.com/hughbris/aa9c0d75132f023bba3b for pattern and CSS * </p> -->
	<div class="field radios logos required">
	<div class="option">
	<input name="radioOption" id="radioA" value="valueA" type="radio" />
	<label for="radioA">
	<h3><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_repo.png" alt="ElaborationTitleA: the cosy box"></h3>
	<p class="blurb">This is the obvious choice for obvious reasons. Obviously. We hold it self-evident. Some things don't need to be explained because they are so obvious, and yet we feel the need to fill the paragraph with words. We call these filler words (obviously).</p>
	</label>
	</div>
	<div class="option">
	<input checked="checked" name="radioOption" id="radioB" value="valueB" type="radio" />
	<label for="radioB">
	<h3><img src="https://assets-cdn.github.com/images/modules/dashboard/bootcamp/octocat_fork.png" alt="ElaborationTitleB: the forks"></h3>
	<p class="blurb">If you have rocks in your head, choose this one. Why? Because no-one really does this. You might think you are being "individual", "random", or making some sort of statement against humanity, but really have these peanuts and lie down with a towel between your legs.</p>
	</label>
	</div>
	</div>
	</fieldset>

	</form>

	</body>
	</html>