saftutorials.com
Bootstrap Forms

Bootstrap Individual form controls automatically set some global styling. All textual <input>, <textarea>, and <select> elements using with .form-control and it's set to width: 100%; by default. Wrap labels and controls in .form-group for optimum spacing.


Bootstrap Basic Form Example

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<div class="form-group">
<label for="file">File input</label>
<input type="file" id="file">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
 <input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</body>
</html>

Output

Example block-level help text here.


Bootstrap Inline form

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="form-inline"> <div class="form-group"> <label for="name1">Name</label> <input type="text" class="form-control" id="name1" placeholder="Jane Doe"> </div> <div class="form-group"> <label for="email2">Email</label> <input type="email" class="form-control" id="email2" placeholder="jane.doe@example.com"> </div> <button type="submit" class="btn btn-default">Send invitation</button> </form>
</body>
</html>

Output


Bootstrap Horizontal form

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<form class="form-horizontal">
 <div class="form-group">
   <label for="email3" class="col-sm-2 control-label">Email</label>
   <div class="col-sm-10">
     <input type="email" class="form-control" id="email3" placeholder="Email">
   </div>
 </div>
 <div class="form-group">
   <label for="password3" class="col-sm-2 control-label">Password</label>
   <div class="col-sm-10">
     <input type="password" class="form-control" id="password3" placeholder="Password">
   </div>
 </div>
 <div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
     <div class="checkbox">
       <label>
         <input type="checkbox"> Remember me
       </label>
     </div>
   </div>
 </div>
 <div class="form-group">
   <div class="col-sm-offset-2 col-sm-10">
     <button type="submit" class="btn btn-default">Sign in</button>
   </div>
 </div>
</form>
</body>
</html>

Output


Bootstrap Form Supported controls

There are many type supported controls for HTML form element.

Inputs, textarea, select, radio, checkbox, password etc.












Find us on

Facebook Google Plus Twitter Pinterest YouTube

web statistic