Artikel

Soal Latihan dan Contoh Form Kontrol di Bootstrap 5

Coding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contoh Form Bootstrap 5</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="container mt-5">
    <h2>Kontrol Form di Bootstrap 5</h2>
    <form>
        <!-- Text input -->
        <div class="mb-3">
            <label for="inputText" class="form-label">Input Text</label>
            <input type="text" class="form-control" id="inputText" placeholder="Masukkan teks">
        </div>

        <!-- Password -->
        <div class="mb-3">
            <label for="inputPassword" class="form-label">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>

        <!-- Email -->
        <div class="mb-3">
            <label for="inputEmail" class="form-label">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="name@example.com">
        </div>

        <!-- Textarea -->
        <div class="mb-3">
            <label for="inputTextarea" class="form-label">Textarea</label>
            <textarea class="form-control" id="inputTextarea" rows="3"></textarea>
        </div>

        <!-- Checkbox -->
        <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="check1">
            <label class="form-check-label" for="check1">Check me out</label>
        </div>

        <!-- Radio button -->
        <div class="mb-3">
            <label class="form-label">Radio Buttons</label>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="radioOptions" id="radio1" checked>
                <label class="form-check-label" for="radio1">
                    Option 1
                </label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="radio" name="radioOptions" id="radio2">
                <label class="form-check-label" for="radio2">
                    Option 2
                </label>
            </div>
        </div>

        <!-- Dropdown -->
        <div class="mb-3">
            <label for="selectDropdown" class="form-label">Dropdown</label>
            <select class="form-select" id="selectDropdown">
                <option selected>Choose...</option>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
            </select>
        </div>

        <!-- Range slider -->
        <div class="mb-3">
            <label for="formRange" class="form-label">Range Slider</label>
            <input type="range" class="form-range" id="formRange">
        </div>

        <!-- Button -->
        <button type="submit" class="btn btn-primary">Submit</button>
    </form>
</div>
<!-- Bootstrap JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>

Gambar

Dokumentasi

https://getbootstrap.com/docs/5.3/forms/overview

Soal

Soal 1: Membuat Form Sederhana

Instruksi: Buatlah sebuah form sederhana untuk pendaftaran newsletter. Form tersebut harus memiliki:

Satu field input untuk memasukkan nama.
Satu field input untuk memasukkan alamat email.
Satu tombol submit dengan teks “Daftar”.

Kriteria Penilaian:

Penggunaan elemen form yang benar.
Penambahan label yang sesuai untuk setiap input field.
Responsivitas form.

Soal 2: Menggunakan Checkbox dan Radio Button

Instruksi: Buatlah sebuah form untuk survei minat baca. Form tersebut harus memiliki:

Pertanyaan “Genre buku apa yang Anda sukai?” dengan beberapa opsi checkbox (misalnya Fiksi, Non-Fiksi, Sains, dan Sejarah).
Pertanyaan “Berapa buku yang Anda baca dalam sebulan?” dengan opsi radio button (1-3, 4-6, 7+).

Kriteria Penilaian: