Created
June 3, 2015 05:17
-
-
Save hughbris/aa9c0d75132f023bba3b to your computer and use it in GitHub Desktop.
Design pattern: hints for forms
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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>You need help</title> | |
<style type="text/css"> | |
/* <![CDATA[ */ | |
.hint { | |
font-style: italic; | |
color: #3c3; | |
} | |
.hint.form { | |
font-size: smaller; | |
} | |
.hint.form.before { | |
text-align: right; | |
} | |
.hint.fieldset { | |
font-weight: bolder; | |
} | |
/* TBC: .hint.field */ | |
/* ]]> */ | |
</style> | |
</head> | |
<body> | |
<form action="" method="POST"> | |
<p class="hint form before">All fields are required on this form</p> <!-- hint applies to the whole form and comes before --> | |
<fieldset> | |
<legend>Phoenix</legend> | |
<p class="hint fieldset">Choose the option in the fieldset that speaks to you most.</p> <!-- hint applies to the fieldset --> | |
<!-- {controls} --> | |
</fieldset> | |
</form> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment