Apa itu validasi formulir html5?

tidak memvalidasi

atribut novalidate digunakan dalam tag formulir untuk menonaktifkan validasi Formulir berbasis HTML5. Setelah menggunakan novalidate dalam tag formulir, validasi berbasis wajib dan jenis tidak akan berfungsi. Kita perlu menggunakan validasi formulir javascript setelah menggunakan atribut novalidate

Bentuk tanpa novalidasi

<form>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Bentuk dengan novalidate

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Fokus otomatis

atribut fokus otomatis fokus pada kontrol formulir tunggal saat memuat halaman. fokus otomatis hanya dapat digunakan sekali dalam satu halaman web. Pastikan elemen fokus otomatis terlihat di area pandang saat memuat halaman

     
<label>Search: <input type="search" autofocus></label>

            

Placeholder

atribut placeholder menunjukkan beberapa petunjuk dalam kontrol input. Nilai placeholder akan hilang saat fokus atau tombol ditekan. Kontrol yang didukung untuk placeholder adalah kontrol input dan textarea. Warna default placeholder adalah lightgray, mis. dan (#999)

Placeholder di masukan

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

Placeholder di textarea

<label>Query: <textarea placeholder="Query"><textarea></label>       
            

Pelengkapan otomatis

atribut pelengkapan otomatis dapat menampilkan atau menyembunyikan cache browser pada keyup. Nilai default pelengkapan otomatis aktif. Tetapi pelengkapan otomatis tidak aktif dapat menonaktifkan cache browser

Nilai pelengkapan otomatis

• aktif (Bawaan)
• mati

Pelengkapan otomatis aktif

Pelengkapan otomatis nonaktif

            
<label>Name: <input type="text" placeholder="Enter Name"></label>

<label>Name: <input type="text" placeholder="Enter Name" autocomplete="off"></label>
            

Yg dibutuhkan

atribut yang diperlukan adalah atribut boolean yang digunakan untuk menambahkan validasi dalam kontrol formulir seperti input, textarea, kontrol radio, kotak centang, dan pilih dropdown. Dengan persyaratan, kontrol formulir kosong tidak dapat mengirimkan data

Diperlukan dalam masukan

<form>            
<label>Name: <input type="text" placeholder="Enter Name" required><label>
</form>    
            

diperlukan di kotak centang

. Saya setuju

<form>            
<label>Terms <input type="checkbox" required></label>    
</form>    
            

diperlukan dalam tombol radio

. Pria. Perempuan

<form>            
<label><input type="radio" name="gender" required> Male</label>      
<label><input type="radio" name="gender" required> Female</label> 
</form>    
            

diperlukan dalam pilih dropdown

Pilih Kota.

<form>            
<select aria-label="City" required>
<option value="" selected disabled>--Choose City--</option>
<option>New Delhi</option>
<option>Chennai</option>
<option>Mumbai</option>
<option>Kolkata</option>
</select>
</form>    
            

Pola

Buat ekspresi reguler JavaScript untuk kontrol input dan textarea. Regex dapat digunakan untuk memvalidasi kode pin, no kartu debit/kredit, no cvv, pin atm dll

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Panjang min

Akan mengirimkan formulir hanya jika kolom ini diisi dengan minimal n karakter

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Hanya baca

Kontrol dengan atribut readonly dapat dibaca oleh pengguna, tetapi tidak seperti menonaktifkan, ia dapat mengirim data ke server web. menonaktifkan tidak dapat mengirim data ke server

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

daftar

atribut daftar digunakan untuk menautkan tag datalist dengan kontrol input. Nilai datalist ditampilkan sebagai petunjuk pada keyup

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

masukan nomor tipe

nomor tipe input digunakan untuk memasukkan hanya nomor dari pengguna. Misalnya umur, jumlah, dll. atribut min dan max juga digunakan dengan nomor tipe input. langkah dapat meningkatkan nilai langkah, nilai langkah default adalah 1

nomor tipe input dapat mengubah tata letak keyboard pada smartphone seperti Android dan Iphone

Nomor Jenis Masukan

Masukkan nomor apa pun

Nomor Jenis Input dengan min dan maks

Masukkan Usia antara 1 dan 90

Masukkan Nomor Jenis dengan langkah

Pilih no genap

Pilih angka antara 1 sampai 5

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Tata Letak Keyboard di Android dan iOS

Email jenis masukan

jenis input email digunakan untuk mendapatkan id email dari pengguna. Pola default untuk id email adalah

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Tata Letak Keyboard di Android dan iOS

Jenis masukan telp

tipe input tel digunakan untuk memasukkan no telepon (telepon rumah, ponsel atau virtual) dari pengguna. Tidak ada pola bawaan untuk nomor telepon. Kami dapat menggunakan pola khusus negara untuk validasi

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Tata Letak Keyboard di Android dan iOS

Pencarian jenis masukan

pencarian tipe input digunakan untuk kotak pencarian saja. Ini terlihat mirip dengan teks tipe input tetapi dengan tombol silang opsional di kanan di beberapa browser

Mencari

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Tata Letak Keyboard di Android dan iOS

URL jenis masukan

input type url digunakan untuk memasukkan url website. URL harus menyertakan protokol ( HTTP atau HTTPS)

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Tata Letak Keyboard di Android dan iOS

Tanggal jenis masukan

tipe input tanggal digunakan pilih tanggal yang valid dari pengguna. Browser Chrome, Edge, opera, Firefox, Safari, Android dan iOS juga menampilkan kalender datepicker dalam jenis input tanggal, tetapi browser IE belum mendukung kalender datepicker

Browser yang mendukung tanggal jenis masukan

1. Chrome
2. kromium
3. Tepi (12 ke atas)
4. Chromium tepi
5. Firefox
6. Safari (14 ke atas)

Peramban tidak mendukung tanggal jenis masukan

1. Safari (13 ke bawah)
2. IE (semua versi)

<form novalidate>        
    <label>Name: <input type="text" required></label>
    <input type="submit"> 
</form>
            

Tanggal Jenis Input dengan min dan maks

     
<label>Search: <input type="search" autofocus></label>

            

Tata Letak Keyboard di Android dan iOS

Bulan jenis masukan

jenis input bulan digunakan memilih bulan yang valid dari pengguna. Chrome, Edge, opera, android dan ios juga menampilkan datepicker

     
<label>Search: <input type="search" autofocus></label>

            

masukan jenis bulan dengan min dan max

     
<label>Search: <input type="search" autofocus></label>

            

Tata Letak Keyboard di Android dan iOS

Minggu jenis masukan

jenis input minggu digunakan memilih nomor minggu yang valid dari pengguna. Chrome, Edge, opera, android dan ios juga menampilkan datepicker dengan minggu no

     
<label>Search: <input type="search" autofocus></label>

            

masukan jenis minggu dengan min dan max

     
<label>Search: <input type="search" autofocus></label>

            

Tata Letak Keyboard di Android dan iOS

Waktu jenis masukan

jenis input waktu digunakan memilih waktu yang valid dari pengguna dalam format 12 jam

     
<label>Search: <input type="search" autofocus></label>

            

jenis input waktu dengan min dan maks

     
<label>Search: <input type="search" autofocus></label>

            

jenis masukan waktu dengan langkah

     
<label>Search: <input type="search" autofocus></label>

            

Tata Letak Keyboard di Android dan iOS

Jenis input datetime-local

tipe input datetime-local digunakan memilih tanggal dan waktu yang valid dari pengguna dalam format 12 jam

     
<label>Search: <input type="search" autofocus></label>

            

ketik input datetime-local dengan min dan maks

     
<label>Search: <input type="search" autofocus></label>

            

Tata Letak Keyboard di Android dan iOS

Warna jenis masukan

warna tipe input digunakan memilih warna dari pengguna. Chrome, android, dan opera menampilkan pemilih warna, tetapi browser lain tidak

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

Tata Letak Keyboard di Android dan iOS

Rentang jenis masukan

rentang tipe input digunakan memilih rentang angka. min dan max digunakan untuk menentukan nilai rentang

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

rentang tipe masukan dengan langkah

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

rentang jenis input dengan tanda hash

<label>Name: <input type="text" placeholder="Enter Name"></label>        
            

Tanda Meteran

HTML5 Meter digunakan untuk menampilkan ukuran. Meter ini akan berwarna hijau jika nilainya lebih besar dari tinggi, kuning jika nilainya berada di antara tinggi dan rendah, dan merah jika nilainya kurang dari rendah

Kemajuan

Menampilkan kemajuan penyelesaian tugas

Daftar data

HTML5 Datalist digunakan untuk menambahkan datalist dengan input type text

<label>Name: <input type="text" placeholder="Enter Name"></label>