Kotak text menerima apa saja — termasuk isian yang seharusnya alamat email tetapi ternyata tulisan acak. Dua tipe input berikut menutup celah itu: email dan url memvalidasi format isian secara bawaan, tanpa JavaScript dan tanpa atribut tambahan. Keduanya sudah Baseline di seluruh browser modern.

Bonus kecil yang sering luput: di ponsel, email memunculkan tombol @ langsung pada keyboard layar — kenyamanan yang tak ternilai untuk form yang mengisi cepat.

type email #

Aturannya: type="email" menghasilkan kotak khusus alamat email. Mekanismenya: saat form dikirim, browser memeriksa format isian — harus memuat @ dan domain yang masuk akal, misalnya [email protected]. Isian yang gagal diperiksa memunculkan pesan galat dan submit ditahan. Kotak ini juga menjadi kandidat isi-otomatis email oleh browser.

Atribut multiple melonggarkan satu kotak menjadi beberapa alamat sekaligus — dipisah tanda koma:

html 
<input type="email" id="kawan" name="kawan" multiple>

Pengguna dapat mengisi [email protected], [email protected] dan keduanya diperiksa formatnya satu per satu.

type url #

Aturannya: type="url" meminta alamat situs. Mekanismenya: saat form dikirim, browser memeriksa bahwa isian berbentuk URL yang sah — memuat skema seperti https://kedai.example.com. Isian tanpa skema, misalnya kedai.example.com saja, dianggap tidak sah pada banyak browser; tuliskan skemanya secara lengkap.

Contoh: Form Kontak #

Form kontak untuk menghubungi pengelola kelas kopi:

html 
<form action="/kontak" method="post">
  <label for="surel">Alamat email pengirim</label>
  <input type="email" id="surel" name="surel" required>
  <label for="situs">Alamat situs (opsional)</label>
  <input type="url" id="situs" name="situs" placeholder="https://kedai.example.com">
  <label for="kawan">Email teman yang diundang</label>
  <input type="email" id="kawan" name="kawan" multiple>
  <button type="submit">Kirim</button>
</form>

Data yang terkirim ketika Budi mengisi email dan satu teman, tanpa situs:

text 
surel=budi%40example.com&situs=&kawan=dewi%40example.com

Coba mengirim nilai yang sengaja salah: isi email tanpa @ — misalnya budi-example.com — lalu tekan Kirim; bubble galat format email muncul dan form ditahan. Setelah email diperbaiki, isi kotak situs dengan kedai.example.com polos tanpa skema: kotak url ikut menolaknya.

Pada demo, action diarahkan ke https://example.com/kontak — domain cadangan resmi — dan skrip kecil menahan perpindahan supaya pasangan name=value yang terkirim terlihat di halaman, persis kiriman yang diterima server; markup formnya sama persis dengan contoh di atas.

Mari kita telaah kode dan hasilnya:

  1. Baris 3 (type="email" required): submit ditahan bila format salah atau kotak kosong — pesan galat bawaan browser yang muncul.
  2. Baris 5 (type="url" tanpa required): kotak opsional — dibiarkan kosong tetap sah, dan nilai kosongnya tetap terkirim sebagai situs=.
  3. Baris 7 (multiple): satu kotak menampung beberapa alamat dipisah koma; setiap alamat diperiksa formatnya.
  4. %40 pada hasil: tanda @ dienkode saat pengiriman — sama seperti pada chapter sebelumnya.

Ringkasan #

  • email memvalidasi format alamat dan memunculkan tombol @ di keyboard ponsel.
  • url memvalidasi format URL, termasuk skema seperti https://.
  • multiple memungkinkan beberapa email dalam satu kotak, dipisah koma.
  • Validasi browser menyaring format; kebenaran alamat tetap diverifikasi di server.

Chapter berikutnya pindah ke angka: kotak isian presisi dan slider range.