INPUT EMAIL DI HTML

Input dengan type email digunakan untuk menerima masukan data berupa email.

<input type="email" />

Yang menghasilkan

Secara tampilan, tidak ada perbedaan antara input email dengan input text.

Perbedaan terletak pada saat melakukan validasi data nanti.

Contoh validasi input email

Untuk melihat fungsi input email, kita buat dulu form HTML yang lebih lengkap seperti ini

<form action="#">
    <input type='email'>
    <input type='submit'/>
</form>

Hasilnya

Sekarang coba masukkan text biasa, lalu ketik submit. Akan muncul pesan untuk memasukkan format email yang seharusnya.

Nilai awal pada input email

Untuk memberi nilai otomatis pada input email, gunakan atribut value.

<input type='email' value="hi@kodi.ng">

Hasilnya

Validasi email dengan format yang ditentukan

Untuk melihat fungsi input email yang divalidasi sesuai format tertentu, gunakan atribut pattern dengan sebuah aturan regular expression

<form action="#">
    <input type='email' pattern=".+@*\.com">
    <input type='submit'/>
</form>

Hasilnya

Sekarang, data yang kamu masukkan harus berformat AWAL@AKHIR.com. Awal dan Akhir boleh apa saja, namun tanda (@) dan (.) harus ada di sana.