Press "Enter" to skip to content

Kode Praktis HTML5: Validasi Alamat Email pada Form

Published in HTML and Kode Praktis

Ketika mengisi formulir online biasanya ada kolom untuk mengisi alamat email, dan ketika kita salah menuliskan format email akan ada pesan bahwa formatnya salah. Banyak yang menggunakan script pemrograman seperti PHP atau JavaScript untuk melakukan validasi email ini.

Pada tulisan ini kita akan gunakan kode praktis menggunakan HTML5. Saat saya ujicoba menggunakan 2 browser yang berbeda, terlihat pula ada perbedaan pesan validasi. Tetapi intinya tetap sama, jika format email yang dimasukkan itu salah, maka akan muncul pesan pemberitahuan.

Validasi tanda @ (at)

Validasi email ini didasarkan pada ada atau tidaknya tanda @ (at) sebagai bagian dari format alamat email yang valid.

Berikut adalah contoh penerapan validasi email pada form menggunakan HTML5:

<!DOCTYPE HTML>
<html>
<head>
   <title>Validasi Alamat Email</title>
</head>
<body>
   <h1>Validasi Alamat Email pada HTML5</h1>
   <form>
      <fieldset>
         <legend>Alamat Email:</legend>
         Entri alamat email yang valid
         <input type="email" name="email">
         <input type="submit" value="Kirim">
      </fieldset>	 
   </form>
</body>
</html>

Tampilan validasi menggunakan browser Google Chrome seperti ini:

Validasi alamat email di Google Chrome

Dan validasi menggunakan browser mozilla Firefox seperti ini:

Validasi alamat email di Mozilla Firefox

Demikian, semoga bermanfaat, salam kode praktis 😎

2 Comments

  1. […] Kode praktis kita kali ini digunakan untuk validasi form tingkat pertama, maksudnya, cara paling mudah untuk melakukan validasi apakah sebuah kolom (form) sudah terisi atau belum. Sekali lagi ini untuk memalidasi apakah sudah terisi atau belum, bukan memalidasi kebenaran format isian. Untuk validasi format isian ada pada tulisan lain, salah satu contohnya adalah validasi alamat email. […]

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *