Logo Prilude Studio
Konsultasi
Halaman utama bootstrap

Langkah-Langkah Membuat Form dengan Bootstrap

/

/

Oleh

admin

Pendahuluan

Bootstrap adalah framework front-end yang populer dan powerful untuk mengembangkan proyek web yang responsif dan modern. Dalam tutorial ini, kita akan mempelajari cara membuat form pendaftaran menggunakan Bootstrap, yang mencakup berbagai jenis input dan validasi. Tutorial ini dirancang untuk membantu Anda memahami konsep dasar penggunaan Bootstrap dalam pembuatan form yang stylish dan user-friendly.

Formulir pendaftaran adalah elemen penting dalam banyak aplikasi web. Memiliki form yang mudah digunakan dan divalidasi dengan baik dapat meningkatkan pengalaman pengguna secara keseluruhan dan memastikan data yang dikumpulkan akurat dan berguna. Dengan menggunakan Bootstrap, kita dapat membuat form yang tidak hanya fungsional tetapi juga estetis dan responsif di berbagai perangkat.

Menyiapkan Proyek

Langkah pertama adalah membuat file HTML baru dan menyertakan Bootstrap melalui CDN (Content Delivery Network).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Pendaftaran</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <!-- Form akan ditempatkan di sini -->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.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.min.js"></script>
</body>
</html>

Keterangan:

  • DOCTYPE HTML: Mendefinisikan dokumen sebagai HTML5.
  • Meta Charset: Menentukan karakter encoding dokumen sebagai UTF-8.
  • Viewport: Menentukan viewport untuk memastikan tata letak responsif pada perangkat mobile.
  • Link Bootstrap CSS: Mengimpor Bootstrap CSS dari CDN.
  • Script jQuery, Popper.js, dan Bootstrap JS: Mengimpor pustaka JavaScript yang dibutuhkan Bootstrap.

Mulai membuat form dengan boostrap

Sekarang, mari kita mulai untuk membuat form dengan boostrap. Oh iya, perlu kita pahami bahwa form merupakan komponen penting dalam desain web. Bisa dibilang, form merupakan salah satu cara kita berinteraksi dengan web. Dengan adanya form, pengguna bisa input data ke website sehingga website menjadi lebih dinamis.

Membuat Form Dasar

Sekarang, tambahkan form di dalam div container.

<div class="container mt-5">
    <h2>Form Pendaftaran</h2>
    <form>
        <div class="form-group">
            <label for="nama">Nama Lengkap</label>
            <input type="text" class="form-control" id="nama" placeholder="Masukkan nama lengkap">
        </div>
        <div class="form-group">
            <label for="email">Alamat Email</label>
            <input type="email" class="form-control" id="email" placeholder="Masukkan email">
        </div>
        <div class="form-group">
            <label for="password">Kata Sandi</label>
            <input type="password" class="form-control" id="password" placeholder="Masukkan kata sandi">
        </div>
        <div class="form-group">
            <label for="konfirmasiPassword">Konfirmasi Kata Sandi</label>
            <input type="password" class="form-control" id="konfirmasiPassword" placeholder="Konfirmasi kata sandi">
        </div>
        <button type="submit" class="btn btn-primary">Daftar</button>
    </form>
</div>

Keterangan:

  • Container: Membungkus seluruh form untuk memberikan padding di sekeliling konten.
  • Form: Elemen HTML yang berfungsi untuk mengumpulkan input dari pengguna.
  • Form Group: Membungkus setiap elemen form untuk menyediakan margin bawah.
  • Label: Menyediakan keterangan untuk setiap input.
  • Input: Elemen HTML untuk input data pengguna.
  • Button: Tombol untuk mengirim form.

Menambahkan Formulir Dengan Pilihan

Tambahkan input radio dan checkbox untuk pilihan jenis kelamin dan persetujuan syarat dan ketentuan.

<div class="form-group">
    <label>Jenis Kelamin</label>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="jenisKelamin" id="pria" value="pria" checked>
        <label class="form-check-label" for="pria">Pria</label>
    </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="jenisKelamin" id="wanita" value="wanita">
        <label class="form-check-label" for="wanita">Wanita</label>
    </div>
</div>

<div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="syarat">
    <label class="form-check-label" for="syarat">Saya setuju dengan syarat dan ketentuan</label>
</div>

Keterangan:

  • Form Check: Menyediakan struktur untuk input radio dan checkbox.
  • Form Check Input: Input radio atau checkbox.
  • Form Check Label: Label untuk input radio atau checkbox.

Membuat form responsif

Gunakan grid system Bootstrap untuk membuat form responsif.

<form>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="namaDepan">Nama Depan</label>
            <input type="text" class="form-control" id="namaDepan" placeholder="Nama Depan">
        </div>
        <div class="form-group col-md-6">
            <label for="namaBelakang">Nama Belakang</label>
            <input type="text" class="form-control" id="namaBelakang" placeholder="Nama Belakang">
        </div>
    </div>
    <div class="form-group">
        <label for="alamat">Alamat</label>
        <input type="text" class="form-control" id="alamat" placeholder="Alamat">
    </div>
    <div class="form-row">
        <div class="form-group col-md-6">
            <label for="kota">Kota</label>
            <input type="text" class="form-control" id="kota" placeholder="Kota">
        </div>
        <div class="form-group col-md-4">
            <label for="provinsi">Provinsi</label>
            <select id="provinsi" class="form-control">
                <option selected>Pilih...</option>
                <option>Jawa Barat</option>
                <option>Jawa Timur</option>
                <option>Jawa Tengah</option>
            </select>
        </div>
        <div class="form-group col-md-2">
            <label for="kodePos">Kode Pos</label>
            <input type="text" class="form-control" id="kodePos" placeholder="Kode Pos">
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Daftar</form>

Keterangan:

  • Form Row: Mengelompokkan form group dalam baris grid.
  • Form Group dengan Kolom: Menggunakan kelas grid (col-md-*) untuk membuat tata letak responsif.

Menambahkan Validasi

Tambahkan atribut HTML5 untuk validasi dasar pada input.

<form>
    <!-- ... form-row and other inputs ... -->
    <div class="form-group">
        <label for="email">Alamat Email</label>
        <input type="email" class="form-control" id="email" placeholder="Masukkan email" required>
        <div class="invalid-feedback">
            Harap masukkan email yang valid.
        </div>
    </div>
    <div class="form-group">
        <label for="password">Kata Sandi</label>
        <input type="password" class="form-control" id="password" placeholder="Masukkan kata sandi" required>
        <div class="invalid-feedback">
            Harap masukkan kata sandi.
        </div>
    </div>
    <button type="submit" class="btn btn-primary">Daftar</button>
</form>

Keterangan:

  • Atribut required: Menandakan input harus diisi.
  • Invalid Feedback: Menyediakan pesan kesalahan yang akan ditampilkan jika input tidak valid.

Mengaktifkan Validasi

Tambahkan JavaScript untuk mengaktifkan validasi Bootstrap.

<script>
    (function() {
        'use strict';
        window.addEventListener('load', function() {
            var forms = document.getElementsByClassName('needs-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>

Tambahkan kelas needs-validation ke dalam tag form.

<form class="needs-validation" novalidate>
    <!-- Form elements here -->
</form>

Keterangan:

  • JavaScript Validasi: Mengaktifkan validasi Bootstrap untuk form dengan kelas needs-validation.
  • Kelas was-validated: Menambahkan kelas ini ke form setelah divalidasi untuk menampilkan pesan validasi.

Kode Penuh

Berikut adalah kode penuh dari tutorial tersebut

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Pendaftaran</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h2>Form Pendaftaran</h2>
        <form class="needs-validation" novalidate>
            <div class="form-group">
                <label for="nama">Nama Lengkap</label>
                <input type="text" class="form-control" id="nama" placeholder="Masukkan nama lengkap" required>
                <div class="invalid-feedback">
                    Harap masukkan nama lengkap Anda.
                </div>
            </div>
            <div class="form-group">
                <label for="email">Alamat Email</label>
                <input type="email" class="form-control" id="email" placeholder="Masukkan email" required>
                <div class="invalid-feedback">
                    Harap masukkan email yang valid.
                </div>
            </div>
            <div class="form-group">
                <label for="password">Kata Sandi</label>
                <input type="password" class="form-control" id="password" placeholder="Masukkan kata sandi" required>
                <div class="invalid-feedback">
                    Harap masukkan kata sandi.
                </div>
            </div>
            <div class="form-group">
                <label for="konfirmasiPassword">Konfirmasi Kata Sandi</label>
                <input type="password" class="form-control" id="konfirmasiPassword" placeholder="Konfirmasi kata sandi" required>
                <div class="invalid-feedback">
                    Harap konfirmasi kata sandi Anda.
                </div>
            </div>
            <div class="form-group">
                <label>Jenis Kelamin</label>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="jenisKelamin" id="pria" value="pria" checked>
                    <label class="form-check-label" for="pria">Pria</label>
                </div>
                <div class="form-check">
                    <input class="form-check-input" type="radio" name="jenisKelamin" id="wanita" value="wanita">
                    <label class="form-check-label" for="wanita">Wanita</label>
                </div>
            </div>
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="syarat" required>
                <label class="form-check-label" for="syarat">Saya setuju dengan syarat dan ketentuan</label>
                <div class="invalid-feedback">
                    Anda harus setuju sebelum mengirim.
                </div>
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="namaDepan">Nama Depan</label>
                    <input type="text" class="form-control" id="namaDepan" placeholder="Nama Depan">
                </div>
                <div class="form-group col-md-6">
                    <label for="namaBelakang">Nama Belakang</label>
                    <input type="text" class="form-control" id="namaBelakang" placeholder="Nama Belakang">
                </div>
            </div>
            <div class="form-group">
                <label for="alamat">Alamat</label>
                <input type="text" class="form-control" id="alamat" placeholder="Alamat">
            </div>
            <div class="form-row">
                <div class="form-group col-md-6">
                    <label for="kota">Kota</label>
                    <input type="text" class="form-control" id="kota" placeholder="Kota">
                </div>
                <div class="form-group col-md-4">
                    <label for="provinsi">Provinsi</label>
                    <select id="provinsi" class="form-control">
                        <option selected>Pilih...</option>
                        <option>Jawa Barat</option>
                        <option>Jawa Timur</option>
                        <option>Jawa Tengah</option>
                    </select>
                </div>
                <div class="form-group col-md-2">
                    <label for="kodePos">Kode Pos</label>
                    <input type="text" class="form-control" id="kodePos" placeholder="Kode Pos">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">Daftar</button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.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.min.js"></script>
    <script>
        (function() {
            'use strict';
            window.addEventListener('load', function() {
                var forms = document.getElementsByClassName('needs-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>
</body>
</html>

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.