Belajar Bootstrap #2 Komponen Form

Bootstrap mempunyai banyak komponen yang dapat digunakan untuk memperkaya fitur website anda, salah satunya adalah form, yuk kita belajar bootstrap form.

Bootstrap mempunyai banyak komponen yang dapat digunakan untuk memperkaya fitur website anda, salah satunya adalah form, yuk kita belajar bootstrap form.

Belajar Komponen Form Pada Bootstrap

Untuk langkah pertama adalah silahkan tuliskan code berikut diantara tag head, yang mana berfungsi sebagai include file library dari bootstrap tersebut.

<html>
<head>
<title>....</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>
...

Agar bootstrapnya jalan, maka untuk menjalankan harus terkoneksi dengan internet, karena lokasi file nya terletak pada server.

Anda juga bisa menjalankannya tanpa koneksi internet, tetapi harus mendownload library nya terlebih dahulu, seperti berikut.

Anda harus copykan semua scriptnya dan buat file baru dengan nama bootstrap.min.css , lalu pastekan kedalam file tersebut. Lakukan hal tersebut juga pada jquery.min.js dan bootstrap.min.js. Jangan lupa filenya taruh pada project yang sudah anda buat.

Baca Juga : Apa Itu Bootstrap

Contohnya seperti berikut.

<html>
<head>
<title>....</title>

<link rel="stylesheet" href="css/bootstrap.min.css">
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>

</head>
...

Yang berarti file tersebut telah di simpan didalam folder css dan js.

Struktur penempatan file bootstrap
Struktur penempatan file bootstrap

atau anda bisa mendownloadnya disini

Setelah include library bootstrap selesai maka anda bisa menuliskan beberapa coding berikut, dan letakan di antara tag body.

Vertical Basic Form

<form>
    <div class="form-group">
      <label for="email">Email:</label>
      <input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
    </div>
    <div class="form-group">
      <label for="pwd">Password:</label>
      <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
    </div>
    <div class="checkbox">
      <label><input type="checkbox" name="remember"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-default">Submit</button>
  </form>

Hasil :

Vertical Basic Form adalah bagaimana membuat form dengan susunan yang normal seperti judul teks selanjutnya dibawahnya ada inputan, seperti itu dan diakhiri dengan tombol submit

Bootstrap Inline Form

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

Hasil :

Bootstrap Inline Form adalah penggunaan form yang menampilkan pada satu garis (inline), biasanya format seperti ini banyak digunakan pada form search / pencarian.

Bootstrap Horizontal Form

<form class="form-horizontal">
  <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="Enter 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="Enter 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>

Hasil :

Bootstrap Horizontal Form adalah menampilkan form inputan dalam susunan ke samping, seperti judul inputan lalu di sebelahnya terdapat inputan teks atau sejenisnya.

Berikut adalah contoh penulisan coding dari komponen Form, yakni komponen yang ada pada framework bootstrap.

Default image
Muhammad Bakhtiar
Leave a Reply