Created
September 25, 2012 03:10
-
-
Save myaumyau/3779763 to your computer and use it in GitHub Desktop.
[HTML]Minimal Markup Sample Form
This file contains hidden or 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
<html> | |
<head> | |
<style type="text/css"> | |
/* | |
* http: //bullfrogsweatshop.com/minimal-markup-sample-form.html | |
*/ | |
/* Container Styles | |
=============================================================================*/ | |
form { | |
color: #333; | |
width: 640px; | |
margin: 0 auto; | |
border: 1px solid #CCC; | |
padding: 20px; | |
background: #EEE; | |
} | |
fieldset { | |
border: 0; | |
border-bottom: 1px solid #CCC; | |
margin: 0 0 20px; | |
padding: 0 0 20px; | |
} | |
legend { | |
display: none; | |
} | |
/* Input Styles | |
=============================================================================*/ | |
input { | |
color: #666; | |
background: #FCFCFC; | |
} | |
input[type="checkbox"], | |
input[type="radio"] { | |
vertical-align: middle; | |
display: inline-block; | |
margin: -4px 0 0; | |
} | |
input[type="text"] { | |
vertical-align: middle; | |
display: inline-block; | |
width: 250px; | |
padding: 8px 8px; | |
border-radius: 3px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
-o-border-radius: 3px; | |
border: 1px solid #999; | |
} | |
input[type="text"]: focus { | |
background: #FFF; | |
color: #333; | |
border: 1px solid #333; | |
} | |
textarea { | |
width: 640px; | |
height: 150px; | |
border-radius: 3px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
-o-border-radius: 3px; | |
border: 1px solid #999; | |
} | |
select { | |
min-width: 150px; | |
border-radius: 3px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
-o-border-radius: 3px; | |
border: 1px solid #999; | |
} | |
/* Label Styles | |
=============================================================================*/ | |
label { | |
display: inline-block; | |
font-size: 14px; | |
line-height: 22px; | |
margin: 0 0 20px; | |
width: 200px; | |
} | |
label.checkbox, | |
label.radio { | |
margin: 0 0 0 5px; | |
width: auto; | |
line-height: 22px; | |
} | |
label.textarea { | |
display: block; | |
} | |
/* Helper Styles | |
=============================================================================*/ | |
.last { | |
margin-bottom: 0; | |
} | |
/* Button Styles | |
=============================================================================*/ | |
input[type="button"], | |
input[type="submit"], | |
input[type="reset"] { | |
padding: 5px 22px; | |
font-size: 14px; | |
height: 40px; | |
color: #333; | |
font-weight: bold; | |
border-radius: 3px; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
-o-border-radius: 3px; | |
border: 1px solid #999; | |
background: #CCC; | |
} | |
input[type="button"]: hover, | |
input[type="submit"]: hover, | |
input[type="reset"]: hover { | |
background: #EEE; | |
border: 1px solid #333; | |
color: #333; | |
} | |
</style> | |
</head> | |
<body> | |
<form> | |
<fieldset> | |
<legend>Sample Text Fields</legend> | |
<label for="text1">Sample text Field</label> | |
<input type="text" name="text1" id="text1" /> | |
<br /> | |
<label for="text2" class="last" >Sample text Field with default text</label> | |
<input type="text" name="text2" id="text2" value="Your name" /> | |
</fieldset> | |
<fieldset> | |
<legend>Sample Selects (drop downs)</legend> | |
<label for="select1" >Sample select</label> | |
<select id="select 1" name="select1"> | |
<option value="1">1</option> | |
<option value="2">2</option> | |
<option value="3">3</option> | |
</select> | |
<br /> | |
<label for="select2" class="last">Sample select with a wordy option</label> | |
<select id="select2" name="select2"> | |
<option value="0">No</option> | |
<option value="1">Yes. but only if you really, really mean it</option> | |
</select> | |
</fieldset> | |
<fieldset> | |
<legend>Sample Textarea</legend> | |
<label for="textarea1" class="textarea">Sample text area</label> | |
<textarea id="textarea1" name="textarea1"></textarea> | |
</fieldset> | |
<fieldset> | |
<legend>Sample Checkboxes</legend> | |
<input type="checkbox" name="checkbox1" id="checkbox1"/> | |
<label for="checkbox1" class="checkbox">Sample checkbox</label> | |
<br /> | |
<input type="checkbox" name="checkbox2" id="checkbox2" checked="checked" /> | |
<label for="checkbox2" class="checkbox">Sample checkbox - checked</label> | |
</fieldset> | |
<fieldset> | |
<legend>Sample Radio Options</legend> | |
<input type="radio" name="radio" id="radio1" /> | |
<label for="radio1" class="radio">Sample Radio option 1</label> | |
<br /> | |
<input type="radio" name="radio" id="radio2" checked="checked" /> | |
<label for="radio2" class="radio">Sample Radio option 2</label> | |
<br /> | |
<input type="radio" name="radio" id="radio3" /> | |
<label for="radio3" class="radio">Sample Radio option 3</label> | |
</fieldset> | |
<fieldset> | |
<legend>Sample buttons</legend> | |
<input type="button" id="button1" value="Button"/> | |
<input type="submit" id="submit1" value="Submit"/> | |
<input type="reset" id="reset1" value="Reset"/> | |
</fieldset> | |
</form> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment