contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Validasi Form dengan HTML5

Posted in HTML & CSS Life at 04 Januari 2017 With 0 Comments

Membuat Validasi Form dengan HTML5 Lengkap , Setelah sebelumnya Suckittrees dot Com menulis tentang Validasi Form dengan Javascript kali ini kita akan membahas validasi dengan HTML5 , Validasi dengan menggunakan HTML5 merupakan validasi yang berjalan disisi client, tidak menggunakan javascript maupun menggunakan jquery , sayang nya sampai saat ini masih ada browser yang belum support dengan HTML 5, namun ini adalah keunggulan dari HTML5. dan sesuai perkembangan teknologinya,,, browser akan menyesuaikan dengan HTML 5, sampai ke mobile / smartphone

Validasi yang kita bahasi diantaranya

▼ .................. ▼


- validasi input huruf saja , dengan menggunakan HTML5, kita bisa membatasi akses inputan hanya berupa huruf
- validasi nomor / angka saja , dengan HTML5 , kita bisa memberikan akses input hanya angka / nomor

untuk yang lain.. yuk kita simak tutorial dibawah ini :

Cara Validasi FORM Dengan Menggunakan HTML5

Beberapa tipe validasi form dengan HTML 5 yang harus anda ketahui yaitu :

validasi huruf saja dengan HTML5

1.  Letters
pattern="[A-Za-z]+" accepts only capital or small letters. , ya ,, bisa digunakan  untuk validasi karakter saja berupa huruf kecil dan basar.

<form>
<input type="text" pattern="[A-Za-z]+" title="letters only" required />
<input type="submit" />
</form>

Baca Juga

Validasi Nomor / angka saja dengan HTML5

2. numbers :
pattern="[0-9]+" accepts only numbers 0, 1, 2....  ..., validasi ini memungkinkan inputan berupa angka numerik

<form>
<input type="text" pattern="[0-9]+" title="only letters" required />
<input type="submit" />
</form>

Validasi Email dengan HTML5

3. Email
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" accepts valid email address

<form>
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="xyz@something.com" required />
<input type="submit" />
</form>

Validasi Password dengan HTMl5

4. Password
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" accepts one number one upper and lower case letters with 8 or more chars.

<form>
<input type="password" name="pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title="at least one number and one uppercase and lowercase letter, and at least 8 or more characters" required />
<input type="submit" />
</form>

Validasi Input URL dengan HTML5

5. URL
pattern="https?://.+" required title="http://ebsof.blogspot.com" accepts valid web url starting with http://.

<form>
<input type="url" name="website" pattern="https?://.+" required title="http://ebsof.blogspot.com" />
<input type="submit" />
</form>

Validasi Input No Handphone / Telephone Dengan HTML5

6. Phone No
pattern="^\d{12}$" accepts only numeric values with 12 digit.

<form>
<input type="tel" pattern="^\d{12}$" title="12 numeric characters only" required />
<input type="submit" />
</form>

Validasi Gabungan angka dan number dengan HTML5

7. Alpha Numerik
pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" accepts alphanumeric values letters and digits.

<form>
<input type="text" pattern="^[a-zA-Z][a-zA-Z0-9-_\.]{5,12}$" title="alphanumeric 6 to 12 chars" />
<input type="submit" />
</form>

 

 Code diatas dapat anda implementasikan untuk validasi Fom dengan HTML5, untuk validasi type file image anda dapat membaca artikel saya Validasi Upload Gambar dengan HTML5

Artikel Rekomendasi



Artikel Terkait

Diskusi