Bootstrap Forms

Bootstrap's Default Settings

Bentuk Disini kontrol otomatis menerima beberapa style global dengan Bootstrap:
Semua tekstual <input>, <textarea>, dan <select> elemen dengan class .form-control memiliki lebar 100%.

Bootstrap Form Layouts

• Vertical form (ini default)
• Horizontal form
• Inline form

Aturan standar untuk semua 3 form layout :

• Selalu gunakan <form role = "form"> (membantu meningkatkan aksesibilitas untuk orang yang menggunakan pembaca layar) .
• Bungkus label dan bentuk kontrol dalam <div class = "form-group"> (diperlukan untuk jarak optimal).
•  Menambahkan kelas .form-control untuk semua tekstual <input>, <textarea>, dan <select> elemen

Bootstrap Vertical Form (default)

Bootstrap Inline Form

•      Menambahkan class .form-inline ke <form> elemen

  <h2>Inline form</h2>
  <form class="form-inline" role="form">
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Masukan email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Masukan password">
    </div>
    <div class="checkbox">
      <label><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

Bootstrap Horizontal Form

 <h2>Horizontal form</h2>
  <form class="form-horizontal" role="form">
    <div class="form-group">
      <label class="control-label col-sm-2" for="email">Email:</label>
      <div class="col-sm-10">
        <input type="email" class="form-control" id="email" placeholder="Masukan email">
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="pwd">Password:</label>
      <div class="col-sm-10">        
        <input type="password" class="form-control" id="pwd" placeholder="Masukan 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">Submit</button>
      </div>
    </div>
  </form>