Created
June 3, 2015 05:44
-
-
Save hughbris/fac29988b11779d350a7 to your computer and use it in GitHub Desktop.
Design pattern: personal details fieldset boilerplate for a form
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>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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment