Fitur Baru Form HTML5
Pembaruan Form di HTML5
HTML5 memperkenalkan banyak tipe input baru, atribut validasi bawaan, dan elemen pendukung yang memudahkan pembuatan formulir interaktif tanpa ketergantungan berlebih pada JavaScript.
1. Tipe Input Baru HTML5
Tipe input baru memberikan keyboard virtual yang sesuai di HP/Smartphone (seperti keyboard angka untuk input tel atau @ untuk input email).
<!-- Input Email (Otomatis memvalidasi format email) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<!-- Input Tanggal (Memunculkan Datepicker bawaan browser) -->
<label for="tgl">Tanggal Lahir:</label>
<input type="date" id="tgl" name="tgl_lahir">
<!-- Input Angka dengan Batas Minimal dan Maksimal -->
<label for="umur">Umur (18-60):</label>
<input type="number" id="umur" name="umur" min="18" max="60" step="1">
<!-- Input Warna (Memunculkan Color Picker) -->
<label for="warna">Warna Favorit:</label>
<input type="color" id="warna" name="warna_favorit" value="#0ea5e9">
<!-- Input Range (Slider) -->
<label for="volume">Volume (0-100):</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
<!-- Input URL (Memvalidasi format alamat web) -->
<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">
<!-- Input Telepon -->
<label for="hp">No HP:</label>
<input type="tel" id="hp" name="hp">
2. Atribut Validasi Bawaan HTML5
Dahulu, validasi form harus menggunakan JavaScript. HTML5 menyediakan atribut validasi bawaan browser:
| Atribut | Fungsi |
|---|---|
required |
Memaksa lapangan input wajib diisi sebelum form dikirim |
placeholder |
Teks petunjuk sementara di dalam kolom input |
autofocus |
Kursor otomatis aktif pada input tersebut saat halaman terbuka |
pattern |
Validasi input menggunakan ekspresi reguler (Regex) |
autocomplete |
Mengaktifkan/mematikan saran otomatis (on / off) |
multiple |
Mengizinkan pengguna memilih lebih dari 1 file/email |
Contoh penggunaan:
<form action="/daftar" method="POST">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required placeholder="Minimal 5 karakter" autofocus>
<label for="nim">NIM (8 Digit Angka):</label>
<input type="text" id="nim" name="nim" required pattern="[0-9]{8}" title="NIM harus terdiri dari 8 angka">
<button type="submit">Daftar</button>
</form>
3. Elemen Elemen Tambahan HTML5
Elemen <datalist> (Autocomplete Pilihan)
Menyediakan rekomendasi pilihan saat pengguna mengetik, namun pengguna tetap dapat menginput teks lain secara bebas.
<label for="browser">Browser Favorit Anda:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
<option value="Brave">
</datalist>
Elemen <progress>
Menampilkan indikator status kemajuan (progress bar).
<label for="file-progress">Unduhan File:</label>
<progress id="file-progress" value="70" max="100">70%</progress>
