Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
508 lines (465 sloc) 21.2 KB
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="author" content="/humans.txt">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.css">
<style>
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="js/libs/modernizr-2.5.3-respond-1.1.0.min.js"></script>
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">Forms demo</a>
</div>
</div>
</div>
<div class="container">
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">
<a data-toggle="tab" href="#layout-horizontal">
<i class="icon-list"></i> Horizontal
</a>
</li>
<li class="">
<a data-toggle="tab" href="#layout-vertical">
<i class="icon-align-left"></i> Vertical
</a>
</li>
<li class="">
<a data-toggle="tab" href="#layout-columns">
<i class="icon-barcode"></i> Columns
</a>
</li>
</ul>
<div class="tab-content">
<div id="layout-horizontal" class="tab-pane active">
<form id="lh-form" class="well form-horizontal" method="post">
<div class="control-group">
<label class="control-label" for="lh-first-name"><i class="icon-user"></i> First name</label>
<div class="controls">
<input id="lh-first-name" name="first-name" type="text" placeholder="Eg. John" title="Please type your first name.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-last-name"><i class="icon-user"></i> Last name</label>
<div class="controls">
<input id="lh-last-name" name="last-name" type="text" placeholder="Eg. Doe" title="Please type your last name.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-job-title"><i class="icon-tag"></i> Job title</label>
<div class="controls">
<input id="lh-job-title" name="job-title" type="text" placeholder="Eg. CEO" title="Please type your designation.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-company-name"><i class="icon-briefcase"></i> Company name</label>
<div class="controls">
<input id="lh-company-name" name="company-name" type="text" placeholder="Eg. Acme Corp." title="Please type the name of the company where you work." />
<span class="help-inline"></span>
<span class="help-block">This will help us track our partners.</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-email"><i class="icon-envelope"></i> Email</label>
<div class="controls">
<input id="lh-email" name="email" type="text" placeholder="Eg. john.doe@acmecorp.com" title="Please type your coroprate email address." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-phone"><i class="icon-headphones"></i> Phone</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">+</span><input id="lh-phone" name="phone" type="text" placeholder="Eg. 123-555-789" title="Please type your work phone number." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-website"><i class="icon-globe"></i> Website</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">http://</span><input id="lh-website" name="website" type="text" placeholder="Eg. www.acmecorp.com" title="Please type your corporate website URL." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-country"><i class="icon-plane"></i> Country</label>
<div class="controls">
<select id="lh-country" name="country" title="Please select your country of residence.">
<option>United States</option>
<option>India</option>
<option>United Kingdom</option>
<option>Germany</option>
</select>
<span class="help-inline"></span>
<span class="help-block">We have global customer support.</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-state"><i class="icon-plane"></i> State</label>
<div class="controls">
<select id="lh-state" name="state" title="Please select your state.">
<option>California</option>
<option>Florida</option>
<option>Texas</option>
</select>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lh-zipcode"><i class="icon-qrcode"></i> Zipcode</label>
<div class="controls">
<input id="lh-zipcode" name="zipcode" type="text" placeholder="Eg. 12345" title="Please type your postal ZIP code." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" class="checkbox" for="lh-newsletter"><i class="icon-film"></i> Newsletter subscription</label>
<div class="controls">
<input id="lh-newsletter" name="newsletter" type="checkbox" title="Please check if you'd like to receive our monthly newsletter." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
<div class="control-group">
<label class="control-label" for="lh-comments"><i class="icon-comment"></i> Comments</label>
<div class="controls">
<textarea id="lh-comments" name="comments" rows="" cols="" placeholder="" title="Please type any comments that you may like to add."></textarea>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="form-actions">
<button type="reset" class="btn"><i class="icon-remove"></i> Clear</button>
<button type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Submit</button>
</div>
</form>
</div>
<div id="layout-vertical" class="tab-pane">
<form id="lv-form" class="well" method="post">
<div class="control-group">
<label class="control-label" for="lv-first-name"><i class="icon-user"></i> First name</label>
<div class="controls">
<input id="lv-first-name" name="first-name" type="text" placeholder="Eg. John" title="Please type your first name.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-last-name"><i class="icon-user"></i> Last name</label>
<div class="controls">
<input id="lv-last-name" name="last-name" type="text" placeholder="Eg. Doe" title="Please type your last name.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-job-title"><i class="icon-tag"></i> Job title</label>
<div class="controls">
<input id="lv-job-title" name="job-title" type="text" placeholder="Eg. CEO" title="Please type your designation.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-company-name"><i class="icon-briefcase"></i> Company name</label>
<div class="controls">
<input id="lv-company-name" name="company-name" type="text" placeholder="Eg. Acme Corp." title="Please type the name of the company where you work." />
<span class="help-inline"></span>
<span class="help-block">This will help us track our partners.</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-email"><i class="icon-envelope"></i> Email</label>
<div class="controls">
<input id="lv-email" name="email" type="text" placeholder="Eg. john.doe@acmecorp.com" title="Please type your coroprate email address." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-phone"><i class="icon-headphones"></i> Phone</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">+</span><input id="lv-phone" name="phone" type="text" placeholder="Eg. 123-555-789" title="Please type your work phone number." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-website"><i class="icon-globe"></i> Website</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">http://</span><input id="lv-website" name="website" type="text" placeholder="Eg. www.acmecorp.com" title="Please type your corporate website URL." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-country"><i class="icon-plane"></i> Country</label>
<div class="controls">
<select id="lv-country" name="country" title="Please select your country of residence.">
<option>United States</option>
<option>India</option>
<option>United Kingdom</option>
<option>Germany</option>
</select>
<span class="help-inline"></span>
<span class="help-block">We have global customer support.</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-state"><i class="icon-plane"></i> State</label>
<div class="controls">
<select id="lv-state" name="state" title="Please select your state.">
<option>California</option>
<option>Florida</option>
<option>Texas</option>
</select>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-zipcode"><i class="icon-qrcode"></i> Zipcode</label>
<div class="controls">
<input id="lv-zipcode" name="zipcode" type="text" placeholder="Eg. 12345" title="Please type your postal ZIP code." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" class="checkbox" for="lv-newsletter"><i class="icon-film"></i> Newsletter subscription</label>
<div class="controls">
<input id="lv-newsletter" name="newsletter" type="checkbox" title="Please check if you'd like to receive our monthly newsletter." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="lv-comments"><i class="icon-comment"></i> Comments</label>
<div class="controls">
<div class="input-prepend">
<textarea id="lv-comments" name="comments" rows="" cols="" placeholder="" title="Please type any comments that you may like to add."></textarea>
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
<div class="form-actions">
<button type="reset" class="btn"><i class="icon-remove"></i> Clear</button>
<button type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Submit</button>
</div>
</form>
</div>
<div id="layout-columns" class="tab-pane">
<form id="lc-form" class="well" method="post">
<div class="row-fluid">
<div class="span4">
<div class="control-group">
<label class="control-label" for="lc-first-name"><i class="icon-user"></i> First name</label>
<div class="controls">
<input id="lc-first-name" name="first-name" type="text" placeholder="Eg. John" title="Please type your first name.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="lc-last-name"><i class="icon-user"></i> Last name</label>
<div class="controls">
<input id="lc-last-name" name="last-name" type="text" placeholder="Eg. Doe" title="Please type your last name.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="control-group">
<label class="control-label" for="lc-job-title"><i class="icon-tag"></i> Job title</label>
<div class="controls">
<input id="lc-job-title" name="job-title" type="text" placeholder="Eg. CEO" title="Please type your designation.">
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="lc-company-name"><i class="icon-briefcase"></i> Company name</label>
<div class="controls">
<input id="lc-company-name" name="company-name" type="text" placeholder="Eg. Acme Corp." title="Please type the name of the company where you work." />
<span class="help-inline"></span>
<span class="help-block">This will help us track our partners.</span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="control-group">
<label class="control-label" for="lc-email"><i class="icon-envelope"></i> Email</label>
<div class="controls">
<input id="lc-email" name="email" type="text" placeholder="Eg. john.doe@acmecorp.com" title="Please type your coroprate email address." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="lv-phone"><i class="icon-headphones"></i> Phone</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">+</span><input id="phone" name="phone" type="text" placeholder="Eg. 123-555-789" title="Please type your work phone number." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="lv-website"><i class="icon-globe"></i> Website</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">http://</span><input id="lv-website" name="website" type="text" placeholder="Eg. www.acmecorp.com" title="Please type your corporate website URL." />
</div>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="control-group">
<label class="control-label" for="lv-country"><i class="icon-plane"></i> Country</label>
<div class="controls">
<select id="lv-country" name="country" title="Please select your country of residence.">
<option>United States</option>
<option>India</option>
<option>United Kingdom</option>
<option>Germany</option>
</select>
<span class="help-inline"></span>
<span class="help-block">We have global customer support.</span>
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="lv-state"><i class="icon-plane"></i> State</label>
<div class="controls">
<select id="lv-state" name="state" title="Please select your state.">
<option>California</option>
<option>Florida</option>
<option>Texas</option>
</select>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
<div class="span4">
<div class="control-group">
<label class="control-label" for="lv-zipcode"><i class="icon-qrcode"></i> Zipcode</label>
<div class="controls">
<input id="lv-zipcode" name="zipcode" type="text" placeholder="Eg. 12345" title="Please type your postal ZIP code." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<div class="control-group">
<label class="control-label" class="checkbox" for="lv-newsletter"><i class="icon-film"></i> Newsletter subscription</label>
<div class="controls">
<input id="lv-newsletter" name="newsletter" type="checkbox" title="Please check if you'd like to receive our monthly newsletter." />
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
<div class="span8">
<div class="control-group">
<label class="control-label" for="lv-comments"><i class="icon-comment"></i> Comments</label>
<div class="controls">
<textarea id="lv-comments" name="comments" rows="" cols="" placeholder="" title="Please type any comments that you may like to add."></textarea>
<span class="help-inline"></span>
<span class="help-block"></span>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="form-actions">
<button type="reset" class="btn"><i class="icon-remove"></i> Clear</button>
<button type="submit" class="btn btn-primary"><i class="icon-white icon-ok"></i> Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /container -->
<script src="js/libs/jquery-1.7.2.min.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script src="js/libs/bootstrap/bootstrap.min.js"></script>
<script src="js/libs/bootstrap/tab.js"></script>
<script src="js/libs/bootstrap/tooltip.js"></script>
<script src="js/libs/jquery.validate.min.js"></script>
<script src="js/script.js"></script>
<!-- end scripts-->
</body>
</html>