Atribut dan Validasi Baru Form HTML5

Validasi seperti required, valid, dan invalid dapat dilakukan pada HTML5

Berikut contoh kode penulisan untuk menguji Atribut dan Validasi Baru pada Form HTML5

:required {
    border: 3px solid blue;
}

:valid {
    border: 3px solid green;
}

:invalid {
    border: 3px solid red;
}

<label for="fRequired">Required Input</label>
<input type="text" id="fRequired" required>

<label for="fEmail">Email</label>
<input type="email" id="fEmail">

<label for="fNumber">Number with Min 5/Max 9</label>
<input type="number" id="fNumber" min="5" max="9">

<label for="fTel">Telephone w/placeholder</label>
<input type="tel" id="fTel" placeholder="Enter your phone number">

<label for="fPattern">Pattern (2 digits and 2 letters)</label>
<input type="text" id="fPattern" pattern="[0-9][0-9][a-Z][a-Z]">

hasilnya akan tampak sbb:

Required Input
Email
Number with Min 5/Max 9
Telephone w/placeholder
Pattern (2 digits and 2 letters)

Apa itu validasi form? Pergi ke situs populer dengan formulir pendaftaran, dan Anda akan melihat bahwa mereka memberi umpan balik saat Anda tidak memasukkan data Anda dalam format yang mereka harapkan. Anda akan mendapatkan pesan seperti:

"Bidang ini diperlukan" (Anda tidak dapat membiarkan bidang ini kosong) "Tolong masukkan nomor telepon anda dalam format xxx-xxxx" (ini ingin tiga angka diikuti dengan tanda hubung, diikuti oleh empat angka) "Harap masukkan alamat e-mail yang valid" (hal yang Anda masukkan tidak terlihat seperti alamat e-mail yang valid) "Kata sandi Anda harus antara 8 dan 30 karakter, dan berisi satu huruf besar, satu simbol, dan angka" (serius?) Ini disebut validasi formulir - saat Anda memasukkan data, aplikasi web akan memeriksa apakah sudah benar. Jika benar, aplikasi tersebut memungkinkan data dikirimkan ke server dan (biasanya) disimpan dalam database; jika tidak, itu memberi Anda pesan kesalahan untuk menjelaskan apa yang telah Anda lakukan salah (asalkan Anda melakukannya dengan benar). Form validasi bisa diimplementasikan dengan berbagai cara.

Yang benar adalah bahwa tidak satupun dari kita yang suka mengisi formulir - ada banyak bukti yang menunjukkan bahwa pengguna terganggu oleh bentuk, dan itu akan menyebabkan mereka pergi dan pergi ke tempat lain jika dilakukan dengan buruk.