Skip to content

Instantly share code, notes, and snippets.

@myaumyau

myaumyau/minimal-markup-sample-form.html

Created September 25, 2012 03:10
Show Gist options
  • Save myaumyau/3779763 to your computer and use it in GitHub Desktop.
Save myaumyau/3779763 to your computer and use it in GitHub Desktop.
Download ZIP
[HTML]Minimal Markup Sample Form
Raw
minimal-markup-sample-form.html
<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