Skip to content

Instantly share code, notes, and snippets.

@fahdi

fahdi/responsive-bootstrap-form.html

Created November 16, 2013 19:30
Show Gist options
  • Save fahdi/7504258 to your computer and use it in GitHub Desktop.
Save fahdi/7504258 to your computer and use it in GitHub Desktop.
Download ZIP
Code for responsive form at http://jsfiddle.net/fahdi/mGyXP/show/
Raw
responsive-bootstrap-form.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by fahdi</title>
<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style type='text/css'>
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
});//]]>
</script>
</head>
<body>
<form action="#" method="post">
<fieldset>
<legend>Login Information</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_login">Username</label>
<input class="form-control" id="user_login" name="user[login]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password">Password</label>
<input class="form-control" id="user_password" name="user[password]" size="30" type="password" />
</div>
</div>
<div class='col-sm-6'>
<div class='form-group'>
<label for="user_password_confirmation">Password confirmation</label>
<input class="form-control" id="user_password_confirmation" name="user[password_confirmation]" size="30" type="password" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class='row'>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_title">Title</label>
<input class="form-control" id="user_title" name="user[title]" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_firstname">First name</label>
<input class="form-control" id="user_firstname" name="user[firstname]" required="true" size="30" type="text" />
</div>
</div>
<div class='col-sm-4'>
<div class='form-group'>
<label for="user_lastname">Last name</label>
<input class="form-control" id="user_lastname" name="user[lastname]" required="true" size="30" type="text" />
</div>
</div>
</div>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_email">Email</label>
<input class="form-control required email" id="user_email" name="user[email]" required="true" size="30" type="text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Options</legend>
<div class='row'>
<div class='col-sm-12'>
<div class='form-group'>
<label for="user_locale">Language</label>
<select class="form-control" id="user_locale" name="user[locale]"><option value="de" selected="selected">Deutsch</option>
<option value="en">English</option></select>
</div>
</div>
</div>
</fieldset>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment