Cara desain form dengan Bootstrap

Pada kesempatan kali ini saya akan sedikit berbagi cara membuat desain form register dengan Bootstrap. Untuk membuat form dengan bootstrap Ada tiga jenis desain layout form yang dapat dibuat dengan bootstrap, yaitu vertical form (basic / default), inline form dan horizontal form.

1. Vertical Form

Untuk form vertical kita hanya perlu menambahkan code <form role="form"></form>

contoh:

<form role="form">
      <div class="form-group">
           <label for="username">Username</label>
           <input type="text" id="username"  class="form-control" placeholder="Masukkan username">
</div>
<div class="form-group"><label for="password">Password</label><input type="password" id="password"  class="form-control" placeholder="Masukkan password">
</div><button type="submit" class="btn btn-default">Login</button></form>

hasil Vertical Form:

Username Password

2. Horizontal Form

Untuk form Horizontal kita hanya perlu menambahkan code <form role="form" class="form-horizontal"></form>

contoh

<form role="form" class="form-horizontal">
      <div class="form-group">
           <label for="username">Username</label>
           <input type="text" id="username"  class="form-control" placeholder="Masukkan username">
</div>
<div class="form-group"><label for="password">Password</label><input type="password" id="password"  class="form-control" placeholder="Masukkan password">
</div><button type="submit" class="btn btn-default">Login</button></form>

hasil:

Username

Password

3. Inline Form

Untuk form Horizontal kita hanya perlu menambahkan code <form role="form" class="form-inline"></form>

contoh

<form role="form" class="form-inline">
      <div class="form-group">
           <label for="username">Username</label>
           <input type="text" id="username"  class="form-control" placeholder="Masukkan username">
</div>
<div class="form-group"><label for="password">Password</label><input type="password" id="password"  class="form-control" placeholder="Masukkan password">

</div><button type="submit" class="btn btn-default">Login</button></form>

hasil:

Username 

Password