Tutorial Termudah Membuat form Menggunakan Bootstrap

Form merupakan hal yang tidak asing bahkan dapat dijumpai diseluruh website, maka itu agar lebih mudah dan tentunya responsive, saat ini akan membahas Membuat form Menggunakan Bootstrap.

Form pada Bootstrap telah difasilitasi dengan beberapa properti, maka akan terlihat bagus dengan sendiri. Elemen pada form meliputi <input>, <textarea>, dan <select> dengan class .form-control dengan memiliki lebar 100% fit sesuai lebar kolom.

Bootstrap memiliki beberapa bentuk form yang meliputi...

1. Vertical Form
2. Horizontal Form
3. Inline Form

Pada pembuatan form gunakanlah role="form" untuk memudahkan sekaligus meningkatkan pembaca dilayar, kemudian class .form-group untuk mengoptimalkan jarak antara form, dan class .form-control untuk elemen-elemen textual.

Contoh Form Vertikal

Email

Password

Ingatkan saya

 

Kode HTML

<form role="form">
  <div class="form-group">
     <label for="email">Email</label>
     <input type="text" class="form-control"/>
  </div>
  <div class="form-group">
     <label for="password">Password</label>
     <input type="password" class="form-control"/>
  </div>
  <div class="checkbox">
     <label>
        <input type="checkbox"/> Ingatkan saya
     </label>
  </div>
  <button type="button" class="btn btn-success">Login</button>
</form>

Selanjutnya akan membuat form horizontal, untuk membuat form horizantal diperlukan class .form-horizontal pada elemen <form>, kemudian class .control-label pada elemen <label>.

Contoh Form Horizontal 

Email

Password

Ingatkan saya

 

Kode HTML

<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="text" class="form-control"/>
      </div>
   </div>
   <div class="form-group">
       <label class="control-label col-sm-2" for="password">Password</label>
     <div class="col-sm-10">
       <input type="password" class="form-control"/>
     </div>
   </div>
<div class="form-group">
  <div class="col-sm-offset-2 col-sm-10">
       <div class="checkbox">
         <label>
           <input type="checkbox"/> Ingatkan saya
         </label>
       </div>
     </div>
</div>
<div class="form-group">
     <div class="col-sm-offset-2 col-sm-10">
       <button type="button" class="btn btn-success">Login</button>
     </div>
</div>
</form>

Selanjutnya akan membuat form inline, untuk membuat form inline dibutuhkan class .form-inline pada elemen <form>.

Contoh Form Inline

Email

Password

Ingatkan saya

 

Kode HTML

<form class="form-inline" role="form">
   <div class="form-group">
     <label for="email">Email</label>
     <input type="text" class="form-control"/>
   </div>
   <div class="form-group">
     <label for="password">Password</label>
     <input type="password" class="form-control"/>
   </div>
   <div class="checkbox">
     <label>
        <input type="checkbox"/> Ingatkan saya
     </label>
   </div>
   <button type="button" class="btn btn-success">Login</button>
</form>

Semoga dapat membantu kita semuanya....