inputemailvalidasiMenengah3 mnt baca

Input Email Mendalam

Validasi email otomatis dari browser, keyboard khusus di HP, atribut multiple, dan contoh form newsletter yang benar.

Masalahnya: Validasi Email Manual Itu Melelahkan

Hampir setiap web butuh kolom email: pendaftaran, newsletter, checkout. Tanpa bantuan browser, kamu harus menulis JavaScript sendiri untuk mengecek formatnya, dan pengguna HP harus berpindah keyboard manual untuk mengetik "@". type="email" menyelesaikan kedua masalah itu dengan satu atribut: validasi format gratis plus keyboard yang tepat di HP.

Validasi Otomatis Browser

Saat form di-submit, browser mengecek apakah nilainya mirip alamat email. Kalau tidak, submit dibatalkan dan muncul pesan kesalahan bawaan.

html
<form>
  <label>Email kamu:
    <input type="email" name="email" required />
  </label>
  <button type="submit">Kirim</button>
</form>

Coba isi dengan "bukan-email" lalu submit: browser menolaknya. Isi dengan "[email protected]": lolos. Sederhana, tanpa satu baris JavaScript pun.

Tapi pahami batasnya: yang dicek browser hanya format, bukan kebenaran. "a@b" dianggap valid oleh browser padahal jelas bukan email sungguhan. Validasi browser itu lapisan UX (memberi tahu pengguna yang salah ketik lebih cepat), bukan lapisan keamanan. Server tetap wajib memvalidasi ulang.

Keyboard Khusus di HP

Bonus yang sering tidak disadari: di HP, type="email" memunculkan keyboard dengan tombol "@" dan "." yang mudah dijangkau. Bandingkan dengan type="text" yang memaksa pengguna berpindah ke halaman simbol keyboard. Untuk form yang dibuka mayoritas lewat HP, perbedaan kecil ini terasa besar.

Atribut multiple: Lebih dari Satu Email

Butuh kolom "undang teman" yang menerima beberapa email sekaligus? Tambahkan multiple:

html
<label>Undang teman (pisahkan dengan koma):
  <input type="email" name="teman" multiple
         placeholder="[email protected], [email protected]" />
</label>

Browser memvalidasi setiap alamat yang dipisahkan koma. Satu alamat rusak, seluruh field ditolak. Nilai yang terkirim tetap satu string berisi semua email.

Contoh Nyata: Form Newsletter

Gabungkan semuanya dalam form newsletter yang realistis:

html
<form action="/newsletter" method="post">
  <h2>Dapatkan tips coding tiap minggu</h2>
  <p>
    <label for="nl-email">Alamat email:</label><br />
    <input type="email" id="nl-email" name="email"
           placeholder="[email protected]"
           autocomplete="email"
           required />
  </p>
  <p>
    <button type="submit">Berlangganan</button>
  </p>
  <small>Kami tidak pernah membagikan emailmu. Berhenti kapan saja.</small>
</form>

Perhatikan detailnya: label terhubung lewat for/id (bukan cuma placeholder), required mencegah submit kosong, autocomplete="email" membiarkan browser menawarkan email tersimpan pengguna, dan method="post" karena ini aksi berlangganan yang mengubah data.

Kesalahan Umum: Salah vs Benar

html
<!-- SALAH: type text, tidak ada validasi dan keyboard HP biasa -->
<input type="text" name="email" placeholder="Email" />

<!-- SALAH: placeholder dijadikan satu-satunya label -->
<input type="email" name="email" placeholder="Alamat email kamu" />

<!-- BENAR: type email + label asli + required -->
<label>Alamat email:
  <input type="email" name="email" placeholder="[email protected]" required />
</label>

Kesalahan lain: menambahkan atribut pattern dengan regex email super ketat. Regex email yang benar-benar akurat itu panjang dan rumit; pattern yang terlalu ketat justru menolak email valid (misalnya domain baru yang panjang). Percayakan format dasar ke browser, dan lakukan pengecekan serius di server.

Catatan teknis: Validasi bawaan browser bisa dimatikan per form dengan novalidate pada <form> atau per tombol dengan formnovalidate. Berguna saat kamu mengganti validasi bawaan dengan JavaScript sendiri, tapi jangan matikan tanpa pengganti: form tanpa validasi sama sekali adalah undangan bagi data sampah.

Rangkuman

type="email" memberimu tiga hal gratis: validasi format saat submit, keyboard ramah email di HP, dan dukungan multiple untuk beberapa alamat. Pasangkan selalu dengan label asli dan required, dan ingat validasi server tetap tidak tergantikan.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Form Undang Teman

Buat form 'Undang Teman' dengan satu input email yang menerima beberapa alamat sekaligus (pisahkan koma), wajib diisi, dan punya label asli. Coba submit dengan satu alamat rusak untuk melihat validasi browser bekerja. Memahami multiple berguna untuk fitur kolaborasi apa pun.

<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <title>Undang Teman</title>
</head>
<body>
  <h1>Undang Teman</h1>
  <form action="/undang" method="post">
    <!-- input email multiple di sini -->
  </form>
</body>
</html>
Open on CodeSandboxOpen Sandbox