Pada tutorial sebelumnya, kita sudah belajar Tutorial Belajar Bootstrap Bagian 9 : Cara Membuat Daftar Grup di Bootstrap, selanjutnya kita akan belajar cara membuat formulir di Bootstrap.
Formulir HTML adalah bagian integral dari halaman web dan aplikasi, tetapi membuat layout formulir atau menata kontrol formulir secara manual satu per satu menggunakan CSS sering kali membosankan.
Bootstrap sangat menyederhanakan proses penataan dan penyelarasan kontrol formulir seperti label, bidang input, kotak pilih, area teks, tombol, dll. Melalui kumpulan class yang telah ditentukan sebelumnya.
Bootstrap menyediakan 3 jenis layout formulir:
- Bentuk Vertikal (layout formulir default)
- Bentuk Horizontal
- Formulir Inline
Bagian berikut akan memberi Anda gambaran umum mendetail dari semua layout formulir ini serta berbagai komponen Bootstrap terkait formulir satu per satu. Baiklah, mari kita mulai.
Membuat Layout Bentuk Vertikal
Ini adalah layout formulir Bootstrap default di mana style diterapkan ke kontrol formulir tanpa menambahkan class dasar apa pun ke elemen <form> atau perubahan besar apa pun di markup.
Kontrol formulir dalam layout ini ditumpuk dengan label rata kiri di bagian atas.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Vertical Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/contoh/actions/confirmation.php" method="post">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
<div class="checkbox">
<label><input type="checkbox"> Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
</div>
</body>
</html>
Catatan: Semua kontrol bentuk tekstual, seperti <input>, <textarei>, dan <select> memerlukan class .form-control untuk penataan style umum. Class .form-control juga membuatnya mengikuti 100% lebar perangkat.
Untuk mengubah lebarnya atau menggunakannya sebaris, Anda dapat memanfaatkan class grid yang telah ditentukan sebelumnya.
Membuat Layout Bentuk Horizontal
Anda juga dapat membuat layout formulir horizontal di mana label dan kontrol formulir disejajarkan berdampingan menggunakan class grid Bootstrap.
Untuk membuat layout formulir horizontal, tambahkan class .row pada grup formulir dan gunakan class grid .col-*-* untuk menentukan lebar label dan kontrol Anda.
Selain itu, pastikan untuk menerapkan class .col-form-label pada elemen <label>, sehingga formulir berada di tengah secara vertikal dengan kontrol formulir yang terkait. Mari kita lihat contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/contoh/actions/confirmation.php" method="post">
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<label class="form-check-label"><input type="checkbox"> Ingat saya</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Masuk</button>
</div>
</div>
</form>
</div>
</body>
</html>
Membuat Layout Formulir Inline
Terkadang Anda mungkin ingin menampilkan serangkaian label, kontrol formulir, dan tombol pada satu baris horizontal untuk memadatkan layout.
Anda dapat melakukannya dengan mudah dengan menambahkan class .form-inline ke elemen <form>. Namun, kontrol bentuk hanya muncul sebaris di area pandang yang lebarnya setidaknya 576 piksel.
Mari kita lihat contoh berikut untuk melihat cara kerjanya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Inline Form Layout</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form class="form-inline" action="/contoh/actions/confirmation.php" method="post">
<div class="form-group mr-2">
<label class="sr-only" for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
</div>
<div class="form-group mr-2">
<label class="sr-only" for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
<div class="form-group mr-2">
<label><input type="checkbox" class="mr-1"> Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Masuk</button>
</form>
</div>
</body>
</html>
Catatan: Disarankan untuk menyertakan label untuk setiap masukan formulir jika tidak, pembaca layar akan mengalami masalah dengan formulir Anda.
Namun, untuk layout formulir sebaris, Anda dapat menyembunyikan label menggunakan class khusus .sr, sehingga hanya pembaca layar yang dapat membacanya.
Membuat Kontrol Bentuk Statis
Mungkin ada situasi saat Anda hanya ingin menampilkan nilai teks biasa di samping label formulir dan bukan kontrol formulir kerja.
Anda dapat melakukannya dengan mudah dengan mengganti class .form-control dengan .form-control-plaintext dan menerapkan atribut read-only.
Class .form-control-plaintext menghapus style default dari kolom formulir, tetapi mempertahankan margin dan padding yang benar. Mari kita lihat contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Static Form Control</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/contoh/actions/confirmation.php" method="post">
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="text" readonly class="form-control-plaintext" id="inputEmail" value="budisuseno@contoh.com">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="checkbox">
<label><input type="checkbox"> Ingat saya</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Masuk</button>
</div>
</div>
</form>
</div>
</body>
</html>
Penempatan Kotak Centang dan Radio
Kotak centang dan tombol radio dapat ditempatkan bertumpuk atau sebaris.
Kotak Centang dan Radio yang Bertumpuk
Untuk menempatkan kotak centang atau tombol radio ditumpuk secara vertikal yaitu baris demi baris, cukup bungkus semua kontrol dalam grup formulir dan terapkan class .d-block pada setiap <label>.
Selain itu, gunakan class utilitas margin untuk jarak yang tepat, seperti yang ditunjukkan pada contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Stacked Checkboxes dan Radios</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<h4>Pilih olahraga favorit Anda</h4>
<div class="form-group">
<label class="d-block">
<input type="checkbox" class="mr-1" name="sports"> Badminton
</label>
<label class="d-block">
<input type="checkbox" class="mr-1" name="sports"> Bola Kaki
</label>
<label class="d-block">
<input type="checkbox" class="mr-1" name="sports"> Tennis
</label>
</div>
<hr>
<h4>Choose your gender</h4>
<div class="form-group">
<label class="d-block">
<input type="radio" class="mr-1" name="gender"> Laki-laki
</label>
<label class="d-block">
<input type="radio" class="mr-1" name="gender"> Perempuan
</label>
</div>
</form>
</div>
</body>
</html>
Kotak Centang dan Radio Inline
Namun, untuk menempatkannya sebaris, yaitu berdampingan, cukup letakkan semua kontrol formulir dalam grup formulir dan gunakan class utilitas margin untuk memastikan jarak yang tepat.
Tidak perlu menggunakan class .d-block pada elemen <label> dalam kasus ini. Mari kita lihat contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Inline Checkboxes and Radios</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<h4>Pilih olahraga favorit Anda</h4>
<div class="form-group">
<label class="mr-3">
<input type="checkbox" class="mr-1" name="sports"> Badminton
</label>
<label class="mr-3">
<input type="checkbox" class="mr-1" name="sports"> Bola Kaki
</label>
<label class="mr-3">
<input type="checkbox" class="mr-1" name="sports"> Tennis
</label>
</div>
<hr>
<h4>Pilih jenis kelamin Anda</h4>
<div class="form-group">
<label class="mr-3">
<input type="radio" class="mr-1" name="gender"> Laki-laki
</label>
<label class="mr-3">
<input type="radio" class="mr-1" name="gender"> Perempuan
</label>
</div>
</form>
</div>
</body>
</html>
Membuat Kontrol Formulir yang Dinonaktifkan
Untuk menonaktifkan kontrol bentuk individual seperti <input>, <textarea>, <select> cukup tambahkan atribut yang dinonaktifkan padanya dan Bootstrap akan melakukan sisanya. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Disabled Form Controls</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<input type="text" class="form-control mb-2" placeholder="Input dinonaktifkan" disabled>
<textarea class="form-control mb-2" placeholder="Textarea dinonaktifkan" disabled></textarea>
<select id="disabledSelect" class="form-control" disabled>
<option>Pilihan dinonaktifkan </option>
</select>
</form>
</div>
</body>
</html>
Namun, jika Anda ingin menonaktifkan semua kontrol dalam <form> sekaligus, tempatkan mereka di dalam elemen <fieldset> dan terapkan atribut di atasnya, seperti yang ditunjukkan pada contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Disabled Forms</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<fieldset disabled>
<div class="form-group row">
<label for="inputEmail" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<label class="form-check-label"><input type="checkbox"> Ingat saya</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<button type="submit" class="btn btn-primary">Masuk</button>
</div>
</div>
</fieldset>
</form>
</div>
</body>
</html>
Membuat Input read-only
Anda juga dapat menambahkan atribut boolean read-only pada input atau textarea untuk mencegah modifikasi nilainya.
Input hanya-baca muncul di latar belakang yang lebih terang (seperti input yang dinonaktifkan), tetapi tetap mempertahankan kursor teks standar. Lihat contoh berikut untuk melihat cara kerjanya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Read Only Input dan Textarea</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<input type="text" class="form-control mb-2" value="Nilai input tidak dapat diubah." readonly>
<textarea rows="3" class="form-control" readonly>Nilai textarea tidak dapat diubah.</textarea>
</form>
</div>
</body>
</html>
Ukuran Kolom Input, Textareas dan Select Boxes
Anda juga dapat mencocokkan ukuran kontrol formulir Anda dengan ukuran kolom grid Bootstrap. Cukup bungkus kontrol formulir Anda (yaitu <input>, <textarea>, dan <select>) di kolom grid, atau elemen khusus apa pun dan terapkan class grid di atasnya, seperti yang ditunjukkan pada contoh berikut:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap 4 Grid Sizing of Form Controls</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="form-row">
<div class="form-group col-sm-6">
<label for="inputCity">Kota</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-sm-4">
<label for="inputState">Kabupaten</label>
<select id="inputState" class="form-control">
<option>Pilih</option>
</select>
</div>
<div class="form-group col-sm-2">
<label for="inputZip">Kode POS</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
</form>
</div>
</body>
</html>
Tip: Sebagai alternatif, Anda dapat menggunakan class .form-row sebagai pengganti .row saat membuat layout formulir.
Class .form-row adalah variasi dari grid Bootstrap standar .row yang menimpa talang kolom default untuk layout yang lebih rapat dan lebih ringkas.
Ukuran Ketinggian Input dan Select Box
Anda dapat dengan mudah mengubah tinggi input teks Anda dan memilih kotak untuk menyesuaikan dengan ukuran tombol. Gunakan class pengatur ukuran tinggi kontrol formulir seperti .form-control-lg, .form-control-sm pada kotak <input> dan <select> untuk membuat ukurannya lebih besar atau lebih kecil.
Selain itu, pastikan untuk menerapkan class .col-form-label-sm atau .col-form-label-lg pada elemen <label> atau <legend> untuk mengubah ukuran label accordion dengan benar ke kontrol formulir.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Height Sizing of Form Controls</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" placeholder="Large input">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="Default input">
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" placeholder="Small input">
</div>
</div>
<hr>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-lg">Kabupaten</label>
<div class="col-sm-10">
<select class="form-control form-control-lg">
<option>Pilihan besar</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label">Kabupaten</label>
<div class="col-sm-10">
<select class="form-control">
<option>Pilihan default</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-2 col-form-label col-form-label-sm">Kabupaten</label>
<div class="col-sm-10">
<select class="form-control form-control-sm">
<option>Pilihan kecil</option>
</select>
</div>
</div>
</form>
</div>
</body>
</html>
Menempatkan Teks Bantuan di sekitar Kontrol Formulir
Menempatkan teks bantuan untuk kontrol formulir dengan cara yang efisien untuk memandu pengguna memasukkan data yang benar dalam formulir.
Anda dapat menempatkan teks bantuan tingkat blok untuk kontrol formulir menggunakan class .form-teks. Teks bantuan blok biasanya ditampilkan di bagian bawah kontrol. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Block Help Text</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control">
<small class="form-text text-muted">
Kata sandi Anda harus terdiri dari 8-20 karakter, mengandung huruf, angka dan karakter khusus, tetapi tidak boleh mengandung spasi.
</small>
</div>
</form>
</div>
</body>
</html>
Demikian pula, Anda juga dapat menempatkan teks bantuan sebaris menggunakan elemen <small>.
Tidak perlu menggunakan .form-text dalam kasus ini. Contoh berikut menunjukkan cara mengimplementasikan ini:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Inline Help Text</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form class="form-inline">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control mx-sm-3">
<small class="text-muted"> Panjang harus 8-20 karakter.</small>
</div>
</form>
</div>
</body>
</html>
Validasi Formulir Bootstrap
Bootstrap menyediakan cara mudah dan cepat untuk memvalidasi formulir web di sisi klien.
Ini menggunakan API validasi formulir asli browser untuk memvalidasi formulir.
Style validasi formulir diterapkan melalui CSS :valid dan :pseudo-class valid. Ini berlaku untuk elemen <input>, <select>, dan <textarea>.
Mari kita lihat contoh berikut untuk melihat cara kerjanya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Form Validation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/contoh/actions/confirmation.php" class="needs-validation" method="post" novalidate>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<div class="invalid-feedback"> Silakan isi alamat email.</div>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback"> Silakan masukkan kata sandi Anda untuk melanjutkan.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox"> Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Masuk</button>
</form>
<!-- JavaScript untuk menonaktifkan pengiriman formulir jika ada kolom yang tidak valid -->
<script>
// Self-executing function
(function() {
'use strict';
window.addEventListener('load', function() {
// Ambil semua formulir yang ingin kita terapkan gaya validasi Bootstrap kustom
var forms = document.getElementsByClassName('needs-validation');
// Ulangi dan cegah penyerahan
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</div>
</body>
</html>
Catatan: Untuk pesan validasi formulir Bootstrap kustom, Anda harus menonaktifkan tooltips umpan balik default browser dengan menambahkan atribut boolean novalidate ke elemen <form>. Namun, ini masih menyediakan akses ke API validasi formulir di JavaScript.
Berikut kode JavaScript khusus yang menampilkan pesan kesalahan dan menonaktifkan pengiriman formulir jika ada bidang yang tidak valid.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Form Validation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/contoh/actions/confirmation.php" class="needs-validation" method="post" novalidate>
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Email" required>
<div class="invalid-feedback">Silakan isi alamat email.</div>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control" id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback"> Silakan masukkan kata sandi Anda untuk melanjutkan.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox"> Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Masuk</button>
</form>
<!-- JavaScript untuk menonaktifkan pengiriman formulir jika ada kolom yang tidak valid -->
<script>
// Fungsi yang dijalankan sendiri
(function() {
'use strict';
window.addEventListener('load', function() {
// Ambil semua formulir yang ingin kita terapkan gaya validasi Bootstrap kustom
var forms = document.getElementsByClassName('needs-validation');
// Ulangi dan cegah penyerahan
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</div>
</body>
</html>
Tip: Untuk mengatur ulang tampilan formulir secara terprogram, hapus class yang divalidasi class dari elemen <form> setelah pengiriman. Class ini diterapkan secara otomatis pada formulir oleh Bootstrap ketika Anda mengklik tombol kirim.
Jika Anda memerlukan validasi sisi server, Anda dapat menunjukkan bidang formulir yang tidak valid dan valid dengan .is-invalid dan .is-valid. .Invalid-feedback dan .valid-feedback juga didukung dengan class-class ini. Coba contoh berikut untuk melihat cara kerjanya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Server Side Form Validation</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form action="/contoh/actions/confirmation.php" method="post">
<div class="form-group">
<label for="inputEmail">Email</label>
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" required>
<div class="valid-feedback"> Baik! Alamat email Anda terlihat valid.</div>
</div>
<div class="form-group">
<label for="inputPassword">Password</label>
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password" required>
<div class="invalid-feedback"> Ups! Anda telah memasukkan kata sandi yang tidak valid.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox"> Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Masuk</button>
</form>
</div>
</body>
</html>
Sebagai alternatif, Anda dapat menukar class umpan balik .{Valid | invalid} dengan .{Valid | invalid} class -tooltip untuk menampilkan teks umpan balik validasi dalam style tooltip.
Selain itu, pastikan untuk menerapkan style position :relative atau class .position-relative pada elemen induk untuk pemosisian tooltip umpan balik yang tepat. Berikut contohnya:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Bootstrap Display Form Validation Feedback in Tooltip Style</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<form>
<div class="form-group position-relative">
<label for="inputEmail">Email</label>
<input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" value="budisuseno@contoh.com" required>
<div class="valid-tooltip"> Baik! Alamat email Anda terlihat valid.</div>
</div>
<div class="form-group position-relative">
<label for="inputPassword">Password</label>
<input type="password" class="form-control is-invalid" id="inputPassword" placeholder="Password" required>
<div class="invalid-tooltip"> Ups! Anda telah memasukkan kata sandi yang tidak valid.</div>
</div>
<div class="form-group">
<label class="form-check-label"><input type="checkbox"> Ingat saya</label>
</div>
<button type="submit" class="btn btn-primary">Masuk</button>
</form>
</div>
</body>
</html>
Catatan: Ikon latar belakang untuk elemen <select> hanya berfungsi dengan baik dengan .custom-select, bukan dengan .form-control. Kita akan belajar tentang custom form Bootstrap di tutorial selanjutnya.
Kontrol Formulir yang Didukung di Bootstrap
Bootstrap menyertakan dukungan untuk semua kontrol bentuk HTML standar serta jenis input HTML5 baru seperti datetime, number, email, url, search, range, color, url, dan sebagainya. Contoh berikut akan menunjukkan kepada Anda penggunaan kontrol formulir standar dengan Bootstrap.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Supported HTML Form Controls di Bootstrap</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
<style>
.bs-example{
margin: 20px;
}
</style>
<script>
// Self-executing function
(function() {
'use strict';
window.addEventListener('load', function() {
// Ambil semua formulir yang ingin kita terapkan gaya validasi Bootstrap kustom
var forms = document.getElementsByClassName('needs-validation');
// Ulangi mereka dan cegah penyerahan
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</head>
<body>
<div class="bs-example">
<h1 class="text-center border-bottom pb-3 mb-4"> Formulir Pendaftaran </h1>
<form class="needs-validation" action="/contoh/actions/confirmation.php" method="post" novalidate>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="firstName">Nama Depan:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="firstName" placeholder="Nama Depan " required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="lastName">Nama Belakang:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="lastName" placeholder="Nama Belakang" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="inputEmail">Alamat Email:</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="inputEmail" placeholder="Alamat Email" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="phoneNumber">Nomor Handphone:</label>
<div class="col-sm-9">
<input type="number" class="form-control" id="phoneNumber" placeholder="Nomor HP" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Tanggal Lahir:</label>
<div class="col-sm-3">
<select class="custom-select" required>
<option value="">Tanggal</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="col-sm-3">
<select class="custom-select" required>
<option value="">Bulan</option>
<option value="1">Januari</option>
<option value="2">Februari</option>
<option value="3">Maret</option>
<option value="4">April</option>
<option value="5">Mei</option>
<option value="6">Juni</option>
<option value="7">July</option>
<option value="8">Augustus</option>
<option value="9">September</option>
<option value="10">Oktober</option>
<option value="11">November</option>
<option value="12">Desember</option>
</select>
</div>
<div class="col-sm-3">
<select class="custom-select">
<option>Tahun</option>
</select>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="postalAddress">Alamat Rumah:</label>
<div class="col-sm-9">
<textarea rows="3" class="form-control" id="postalAddress" placeholder="Alamat Rumah" required></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label" for="ZipCode">Kode POS:</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="ZipCode" placeholder="Kode POS" required>
</div>
</div>
<div class="form-group row">
<label class="col-sm-3 col-form-label">Jenis Kelamin:</label>
<div class="col-sm-9 mt-2">
<label class="mb-0 mr-3">
<input type="radio" class="mr-1" name="gender"> Laki-laki
</label>
<label class="mb-0 mr-3">
<input type="radio" class="mr-1" name="gender"> Perempuan
</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<label class="checkbox-inline">
<input type="checkbox" class="mr-1" value="agree"> Saya setuju dengan <a href="#">Syarat & Ketentuan</a>.
</label>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-3">
<input type="submit" class="btn btn-primary" value="Kirimkan">
<input type="reset" class="btn btn-secondary" value="Reset">
</div>
</div>
</form>
</div>
</body>
</html>
Semoga tutorial ini memantu Anda mempelajari bagaimana cara membuat formulir di Bootstrap.
0 Komentar