HTML Lanjutan | #2 Formulir Lanjutan

Formulir Lanjutan di HTML5

HTML5 memperkenalkan banyak fitur baru dalam pembuatan formulir yang memungkinkan validasi input langsung di browser tanpa JavaScript, menambahkan jenis input baru, serta memberikan saran input yang lebih interaktif menggunakan elemen <datalist>. Berikut adalah penjelasan dan contoh penerapannya.

Validasi Input dengan HTML5

Dengan HTML5, kita bisa memanfaatkan atribut seperti required, pattern, min, max, dan maxlength untuk memvalidasi input langsung di browser. Fitur ini membuat validasi lebih cepat dan ringan tanpa perlu bergantung pada JavaScript.

<form>
  <label for="email">Email (wajib diisi)</label>
  <input type="email" id="email" name="email" required>

  <label for="age">Usia (antara 18 dan 60)</label>
  <input type="number" id="age" name="age" min="18" max="60">

  <button type="submit">Kirim</button>
</form>

        

Elemen Input Baru di HTML5

HTML5 juga memperkenalkan beberapa jenis elemen input baru yang lebih spesifik dan mudah digunakan, seperti date, email, dan range. Ini mempermudah pengguna dan mengurangi kesalahan input.

Contoh Input Tanggal:

<label for="birthday">Tanggal Lahir</label>
<input type="date" id="birthday" name="birthday">

        

Contoh Input Email:

<label for="userEmail">Email Anda</label>
<input type="email" id="userEmail" name="userEmail" required>

        

Contoh Input Range:

<label for="volume">Volume Suara</label>
<input type="range" id="volume" name="volume" min="0" max="100">

        

Menggunakan <datalist> untuk Input yang Disarankan

Dengan elemen <datalist>, kita bisa menyediakan saran pilihan yang akan muncul saat pengguna mengetik di dalam input. Ini sangat berguna untuk mempercepat pengisian formulir atau memberikan opsi yang lebih terbatas.

<label for="browsers">Pilih Browser Favorit:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
  <option value="Google Chrome">
  <option value="Mozilla Firefox">
  <option value="Microsoft Edge">
  <option value="Safari">
</datalist>

        

Dengan elemen-elemen baru ini, pembuatan formulir di HTML5 menjadi lebih canggih, efisien, dan ramah pengguna. Cobalah fitur-fitur ini untuk membuat interaksi di halaman web Anda lebih menarik dan mudah digunakan.