Bootstrap : Form – WebHozz Code

Membuat Form dengan Bootstrap

Form HTML adalah bagian integral dari halaman web dan aplikasi, tetapi membuat form layout atau styling form kontrol secara manual satu per satu menggunakan CSS sering membosankan dan menjemukan. Bootstrap dapat menyederhanakan proses styling dan form alignment kontrol seperti label, input field, selectboxes, text area, tombol, dll. Melalui sekumpulan kelas yang telah ditentukan.

Bootstrap menyediakan tiga jenis form layout:

Form Vertikal (default form layout)
Form horisontal
Form sebaris

Bagian berikut ini akan memberi kalian gambaran umum secara detail dari semua form layout ini serta berbagai komponen Bootstrap terkait formulir satu per satu.

Membuat Vertical Form Layout

Ini adalah form layout Bootstrap default di mana style diterapkan ke form control tanpa menambahkan kelas dasar apa pun ke elemen <form> atau perubahan besar apa pun di markup.

Form control dalam layout ini ditumpuk dengan label left-aligned di atas.

<form>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </div>
    <div class="form-group">
        <label for="inputPassword">Password</label>
        <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Membuat Horizontal Form Layout

Kalian juga bisa membuat horizontal form layout di mana label dan form control disejajarkan (aligned) berdampingan menggunakan kelas grid Bootstrap. Untuk membuat layout form horizontal, tambahkan kelas .row di grup formulir dan gunakan kelas kotak .col – * – * untuk menentukan lebar label dan kontrol kalian.

Juga, pastikan untuk menerapkan label .col-form-label pada elemen <label>, sehingga mereka dipusatkan secara vertikal dengan kontrol formulir yang terkait. Berikut contohnya:

<form>
    <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"> Remember me</label>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Membuat Inline Form Layout

Terkadang kalian mungkin ingin menampilkan serangkaian label, form control, dan button pada satu baris horizontal untuk meringkas layout-nya. Kalian dapat melakukan ini dengan mudah dengan menambahkan kelas .form-inline ke elemen <form>. Namun, form control hanya muncul sejajar (inline) dalam viewports yang setidakny lebar 576px.

Berikut contohnya:

<form class="form-inline">
    <div class="form-group mr-2">
        <label class="sr-only" for="inputEmail">Email</label>
        <input type="email" class="form-control" id="inputEmail" placeholder="Email">
    </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">
    </div>
    <div class="form-group mr-2">        
        <label><input type="checkbox" class="mr-1"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Catatan: Disarankan untuk menyertakan label untuk setiap input formulir jika tidak screen reader akan mengalami masalah dengan form kalian. Namun, dalam kasus form layout inline kalian dapat menyembunyikan label menggunakan kelas .sr-only, sehingga hanya screen reader yang dapat membacanya.

Membuat Static Form Control

Mungkin ada situasi ketika kalian hanya ingin menampilkan nilai teks biasa di sebelah label formulir sebagai ganti dari working form control. Kalian dapat melakukan ini dengan mudah dengan mengganti kelas .form-control dengan .form-control-plaintext dan menerapkan atribut readonly.

Kelas .form-control-plaintext menghilangkan styling default dari form field, tetapi mempertahankan margin dan padding yang benar. Berikut contohnya:

<form>
    <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="peterparker@example.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">
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <div class="checkbox">
                <label><input type="checkbox"> Remember me</label>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-sm-10 offset-sm-2">
            <button type="submit" class="btn btn-primary">Sign in</button>
        </div>
    </div>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Penempatan Checkboxes and Radios

Kotak centang dan radio button dapat ditempatkan stacked ataupun inline.

Stacked Checkboxe dan Radio

Untuk menempatkan checkboxes atau radio button yang ditumpuk (stacked) secara vertikal yaitu baris demi baris, cukup bungkus semua kontrol dalam grup formulir dan terapkan kelas .d-block pada setiap <label>. Selain itu, gunakan kelas margin utility untuk penspasian yang tepat, seperti yang ditunjukkan pada contoh berikut:

<!-- Vertically stacked checkboxes -->    
<div class="form-group">
    <label class="d-block">
        <input type="checkbox" class="mr-1" name="sports"> Cricket
    </label>
    <label class="d-block">
        <input type="checkbox" class="mr-1" name="sports"> Football
    </label>
    <label class="d-block">
        <input type="checkbox" class="mr-1" name="sports"> Tennis
    </label>
</div>
<!-- Vertically stacked radios -->
<div class="form-group">
    <label class="d-block">
        <input type="radio" class="mr-1" name="gender"> Male
    </label>
    <label class="d-block">
        <input type="radio" class="mr-1" name="gender"> Female
    </label>
</div>

Inline Checkbox dan Radio

Namun, untuk menempatkannya sejajar (inline), letakkan saja semua kontrol form di grup form dan gunakan kelas margin utility untuk memastikan spacing yang tepat. Tidak perlu menggunakan kelas .d-block pada elemen <label> dalam kasus ini. Mari kita lihat contoh berikut:

<!-- Inline checkboxes -->
<div class="form-group">
    <label class="mr-3">
        <input type="checkbox" class="mr-1" name="sports"> Cricket
    </label>
    <label class="mr-3">
        <input type="checkbox" class="mr-1" name="sports"> Football
    </label>
    <label class="mr-3">
        <input type="checkbox" class="mr-1" name="sports"> Tennis
    </label>
</div>
<!-- Inline radios -->
<div class="form-group">
    <label class="mr-3">
        <input type="radio" class="mr-1" name="gender"> Male
    </label>
    <label class="mr-3">
        <input type="radio" class="mr-1" name="gender"> Female
    </label>
</div>

Membuat Control Form Dinonaktifkan (Disabled)

Untuk menonaktifkan kontrol form individual seperti <input>, <textarea>, <select> tambahkan saja atribut yang dinonaktifkan padanya dan Bootstrap akan melakukan sisanya. Berikut contohnya:

<input type="text" class="form-control mb-2" placeholder="Disabled input" disabled>
<textarea class="form-control mb-2" placeholder="Disabled textarea" disabled></textarea>
<select id="disabledSelect" class="form-control" disabled>
    <option>Disabled select</option>
</select>

Output dari contoh di atas akan terlihat seperti ini:

Namun, jika kalian ingin menonaktifkan semua kontrol dalam <form> sekaligus menempatkannya di dalam elemen <fieldset> dan menerapkan atribut di atasnya, maka lihat contoh dibawah ini:

<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"> Remember me</label>
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-10 offset-sm-2">
                <button type="submit" class="btn btn-primary">Sign in</button>
            </div>
        </div>
    </fieldset>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Membuat Readonly Input

Kalian juga dapat menambahkan atribut readonly boolean pada input atau textarea untuk mencegah modifikasi nilainya. Input read-only muncul di lighter background (seperti halnya input yang dinonaktifkan), tetapi tetap mempertahankan kursor teks standar. Lihat contoh berikut untuk melihat cara kerjanya:

<input type="text" class="form-control mb-2" value="This input value cannot be changed." readonly>
<textarea rows="3" class="form-control" readonly>This textarea value cannot be changed.</textarea>

Output dari contoh di atas akan terlihat seperti ini:

Ukuran Kolom dari Input, Textareas dan Select Boxes

Kalian juga bisa mencocokkan ukuran form control kalian dengan ukuran kolom grid Bootstrap. Hanya bungkus form control kalian (mis. <input>, <textarea>, dan <seleksi>) dalam kolom grid, atau elemen kustom apa pun dan terapkan kelas grid di atasnya, seperti yang ditunjukkan pada contoh berikut:

<div class="form-row">
    <div class="form-group col-sm-6">
        <label for="inputCity">City</label>
        <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-sm-4">
        <label for="inputState">State</label>
        <select id="inputState" class="form-control">
            <option>Select</option>
        </select>
    </div>
    <div class="form-group col-sm-2">
        <label for="inputZip">Zip</label>
        <input type="text" class="form-control" id="inputZip">
    </div>
</div>

Inputs Height Sizing dan Select Boxes

Kalian dapat dengan mudah mengubah ketinggian input teks dan memilih kotak yang sesuai dengan button sizes. Gunakan kelas form control height sizing seperti .form-control-lg, .form-control-sm pada kotak <input> dan <select> untuk membuat ukurannya lebih besar atau lebih kecil.

Juga, pastikan untuk menerapkan kelas .col-form-label-sm atau .col-form-label-lg pada elemen <label> atau <legend> untuk mengubah ukuran label akordeon dengan benar ke form control.

<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">State</label>
        <div class="col-sm-10">
            <select class="form-control form-control-lg">
                <option>Large select</option>
            </select>
        </div>
    </div>    
    <div class="form-group row">
        <label class="col-sm-2 col-form-label">State</label>
        <div class="col-sm-10">
            <select class="form-control">
                <option>Default select</option>
            </select>
        </div>
    </div>    
    <div class="form-group row">
        <label class="col-sm-2 col-form-label col-form-label-sm">State</label>
        <div class="col-sm-10">
            <select class="form-control form-control-sm">
                <option>Small select</option>
            </select>
        </div>
    </div>
</form>

Menempatkan Teks Bantuan di sekitar Form Control

Menempatkan teks bantuan (help text) untuk form control dengan cara yang efisien untuk memandu pengguna memasukkan data yang benar ke dalam formulir. Kalian bisa menempatkan teks bantuan level blok untuk form control menggunakan kelas .form-text. Teks bantuan blok biasanya ditampilkan di bagian bawah kontrol. Berikut contohnya:

<div class="form-group">
    <label>Password</label>
    <input type="password" class="form-control">
    <small class="form-text text-muted">
        Your password must be 8-20 characters long, contain letters, numbers and special characters, but must not contain spaces.
    </small>
</div>

Output dari contoh di atas akan terlihat seperti ini:

Demikian pula, kalian juga dapat menempatkan teks bantuan inline menggunakan elemen <small>. Dalam hal ini tidak perlu menggunakan .form-text. Contoh berikut menunjukkan cara menerapkan-nya:

<form class="form-inline">
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control mx-sm-3">
        <small class="text-muted">Must be 8-20 characters long.</small>
    </div>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Form Validasi Bootstrap

Bootstrap 4 menyediakan cara mudah dan cepat untuk memvalidasi formulir web dari sisi klien. Ini menggunakan browser asli form validasi API untuk memvalidasi formulir. Style validasi form diterapkan melalui elemen CSS :invalid dan :valid pseudo-classes. Hal tersebut diterapkan juga untuk elemen <input>, <select>, dan <textarea>.

Mari kita lihat contoh berikut untuk melihat cara kerjanya:

<form class="needs-validation" 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">Please enter a valid email address.</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">Please enter your password to continue.</div>
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Catatan: Untuk pesan form validasi Bootstrap custom, kalian harus menonaktifkan feedback default browser dengan menambahkan atribut novalidate boolean ke elemen <form>. Namun, itu masih menyediakan akses ke form validasi API di JavaScript.

Berikut adalah kode custom JavaScript yang menampilkan pesan error dan menonaktifkan pengiriman formulir jika ada field yang tidak valid.

<script>
    // Self-executing function
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            // Fetch all the forms we want to apply custom Bootstrap validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            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>

Output dari contoh di atas akan terlihat seperti ini:

Tips: Untuk mengatur ulang tampilan formulir secara terprogram, hapus kelas .was-validated dari elemen <form> setelah submission. Kelas ini diterapkan secara otomatis pada form oleh Bootstrap ketika kalian mengklik tombol submit.

Jika kalian memerlukan validasi server-side, kalian bisa menunjukkan invalid dan valid form dengan .is-invalid dan .is-valid. .invalid-feedback dan .valid-feedback juga didukung dengan kelas-kelas ini. Cobalah contoh berikut untuk melihat cara kerjanya:

<form>
    <div class="form-group">
        <label for="inputEmail">Email</label>
        <input type="email" class="form-control is-valid" id="inputEmail" placeholder="Email" value="peterparker@example.com" required>
        <div class="valid-feedback">Good! Your email address looks 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">Opps! You have entered an invalid password.</div>
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Kalian dapat menukar kelas .{Valid|invalid}-feedback untuk .{Valid|invalid}-tooltip untuk menampilkan teks validasi feedback dalam tooltip style.

Juga, pastikan untuk menerapkan style position: relative atau kelas .position-relative pada elemen induk untuk penentuan feedback tooltip positioning yang tepat. Berikut contohnya:

<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="peterparker@example.com" required>
        <div class="valid-tooltip">Good! Your email address looks 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">Opps! You have entered an invalid password.</div>
    </div>
    <div class="form-group">
        <label class="form-check-label"><input type="checkbox"> Remember me</label>
    </div>
    <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Output dari contoh di atas akan terlihat seperti ini:

Bootstrap Form Validation Feedback in Styled Tooltip

Catatan: Ikon background untuk elemen <select> hanya berfungsi dengan baik dengan .custom-select, bukan dengan .form-control.

Supported Form Control di Bootstrap

Bootstrap mencakup dukungan untuk semua form control HTML standar serta tipe input HTML5 baru seperti datetime, number, email, url, search, range, color, url, dan sebagainya. Contoh berikut akan menunjukkan kepada kalian penggunaan standard form control dengan Bootstrap.

<form>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="firstName">First Name:</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="firstName" placeholder="First Name" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="lastName">Last Name:</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="lastName" placeholder="Last Name" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="inputEmail">Email Address:</label>
    <div class="col-sm-9">
        <input type="email" class="form-control" id="inputEmail" placeholder="Email Address" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="phoneNumber">Mobile Number:</label>
    <div class="col-sm-9">
        <input type="number" class="form-control" id="phoneNumber" placeholder="Phone Number" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label">Date of Birth:</label>
    <div class="col-sm-3">
        <select class="custom-select">
            <option>Date</option>
        </select>
    </div>
    <div class="col-sm-3">
        <select class="custom-select">
            <option>Month</option>
        </select>
    </div>
    <div class="col-sm-3">
        <select class="custom-select">
            <option>Year</option>
        </select>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="postalAddress">Postal Address:</label>
    <div class="col-sm-9">
        <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address" required></textarea>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label" for="ZipCode">Zip Code:</label>
    <div class="col-sm-9">
        <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code" required>
    </div>
</div>
<div class="form-group row">
    <label class="col-sm-3 col-form-label">Gender:</label>
    <div class="col-sm-9 mt-2">
        <label class="mb-0 mr-3">
            <input type="radio" class="mr-1" name="gender"> Male
        </label>
        <label class="mb-0 mr-3">
            <input type="radio" class="mr-1" name="gender"> Female
        </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"> I agree to the <a href="#">Terms and Conditions</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="Submit">
        <input type="reset" class="btn btn-secondary" value="Reset">
    </div>
</div>
</form>