Cara menggunakan mengatur ukuran form bootstrap

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.

Table of Contents Show

Membuat Layout Bentuk Vertikal
Membuat Layout Bentuk Horizontal
Membuat Layout Formulir Inline
Membuat Kontrol Bentuk Statis
Penempatan Kotak Centang dan Radio
Membuat Kontrol Formulir yang Dinonaktifkan
Membuat Input read-only
Ukuran Kolom Input, Textareas dan Select Boxes
Ukuran Ketinggian Input dan Select Box
Menempatkan Teks Bantuan di sekitar Kontrol Formulir
Validasi Formulir Bootstrap
Kontrol Formulir yang Didukung 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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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="[email protected]">
            </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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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 4 Horizontal Form Layout</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

CodePen Embed FallbackCodePen Embed Fallback

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.