Kode Praktis HTML5: Validasi Alamat URL pada Form

Subscribe channel BangHaji CotCom

Jika pada tulisan terdahulu (beberapa bulan yang lalu), dibahas tentang validasi alamat email pada form, maka kini kita bahas validasi alamat URL. Validasi di sini maksudnya adalah, setiap URL wajib dimulai dengan http://, jika tidak, maka akan dianggap tidak valid.

Kode praktis berikut ini memang memiliki kekurangan, yaitu, jika sudah diberikan http:// dan tanpa format yang benar maka sudah dianggap valid. Contohnya ketika mengisi seperti ini: http://banghaji, tetap bisa. Padahal seharusnya tidak bisa.

URL

Tetapi tidak apa-apa, sebagai bahan belajar bisa kita gunakan setidaknya agar yang mengisi form tersebut tidak meninggalkan http:// 😀

Berikut adalah kode untuk validasi URL, type yang digunakan adalah url.

<input type="url">

Contoh lengkap seperti ini, silahkan dicoba.

<!DOCTYPE HTML><html><head>   <title>Form URL</title></head><body>   <h1>Form URL</h1>   <form>      <fieldset>       <legend>Alamat Blog Anda</legend>         <p>            Masukkan alamat blog:            <input type="url" name="alamat_url">            <input type="submit" value="Kirim">         </p>    </fieldset>	    </form></body></html>

Setelah dijalankan, hasilnya kira-kira seperti gambar berikut ini.

Validasi URL HTML5

Meskipun masih ada kekurangan dalam validasinya, tetapi tidak ada salahnya jika validasi alamat URL ini dicoba 😉 minimal tambah ilmu tentang HTML 😎

Related Posts