Skip to content

Instantly share code, notes, and snippets.

@cflove

cflove/form.html

Last active January 20, 2016 22:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save cflove/9137729 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save cflove/9137729 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
form.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/css/bootstrap.min.css">
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/2.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form class="form-horizontal" action="form.cfm" method="post">
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" name="email" id="inputEmail" required placeholder="Email" maxlength="10" autocomplete="off">
</div>
</div>
<div class="control-group">
<label class="control-label">First Name</label>
<div class="controls">
<input type="text" name="firstname" value="John" readonly>
</div>
</div>
<div class="control-group">
<label class="control-label">Last Name</label>
<div class="controls">
<input type="text" name="lastname" value="John" disabled>
</div>
</div>
<div class="control-group">
<label class="control-label">Age</label>
<div class="controls">
<input type="number" name="age" min="10" max="20" step="10">
</div>
</div>
<div class="control-group">
<label class="control-label">Birth Date</label>
<div class="controls">
<input type="date" name="bday">
</div>
</div>
<div class="control-group">
<label class="control-label">Speed</label>
<div class="controls">
<input type="range" name="Speed" min="10" max="20" value="12" step="2">
</div>
</div>
<div class="control-group">
<label class="control-label">Favorite color</label>
<div class="controls">
<input type="color" name="favcolor">
</div>
</div>
<div class="control-group">
<label class="control-label">Image</label>
<div class="controls">
<input type="file" name="img" multiple>
</div>
</div>
<div class="control-group">
<label class="control-label">Country code</label>
<div class="controls">
<input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
</div>
</div>
<div class="control-group">
<label class="control-label">Description</label>
<div class="controls">
<textarea rows="3" name="description"></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that-be sure to include why it's great
</label>
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
</div>
<div class="control-group">
<label class="control-label">What is your browser?</label>
<div class="controls">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</div>
</div>
<div class="control-group">
<label class="control-label">My Options</label>
<div class="controls">
<select name="MyOptions1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<br>
<select multiple="multiple" name="MyOptions2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox">
<input type="checkbox" name="rememberMe"> Remember me
</label>
<button type="submit" class="btn">Sign in</button>
</div>
</div>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment