Home / Bootstrap / Tutorial Bootstrap Bagian 4: Merancang Form dengan Bootstrap

Tutorial Bootstrap Bagian 4: Merancang Form dengan Bootstrap

Merancang Form dengan BootstrapTutorial bootstrap kali ini, kita akan membahas mengenai cara merancang form dengan bootstrap. Dalam sebuah website, form biasa digunakan untuk menginput data yang di isikan oleh pengunjung ataupun pengelola website. Elemen-elemen form yang sering di gunakan dapat terdiri dari Textbox, Combobox, Textarea, Checkbox, Button, dll disesuaikan dengan kebutuhan.

Tidak jauh berbeda dengan tutorial sebelumnya mengenai cara membuat tabel di bootstrap, untuk merancang form kita juga tinggal memanggil class-class yang sudah tersedia. Bootstrap menyediakan tiga jenis class utama dan yang umum digunakan untuk pengaturan layout sebuah form, yaitu:

  • Default
    Class default maksutnya, tidak menyertakan class yang ada di bootstrap hanya tag <form> saja, walaupun begitu untuk elemen-elemen inputan form seperti textbox, button, dll dapat di sertakan class-class bootstrap. Layoutnya seperti form standard, label di sebelah atas kemudian inputan di bawahnya.
  • .form-inline
    Class form-inline digunakan untuk membuat layout form yang semua label dan inputan form sejajar/sebaris.
  • .form-horizontal
    Class form-horizontal digunakan untuk membuat layout form yang setiap elemen inputan sejajar dengan labelnya.

Penggunaan setiap elemen inputan pada form harus di tempatkan dalam class form-group. Ukuran lebar form dalam bootstrap akan otomatis 100% atau menyesuaikan dengan lebar kolom yang kita sediakan. Untuk pengaturan lebar kolom bootstrap dapat di baca di tutorial sebelumnya mengenai Penggunaan Grid System pada Bootstrap.

Untuk lebih jelasnya tentang cara merancang form menggunakan bootstrap, silakan lihat pada kode dibawah yang merupakan sebuah contoh penggunaan class-class bootstrap dalam sebuah form.

<!DOCTYPE html>
<html>
  <head>
    <title>Merancang Inputan form dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <form action="?" method="post">
                  <div class="form-group">
                    <label for="nim">NIM</label>
                    <input type="text" class="form-control" name="nim" placeholder="Isikan NIM">
                  </div>
                  <div class="form-group">
                    <label for="nama">Nama</label>
                    <input type="text" class="form-control" name="nama" placeholder="Isikan Nama Lengkap">
                  </div>
                  <div class="form-group">
                    <label for="alamat">Alamat</label>
                    <textarea name="alamat"class="form-control" placeholder="Isikan Alamat Lengkap"></textarea>
                  </div>
                  <button type="submit" class="btn btn-info">Simpan</button>
                  <button type="reset" class="btn btn-info">Batal</button>
                </form>
                </div>
            </div>
        </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Pada baris 5, kita panggil Css Bootstrap. Sama halnya dengan baris 30 dan 31 kita menyertakan JQuery dan javascript bootstrap. Jadi, setiap menggunakan bootstrap kita wajib menyertakan ketiga file tersebut.
  • Baris 8, 9 dan 10 digunakan untuk pengaturan layout halaman. Di contoh ini saya membuat layout dengan posisi form pada kolom satu halaman penuh atau 12 grid (class col-md-12). Silakan baca tutorial sebelumnya tentang pengaturan layout halaman menggunakan grid system bootstrap.
  • Baris kode untuk merancang form dimulai dari baris 11 sampai 26. Pada baris 11 kita membuat form default karena tidak menggunakan class pada tag <form>. Form tersebut memiliki aksi ketika di submit akan mengarah ke form itu sendiri(action=”?”) dan method pengiriman datanya post/tidak menampilkan isi inputan di address bar browser. Selain method POST, terdapat metode pengiriman GET. Method pengiriman pada form akan kita bahas di artikel yang berbeda.
  • Pada baris 12 sampai 15, kita membuat elemen form yang terdiri dari Label dan Textbox untuk penginputan NIM. Setiap membuat elemen form, kita harus menempatkan di dalam class form-group. Dalam elemen form, contoh diatas pada textbox untuk inputan NIM kita sertakan class form-control.
  • Aturan penggunaan class form-group dan form-control berlaku untuk semua inputan yang lain (Nama dan Alamat)
  • Untuk Button(tombol) tidak usah sertakan class form-group dan form-control seperti elemen inputan yang lain, tetapi harus di tempatkan sebelum tag </form>

Berikut ini tampilannya di browser.

Hasil contoh class default merancang form dengan bootstrap

Penggunaan Class form-inline yang menempatkan semua label dan elemen inputan form dalam satu baris, silakan lihat pada kode dibawah:

<!DOCTYPE html>
<html>
  <head>
    <title>Merancang Inputan form dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <form class="form-inline" action="?" method="post">
                  <div class="form-group">
                    <label for="nim">NIM</label>
                    <input type="text" class="form-control" name="nim" placeholder="Isikan NIM">
                  </div>
                  <div class="form-group">
                    <label for="nama">Nama</label>
                    <input type="text" class="form-control" name="nama" placeholder="Isikan Nama Lengkap">
                  </div>
                  <div class="form-group">
                    <label for="alamat">Alamat</label>
                    <textarea name="alamat"class="form-control" placeholder="Isikan Alamat Lengkap"></textarea>
                  </div>
                  <button type="submit" class="btn btn-info">Simpan</button>
                  <button type="reset" class="btn btn-info">Batal</button>
                </form>
                </div>
            </div>
        </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Kode diatas tidak jauh berbeda dengan kode sebelumnya, hanya saja di baris 11 pada tag <form> ditambahkan class form-inline untuk membuat semua elemen inputan dan label form berada dalam satu baris. Hasilnya ketika dijalankan menggunakan browser seperti gambar dibawah.

Hasil contoh class form-inline merancang form dengan bootstrap

Penggunaan class form yang ketiga atau class form-horizontal dapat dilihat pada kode berikut

<!DOCTYPE html>
<html>
  <head>
    <title>Merancang Inputan form dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <form class="form-horizontal" action="?" method="post">
                  <div class="form-group">
                    <label for="nim" class="col-sm-2 control-label">NIM</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="nim" name="nim" placeholder="Isikan NIM">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="nama" class="col-sm-2 control-label">Nama</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="nama" placeholder="Isikan Nama Lengkap">
                    </div>
                  </div>
                  <div class="form-group">
                    <label for="alamat" class="col-sm-2 control-label">Alamat</label>
                    <div class="col-sm-10">
                        <textarea name="alamat"class="form-control" placeholder="Isikan Alamat Lengkap"></textarea>
                    </div>
                  </div>
                  <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-info">Simpan</button>
                      <button type="reset" class="btn btn-info">Batal</button>
                  </div>
                </form>
                </div>
            </div>
        </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
  • Menggunakan class form-horizontal, terlebih dahulu kita harus menempatkan class=”form-horizontal” di dalam tag <form>. Cara penggunaanya lihat pada baris 11.
  • Untuk elemen form, seperti Label, Textbox, Textarea dan Button harus kita atur terlebih dahulu layout/ penempatannya dengan memberikan class. Perhatikan baris 13, pada Label Nim ditambahkan class=”col-sm-2 control label” dan pada baris 14 untuk menempatkan posisi Textbox inputan Nim dibuat satu class col-sm-10. Jadi maksutnya, Label Nim menggunakan kolom sebanyak 2 grid (col-sm-2) dan textbox inputan Nim menggunakan kolom sebanyak 10 grid (col-sm-10). Atau dengan kata lain, perbandingan lebar kolom untuk Label Nim dan Textbox Nim adalah 1 banding 5. Penggunaan classnya sama untuk mengatur posisi elemen inputan form lain seperti Nama dan Alamat.
  • Pada baris 30, diberikan class untuk mengatur posisi button Simpan dan Batal. Class yang digunakan adalah col-sm-offset-2 col-md-10, artinya penempatan button Simpan dan Batal menggunakan lebar kolom 10 grid dan posisinya berada setelah melewati kolom selebar 2 grid. Ini digunakan untuk menempatkan button Simpan dan Batal agar sejajar dengan kolom inputan lain(Nim, Nama, Alamat). Untuk lebih jelasnya tentang pengaturan layout halaman, silakan baca tutorial sebelumnya mengenai Penggunaan Grid system Bootstrap untuk mengatur layout halaman website.

Tampilan formnya di browser seperti gambar dibawah:

Hasil contoh class form-horizontal merancang form dengan bootstrap

Selanjutnya, untuk mempercantik form dan membuat pengaturan untuk interaksi pengguna saat mengisikan form terdapat beberapa class yang dapat kita gunakan di dalam sebuah elemen form, diantaranya adalah class has-success (elemen form berwarna hijau), has-warning(berwarna kuning) dan has error (berwarna merah). Penggunaan class-class tersebut silakan lihat pada kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Merancang Inputan form dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <form class="form-horizontal" action="?" method="post">
                  <div class="form-group has-success">
                    <label for="nim" class="col-sm-2 control-label">NIM</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="nim" name="nim" placeholder="Isikan NIM">
                    </div>
                  </div>
                  <div class="form-group has-warning">
                    <label for="nama" class="col-sm-2 control-label">Nama</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" name="nama" placeholder="Isikan Nama Lengkap">
                    </div>
                  </div>
                  <div class="form-group has-error">
                    <label for="alamat" class="col-sm-2 control-label">Alamat</label>
                    <div class="col-sm-10">
                        <textarea name="alamat"class="form-control" placeholder="Isikan Alamat Lengkap"></textarea>
                    </div>
                  </div>
                  <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-info">Simpan</button>
                      <button type="reset" class="btn btn-info">Batal</button>
                  </div>
                </form>
                </div>
            </div>
        </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Perhatikan pada baris 12, 18 dan 24. Pada baris tersebut pada ditambahkan class has-success, has-warning dan has-error dalam setiap elemen form. Hasilnya seperti gambar berikut

Hasil contoh class inline merancang form dengan bootstrap

Dengan menggunakan class-class bootstrap, maka kita dapat merancang form yang lebih dinamis. Contohnya ketika membuat validasi inputan maupun kontrol, kita dapat sisipkan keterangan maupun icon tertentu. Cara penggunaan classnya bisa di lihat pada kode berikut

<!DOCTYPE html>
<html>
  <head>
    <title>Merancang Inputan form dengan Bootstrap - ITGeek.id</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                <form class="form-horizontal" action="?" method="post">
                  <div class="form-group has-success">
                    <label for="nim" class="col-sm-2 control-label">NIM</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon">#</span>
                            <input type="text" class="form-control" id="nim" name="nim" placeholder="Isikan NIM">
                            <span class="glyphicon glyphicon-ok form-control-feedback"></span>
                        </div>
                    </div>
                  </div>
                  <div class="form-group has-warning">
                    <label for="nama" class="col-sm-2 control-label">Nama</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon">@</span>
                            <input type="text" class="form-control" name="nama" placeholder="Isikan Nama Lengkap">
                            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
                        </div>
                    </div>
                  </div>
                  <div class="form-group has-error">
                    <label for="alamat" class="col-sm-2 control-label">Alamat</label>
                    <div class="col-sm-10">
                        <div class="input-group">
                            <span class="input-group-addon">&&</span>
                            <textarea name="alamat"class="form-control" placeholder="Isikan Alamat Lengkap"></textarea>
                            <span class="glyphicon glyphicon-remove form-control-feedback"></span>
                        </div>
                    </div>
                  </div>
                  <div class="col-sm-offset-2 col-sm-10">
                      <button type="submit" class="btn btn-info">Simpan</button>
                      <button type="reset" class="btn btn-info">Batal</button>
                  </div>
                </form>
                </div>
            </div>
        </div>
    <script src="js/jQuery v3.2.0.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Pada kode diatas, baris 15 ditambahkan class baru yaitu class input-group untuk menyatukan karakter(huruf, maupun kata) dan icon ke dalam elemen inputan form. Class input-group-addon digunakan untuk menambahkan karakter pada elemen inputan form, penggunaanya bisa di lihat pada baris 16.

Kemudian, class glyphicon glyphicon-ok form-control-feedback digunakan untuk menampilkan icon pada elemen inputan form. Cara penggunaan classnya dapat di lihat pada baris 18. Jenis-jenis Glyphicon yang dapat di gunakan pada bootstrap kita bahas di turorial Cara Menggunakan Icon Glyphicon Pada Bootstrap.

Berikut tampilannya ketika di jalankan menggunakan browser.

Hasil contoh class glyphicon merancang form dengan bootstrap

Demikian tutorial Bootstrap mengenai Merancang Form dengan Bootstrap yang membahas tentang class-class css untuk pengaturan tampilan pada sebuah form. Selamat mencoba dan semoga bermanfaat.

Tutorial selanjutnya kita akan membahas tentang bagaimana cara membuat button/tombol dengan bootstrap. Pada tutorial tersebut kita akan menerapkan class-class bootstrap untuk membuat button, merubah ukuran dan warna button

Comments

comments

About admin

admin
My mission in life is not merely to survive, but to thrive; and to do so with some passion, some compassion and some humor.

Tutorial Lain

Tutorial Bootstrap Bagian 13: Membuat Jumbotron Dengan Bootstrap

Tutorial bootstrap kali ini membahas cara membuat jumbotron dengan bootstrap. Jumbotron umumnya ditempatkan pada halaman …

Leave a Reply

Your email address will not be published. Required fields are marked *