Mudahnya Membuat Form Validation HTML5

Form Validation digunakan untuk validasi data yang diinputkan user kedalam form tertentu. Jika data yang dimasukkan tidak sesuai dengan format yang telah ditentukan maka secara otomatis akan keluar pesan eror.

Pada postingan  kali ini admin akan mencoba berbagi Mudahnya Membuat Form Validation HTML5. Kenapa menggunakan HTML5?Karena dengan Menggunakan HTML5 pembuatan form validation akan lebih cepat, selain itu, dengan menggunakan HTML5 lebih irit coding dan efektif.

Berikut beberapa contoh Form Validation dengan menggunakan HTML5.

Souce Code :

<input type="text" placeholder="wajib diisi" required />

Keterangan : Contoh di atas merupakan form validation yang digunakan untuk validasi bahwa text box wajib diisi, jika tidak diisi maka akan muncul pesan "Please Fill Out This Field"

Souce Code :

<input type="email" placeholder="Email"/>

Keterangan : Contoh di atas merupakan form validation yang digunakan untuk validasi bahwa text box harus diisi sesuai dengan aturan penulisan email

 Souce Code :

<input type="url" placeholder="URL dengan HTTP"/>

Keterangan : Contoh di atas merupakan form validation yang digunakan untuk validasi bahwa text box harus diisi sesuai dengan aturan penulisan url yang diawali dengan HTTP

Source Code:

<input type="date"/><br>

Keterangan : Contoh di atas merupakan form validation yang digunakan untuk validasi bahwa text box harus diisi sesuai dengan aturan penulisan date atau tanggal. Tapi jangan kawatir akan melakukan kesalahan karena jika text box tersebut diklik secara otomatis akan muncul kalender. Untuk memasukkan date atau tanggal tinggal klik date atau tanggal sesuai kebutuhan.

Berikut beberapa contoh lainnya, silahkan coba sendiri :

<input type="text" maxlength="10"  placeholder="Maksimal karakter adalah 10"/>

<input type="datetime"/>

<input type="datetime-local"/>

<input type="month"/>

<input type="time"/>

<input type="week"/>

<input type="number" min="1″ max="10″/>

<input type="text" pattern="[1-9]{5}"/>

Demikian postingan Mudahnya Membuat Form Validation HTML5, semoga bermanfaat dan terimakasih.