Skip to content

Instantly share code, notes, and snippets.

@hughbris

hughbris/formhints.html

Created June 3, 2015 05:17
Show Gist options
  • Save hughbris/aa9c0d75132f023bba3b to your computer and use it in GitHub Desktop.
Save hughbris/aa9c0d75132f023bba3b to your computer and use it in GitHub Desktop.
Download ZIP
Design pattern: hints for forms
Raw
formhints.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>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