Tujuan Pembelajaran

Peserta mampu:

1. Membuat form profesional.
2. Membuat form login.
3. Membuat form pendaftaran.
4. Menggunakan validasi dasar Bootstrap.

---

A. Apa Itu Form?

Form digunakan untuk menerima input dari pengguna.

Contoh:

• Login
• Registrasi
• Input Data Siswa
• Input Barang Kasir

---

B. Input Text

<div class="mb-3">

<label class="form-label">

Nama Lengkap

</label>

<input type="text"
class="form-control">

</div>

---

Praktik 1

Form Biodata

<div class="container">

<div class="mb-3">

<label class="form-label">

Nama

</label>

<input type="text"
class="form-control">

</div>

<div class="mb-3">

<label class="form-label">

Alamat

</label>

<textarea class="form-control">
</textarea>

</div>

</div>

---

C. Select Box

<select class="form-select">

<option>RPL</option>
<option>TKJ</option>
<option>DKV</option>

</select>

---

D. Radio Button

<div class="form-check">

<input class="form-check-input"
type="radio">

<label class="form-check-label">

Laki-Laki

</label>

</div>

---

E. Checkbox

<div class="form-check">

<input class="form-check-input"
type="checkbox">

<label class="form-check-label">

Saya setuju

</label>

</div>

---

Praktik 2

Form Pendaftaran Siswa

Buat form yang terdiri dari:

• Nama Lengkap
• Alamat
• Jurusan
• Jenis Kelamin
• Persetujuan

---

F. Validasi Bootstrap

<input type="text"
class="form-control is-valid">

<input type="text"
class="form-control is-invalid">

---

Praktik 3

Simulasi Validasi

Buat form login dengan:

• Username valid
• Password invalid

---

Latihan Bab

1. Apa fungsi form-control?
2. Apa fungsi form-select?
3. Apa fungsi form-check?
4. Apa fungsi is-valid?
5. Apa fungsi is-invalid?

---

Tugas Praktik Bab

Buat Form Pendaftaran Ekstrakurikuler yang terdiri dari:

• Nama
• Kelas
• Jurusan
• Pilihan Ekskul
• Tombol Daftar