Form adalah salah satu komponen paling penting pada sebuah website, form digunakan untuk menyimpan data pengunjung yang mereka inputkan, dan dalam penggunaannya melibatkan bahasa pemrograman server seperti PHP misalnya.
Pada proses pembuatan Form ada banyak elemen yang biasa dimasukkan seperti penggunaan textarea, input, legend, button dan penggunaan elemen lainnya. Seperti pada table di bawah ini.
Bootstrap sudah menyediakan berbagai class yang bisa langsung kita terapkan pada form html.
Yang akan dibahas pada tutorial form bootstrap 4 ini diantaranya adalah :
- Form Control
- Form Group
- Form Upload
- Ukuran Form
- Checkbox dan Radio
- Form Grid (Responsive)
- Form Horizontal
1. Form Control
Untuk menerapkan form bootstrap ke form biasa yang kita buat, kita bisa menggunakan class .form-control. Class .form-control ini bisa kita gunakan pada elemen <input>, <select> .. </select> dan <textarea> .. </textarea>.
Contoh pembuatan form menggunakan class .form-control bootstrap 4 :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h5>Contoh Form</h5>
<form>
<input type="text" class="form-control" placeholder="Contoh form text ...">
<br/>
<input type="number" class="form-control" placeholder="Contoh form angka ...">
<br/>
<select name="" class="form-control">
<option value="">Contoh Form Dropdown</option>
<option value="">Contoh 1</option>
<option value="">Contoh 2</option>
<option value="">Contoh 3</option>
</select>
<br/>
<textarea class="form-control" rows="3" placeholder="Contoh textarea .."></textarea>
</form>
</div>
</body>
</html>
Hasilnya :
2. Form Group
Form group dimaksudkan untuk bisa memisahkan masing-masing form dan sekalian kita buat label untuk masing-masing form.
Untuk membuat label kita bisa membuatnya dengan menggunakan elemen <label> .. </label>. Selanjutnya bagian formnya, tinggal kita terapkan class .form-control seperti contoh sebelumnya. Kemudian kedua elemen ini kita letakkan di dalam elemen <div> yang kita beri class .form-group.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h5>Contoh Form Group</h5>
<form>
<div class="form-group">
<label for="nama">Nama</label>
<input type="text" id="nama" class="form-control" placeholder="Contoh form text ...">
</div>
<div class="form-group">
<label for="umur">Umur</label>
<input type="number" id="umur" class="form-control" placeholder="Contoh form angka ...">
</div>
<div class="form-group">
<label for="pekerjaan">Pekerjaan</label>
<select id="pekerjaan" class="form-control">
<option value="">- Pilih Pekerjaan</option>
<option value="">Programmer</option>
<option value="">Web Designer</option>
<option value="">Pengusaha</option>
</select>
</div>
<div class="form-group">
<label for="alamat">Alamat</label>
<textarea class="form-control" id="alamat" rows="3" placeholder="Contoh textarea .."></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
Hasilnya :
3. Form Upload
Bootstrap juga menyediakan class untuk diterapkan pada form upload.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h5>Contoh Form Upload (File Browser)</h5>
<form>
<div class="form-group">
<label for="contohupload1">Pilih file yang ingin diupload</label>
<input type="file" class="form-control-file" id="contohupload1">
</div>
<br/>
<div class="custom-file">
<input type="file" class="custom-file-input" id="contohupload2">
<label class="custom-file-label" for="contohupload2">Choose file</label>
</div>
</form>
</div>
</body>
</html>
Ada 2 jenis form upload pada contoh di atas, yaitu form upload model biasa dan satunya lagi form upload yang sudah di custom.
Hasilnya :
Pada form upload yang pertama, cara membuatnya hampir sama dengan cara membuat form yang sudah dijelaskan pada sub judul sebelumnya yaitu tentang form group. Bedanya hanya pada class yang kita buat, pada form upload yang pertama class nya adalah .form-control-file.
Pada form upload yang kedua, yaitu form custom, class yang digunakan pada form adalah .custom-file-input, kemudian class yang kita buat pada label nya adalah .custom-file-label. Kedua elemen tersebut berada di dalam elemen <div> .. </div> yang kita beri class .custom-file.
4. Ukuran Form Bootstrap
Bootstrap juga menyediakan class untuk membuat pengaturan ukuran form untuk mengubah ukuran form pada bootstrap, kita bisa menambahkan classnya beriringan dengan class .form-control.
- .form-control-sm untuk membuat form yang berukuran kecil.
- .form-control-lg untuk membuat form yang berukuran besar.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h5>Contoh Ukuran Form</h5>
<form>
<input type="text" class="form-control form-control-sm" placeholder="Contoh form berukuran kecil ..">
<br/>
<input type="text" class="form-control" placeholder="Contoh form berukuran sedang ..">
<br/>
<input type="text" class="form-control form-control-lg" placeholder="Contoh form berukuran besar ..">
</form>
</div>
</body>
</html>
Hasilnya :
5. Form Checkbox dan Radio
Untuk mengkustom tampilan form checkbox dan radio, kita bisa menambahkan class .control-custom-input pada form radio dan form checkbox. Kita juga bisa membuat form checkbox atau radio yang berbentuk inline atau posisinya sebaris dengan form lainnya, dengan cara menambahkan class .custom-control-inline.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<center>
<h5>Contoh Checkbox dan Radio</h5>
</center>
<form>
<h5>Contoh Checkbox</h5>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ContohCheckbox1">
<label class="custom-control-label" for="ContohCheckbox1">Pilihan 1</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="ContohCheckbox2">
<label class="custom-control-label" for="ContohCheckbox2">Pilihan 2</label>
</div>
<hr>
<h5>Contoh Radio</h5>
<div class="custom-control custom-radio">
<input type="radio" id="ContohRadio1" name="ContohRadio" class="custom-control-input">
<label class="custom-control-label" for="ContohRadio1">Pilihan 1</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="ContohRadio2" name="ContohRadio" class="custom-control-input">
<label class="custom-control-label" for="ContohRadio2">Pilihan 2</label>
</div>
<hr>
<h5>Contoh Checkbox Inline</h5>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="inline1">
<label class="custom-control-label" for="inline1">Pilihan 1</label>
</div>
<div class="custom-control custom-checkbox custom-control-inline">
<input type="checkbox" class="custom-control-input" id="inline2">
<label class="custom-control-label" for="inline2">Pilihan 2</label>
</div>
</form>
</div>
</body>
</html>
Hasilnya :
6. Form Grid Responsive
Grid System bootstrap juga bisa kita terapkan pada form, dengan tujuan untuk mengatur lebar dari masing-masing form.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h5>Contoh Form Grid</h5>
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="contoh1">Nama</label>
<input type="text" class="form-control" id="contoh1" placeholder="Nama">
</div>
<div class="form-group col-md-6">
<label for="contoh2">Username</label>
<input type="text" class="form-control" id="contoh2" placeholder="Username">
</div>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="contoh1">Nama Ayah</label>
<input type="text" class="form-control" id="contoh1" placeholder="Nama Ayah">
</div>
<div class="form-group col-md-4">
<label for="contoh2">Pekerjaan Ayah</label>
<input type="text" class="form-control" id="contoh2" placeholder="Pekerjaan Ayah">
</div>
<div class="form-group col-md-4">
<label for="contoh2">Alamat Ayah</label>
<input type="text" class="form-control" id="contoh2" placeholder="Alamat Ayah">
</div>
</div>
<button type="submit" class="btn btn-primary">Tombol</button>
</form>
</div>
</body>
</html>
Untuk mengatur grid masing-masing form, buatlah class .form-row pada baris form sesuai keinginan, kemudian pada masing-masing form-group, buat .col-* sesuai dengan ukuran form yang ingin dibuat.
Pada contoh syntax di atas, pada row pertama kita menerapkan class col-md-6 pada form nama dan form username, sehingga ukuran nya akan terbagi 2 dari 12 grid.
Row kedua pada form di atas, masing-masing form yaitu nama ayah, pekerjaan ayah dan alamat ayah kita beri class col-md-4, sehingga hasilnya 12/4=3. akan ada 3 kolum form seperti di atas.
Untuk memahami tentang grid, silahkan baca lagi tutorial Grid System.
Hasilnya :
7. Form Horizontal
Form horizontal pada bootstrap adalah form yang label nya terletak disebelah kiri, perhatikan contoh berikut.
Contoh :
<!DOCTYPE html>
<html>
<head>
<!-- Menghubungkan dengan bootstrap, sesuaikan dengan direktory file masing-masing -->
<link rel="stylesheet" href="../assets/css/bootstrap.css">
<title>Tutorial Form Dengan Bootstrap 4</title>
</head>
<body>
<div class="container">
<br>
<h5>Contoh Form Horizontal</h5>
<form>
<div class="form-group row">
<label for="nama" class="col-sm-2 col-form-label">Nama</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="nama" placeholder="Nama">
</div>
</div>
<div class="form-group row">
<label for="alamat" class="col-sm-2 col-form-label">Alamat</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="alamat" placeholder="Alamat">
</div>
<button type="submit" class="btn btn-primary">Tombol</button>
</form>
</div>
</body>
</html>
Hasilnya :
Untuk membuat form horizontal seperti di atas kita menggunakan grid system bootstrap, bagian label kita beri col-sm-2, dan sisanya yaitu col-sm-10 kita beri pada bagian form.
Referensi :
- https://getbootstrap.com/docs/4.3/components/forms/
- https://www.malasngoding.com/form-bootstrap-4/
