BAB 4 • FORM LANJUTAN & INTERAKSI DATA

<FORM>

HTML5

INPUT

VALID

CSS

FORM LANJUTAN & INTERAKSI DATA

FRONT END MASTERCLASS

Kelas 10 | Semester 1 | HTML5 Forms, Validation & Styling

Selamat datang di modul lanjutan! Di bab ini kamu akan menguasai HTML5 Form Validation, tipe input modern, elemen profesional, Form Registrasi Sekolah, hingga styling form dengan CSS. 🚀

▼ Klik tombol NEXT, panah layar ❯, scroll wheel, atau geser kursor

PETA PERJALANAN

🗺️ Peta Materi BAB 4

Inilah 7 pulau pengetahuan interaktif yang akan kita jelajahi. Klik NEXT untuk mulai!

MATERI 1 • REVIEW BAB 3 & HTTP METHOD

🔄 Review BAB 3 & Pengiriman Data (GET vs POST)

Di Bab 3 kita membuat tampilan <form> dasar. Di Bab 4, kita belajar ke mana dan bagaimana data form itu dikirim ke server!

Review BAB 3: Form & Tag HTML Dasar

Materi BAB 3 (HTML Dasar):
Kalian telah mempelajari kerangka <html>, <body>, serta tag dasar seperti <form>, <label>, <input>, dan <button>.
Keterbatasan di BAB 3:
Form di Bab 3 baru sebatas tampilan visual (UI) di layar. Data belum diproses atau dikirim ke mana-mana.

<!-- Form Dasar BAB 3 (Hanya Tampilan UI) -->
<form>
  <label>Nama:</label>
  <input type="text">
  <button>Submit</button>
</form>

Materi Baru BAB 4: HTTP Method GET vs POST

method="GET" → Data ditempel di URL query string:
domain.com/search?q=sekolah
Cocok untuk pencarian, bookmarkable, data terlihat di URL.
method="POST" → Data dikirim tersembunyi di Body Request HTTP:
Payload: { email, password, foto }
Wajib untuk registrasi, login, upload file, & data rahasia.

<!-- Form BAB 4 (Dengan Action & Method POST) -->
<form action="/daftar" method="POST">
  <label>Email:</label>
  <input type="email" name="email">
  <button>Daftar</button>
</form>

MATERI 2 • HTML5 INPUT TYPES

📱 HTML5 Input Type Lanjutan

HTML5 menyediakan berbagai tipe input pintar yang otomatis menyesuaikan virtual keyboard di HP dan melakukan validasi awal!

<!-- Email & Angka -->
<input type="email" name="email">
<input type="number" name="umur">

<!-- Tanggal & File -->
<input type="date" name="tgl">
<input type="file" name="foto">

<!-- Range & Warna -->
<input type="range" min="0" max="100">
<input type="color">

email → Keyboard muncul tombol @
number → Keyboard berubah mode keypad angka
date → Otomatis memunculkan widget Datepicker
file → Tombol milih dokumen/foto dari peranti
range → Slider geser nilai min s/d max

DEMO LANGSUNG — silakan coba interaksi!

MATERI 3A • ATRIBUT VALIDASI TEKS & ANGKA

🛡️ Atribut Validasi: required, min/maxlength, min/max, & pattern

Validasi instan tanpa JavaScript untuk membatasi isian wajib, jumlah karakter, dan rentang nilai angka.

1. required & minlength / maxlength

required → Memaksa kolom harus diisi (ditolak jika kosong).
minlength & maxlength → Batas jumlah karakter min & max.

<!-- Kolom Wajib & Panjang Karakter -->
<label>Nama Lengkap *</label>
<input type="text" name="nama" required>

<label>Password (8-20 Karakter) *</label>
<input type="password" minlength="8" maxlength="20" required>

2. min / max & pattern

min & max → Batas nilai angka minimal & maksimal.
pattern → Validasi format regex (misal digit No HP).

<!-- Rentang Angka & Pattern RegEx -->
<label>Umur Siswa (10 - 100)</label>
<input type="number" min="10" max="100" required>

<label>No HP (10 - 13 Digit Angka)</label>
<input type="tel" pattern="[0-9]{10,13}" required>

MATERI 3B • KONTROL STATE INPUT

⚙️ Atribut State Input: disabled vs readonly

Mengontrol keaktifan input dan perilaku pengiriman data ke server.

1. Atribut disabled (Non-Aktif)

disabled → Menonaktifkan elemen input.
Pengguna tidak bisa mengklik/mengisi kolom.
⚠️ Nilai input TIDAK DIKIRIM ke server saat submit form.

<!-- Input Disabled (Diabaikan Server) -->
<label>Status Akun</label>
<input type="text" value="Dikunci Admin" disabled>

2. Atribut readonly (Hanya-Baca)

readonly → Kolom hanya bisa dibaca (dilihat).
Pengguna tidak bisa mengubah isinya.
✅ Nilai input TETAP DIKIRIM ke server saat submit form.

<!-- Input Readonly (Tetap Terkirim) -->
<label>Nomor Registrasi</label>
<input type="text" name="id_reg" value="REG-2026-X8" readonly>

MATERI 3C • SELEKSI DEFAULT

☑️ Atribut Seleksi: checked & selected

Menentukan pilihan default yang aktif secara otomatis saat halaman web dibuka.

1. Atribut checked (Radio / Checkbox)

checked → Tercentang otomatis sejak awal.
Digunakan pada <input type="checkbox"> & <input type="radio">.

<!-- Checkbox & Radio Checked Default -->
<input type="checkbox" name="syarat" checked> Setuju Syarat
<input type="radio" name="jk" value="L" checked> Pria

2. Atribut selected (Option Dropdown)

selected → Opsi terpilih pada tag <select>.
Opsi bertanda selected langsung muncul di kotak dropdown.

<!-- Option Selected Default -->
<select name="jurusan">
  <option value="RPL" selected>RPL (Selected Default)</option>
  <option value="TKJ">TKJ</option>
</select>

MATERI 3D • TIPE INPUT VALIDASI

📱 Tipe Input & Validasi Format Otomatis

Validasi bawaan browser yang dipicu oleh atribut type="" pada elemen input.

1. type="email" & type="url"

email → Browser menguji format email (rifqi@gmail.com ✅ vs ❌ rifqi@gmail tanpa domain).
url → Browser menguji awalan protokol (http:// / https://).

<!-- Input Email & URL -->
<input type="email" name="email" required>
<input type="url" name="web" placeholder="https://...">

2. type="number", "date", & "tel"

number → Hanya menerima digit angka + keypad HP.
date → Widget datepicker & format ISO valid.
tel → Input nomor HP (dipadu pattern).

<!-- Input Number, Date, & Tel -->
<input type="number" min="1" max="100">
<input type="date" name="tgl">
<input type="tel" pattern="[0-9]{10,13}">

MATERI 3E • CONCEPT & HANDLING ERROR

🚨 Client-Side vs Server-Side & Handling Error

Memahami arsitektur validasi browser, keamanan backend server-side, dan pesan error browser.

1. Client-Side vs Server-Side

HTML5 Validation bekerja di sisi browser pengguna (Client-Side). Pengguna mendapat pesan kesalahan seketika sebelum data dikirim lewat jaringan.

⚠️ Catatan Security RPL: Validasi Client-Side (HTML5) dapat di-bypass pengguna via Inspect Element DevTools. Website profesional WAJIB memvalidasi ulang di Server-Side (Backend PHP/Laravel/Node.js).

// Contoh Server-Side Validation (PHP Backend)
$request->validate([ 'email' => 'required|email' ]);

2. Skenario Error & Pesan Peringatan Browser

❌ Username Kosong (required)
👉 Browser: "Please fill out this field."

❌ Email Tanpa Domain (type="email", rifqi@gmail)
👉 Browser: "Please include a '.' after domain..."

❌ Password < 8 Karakter (minlength="8")
👉 Browser: "Please lengthen this text to 8 chars..."

❌ No HP Berisi Huruf (pattern="[0-9]{10,13}")
👉 Browser: "Please match the requested format."

MATERI 3F • DEMO INTERAKTIF

🧪 Live Demo Uji Validasi & State Input

Cobalah mengosongkan kolom, memilih status input, lalu klik tombol SUBMIT!

DEMO FRAME FORM VALIDASI & STATE CONTROL

MATERI 4 • ELEMEN FORM PROFESIONAL

💼 Elemen Form Tingkat Lanjut

Buat formulir sekelas aplikasi profesional dengan <optgroup>, autocomplete <datalist>, dan <fieldset>.

Tag Form Profesional

<!-- Select dengan Pengelompokan -->
<select>
  <optgroup label="Teknik">
    <option>RPL</option>
    <option>TKJ</option>
  </optgroup>
</select>

<!-- Autocomplete Datalist -->
<input list="kota-list">
<datalist id="kota-list">
  <option value="Bandung">
  <option value="Jakarta">
</datalist>

<!-- Fieldset & Legend -->
<fieldset>
  <legend>Data Pribadi</legend>
  <textarea></textarea>
</fieldset>

DEMO ELEMEN PROFESIONAL

MATERI 5 • PROJECT FORM REGISTRASI

📝 Project: Form Pendaftaran Siswa Baru

Menggabungkan 10 field esensial lengkap dengan HTML5 validation dalam 1 formulir profesional!

Checklist 10 Field Required

Nama Lengkap (text + required)

Email Aktif (email + required)

Nomor HP (tel + pattern angka)

Tanggal Lahir (date)

Jenis Kelamin (radio pria/wanita)

Jurusan Pilihan (select option)

Upload Pasfoto (file image)

Alamat Rumah (textarea)

Password & Konfirmasi (minlength=8)

PREVIEW LIVE FORM REGISTRASI SISWA

MATERI 7 • MULTIMEDIA

🎵 Audio & 📺 Video HTML5

Menyajikan media suara dan gambar bergerak langsung di dalam website tanpa perlu plugin tambahan.

Tag <audio>

<audio controls autoplay loop>
  <source src="musik.mp3" type="audio/mpeg">
  Browser tidak mendukung audio.
</audio>

Tag <video>

<video controls width="100%" poster="sampul.jpg">
  <source src="video.mp4" type="video/mp4">
</video>

MATERI 7 • EMBEDDING

🪟 Iframe — Jendela Web & Peta Interaktif

Atribut Kunci Iframe

src → Alamat URL halaman/media yang disematkan.
width & height → Dimensi ukuran jendela iframe.
loading="lazy" → Memuat iframe hanya saat discroll.
sandbox → Membatasi izin akses demi keamanan.

<iframe
  src="https://www.openstreetmap.org/..."
  width="100%" height="220"
  loading="lazy">
</iframe>

DEMO PETA EMBED INTERAKTIF

STRUKTUR WEB • LANDING PAGE

🎯 Integrasi Form di Landing Page

Landing Page = halaman satu tujuan yang biasanya berisi penawaran produk + form pendaftaran cepat.

HEADER — Logo + Menu Navigasi

HERO — Judul Ajakan + Tombol CTA

FEATURES — Keunggulan Produk

FORM SECTION — Pendaftaran Cepat

FOOTER — Kontak & Hak Cipta

PREVIEW LANDING PAGE + FORM

STRUKTUR WEB • COMPANY PROFILE

🏢 Company Profile & Form Kontak

Company Profile menjelaskan profil perusahaan, layanan, tim, dan menyediakan Form Kontak / Buku Tamu.

ABOUT — Profil & Sejarah Perusahaan

SERVICES — Layanan & Produk

PORTFOLIO — Galeri Hasil Karya

CONTACT FORM — Pesan & Lokasi Peta

Landing Page vs Company Profile

Landing Page: Fokus 1 aksi cepat (daftar/beli instan).
Company Profile: Menyajikan informasi lengkap jangka panjang.
Form di Landing → Singkat (Email & Nama).
Form di Company Profile → Form Kontak Lengkap (Alamat & Pesan).

MINI PROJECT SHOWCASE

🌟 Mini Project — Web Interaktif Ber-Form

Contoh hasil akhir gabungan HTML Form Lanjutan, Validasi, Multimedia, dan Styling CSS!

CONTOH PROJEK INTERAKTIF

Arsitektur Komponen

<header> → Identitas nama & foto profil.
<section> Form Kontak → `
` validasi bawaan.
<section> Media → `
<footer> → Hak cipta & link sosial media.

TUGAS 1

📋 Buat Form Pendaftaran Online Ber-validasi

Instruksi Tugas

Buat 1 file HTML bernama pendaftaran.html.
Sediakan minimal 8 field isian yang berbeda.
Wajib menggunakan: required, email, tel (pattern), date, select, radio/checkbox, & textarea.
Tutup dengan tombol Kirim/Submit.

Kriteria Penilaian

Struktur HTML semantik & rapi (25%)
Kelengkapan 8 field + variasi tipe input (35%)
Penerapan HTML5 Form Validation (25%)
Setiap input memiliki label yang sesuai (15%)

Pengumpulan

File: pendaftaran.html

Validasi aktif di browser

Tenggat: 1 Minggu

TUGAS 2

🎯 Landing Page + Form & Multimedia

Instruksi Tugas

Buat file landing.html dengan tema bebas (Kafe, Game, Klub Sekolah).
Wajib memiliki 5 section semantik: Header, Hero, Fitur, Form Registrasi, Footer.
Sisipkan minimal 1 media (`