The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

Membuat Formulir yang Mengagumkan

Formulir sulit diisi pada perangkat seluler. Formulir terbaik adalah formulir dengan masukan paling sedikit. Formulir yang baik menyediakan tipe masukan semantik. Kunci harus berubah sesuai jenis masukan pengguna; pengguna memilih tanggal di kalender. Selalu beri tahu pengguna. Alat validasi harus memberi tahu pengguna apa yang harus mereka lakukan sebelum mengirimkan formulir.

Mendesain formulir efisien

Mendesain formulir efisien dengan menghindari tindakan yang berulang, hanya meminta informasi yang diperlukan dan memandu pengguna dengan menunjukkan seberapa jauh mereka dalam formulir multi-bagian.

TL;DR

  • Gunakan data yang ada untuk mengisi bidang dan pastikan untuk mengaktifkan isi-otomatis.
  • Gunakan bilah kemajuan yang dilabeli dengan jelas untuk membantu pengguna melalui formulir multi-bagian.
  • Sediakan kalender visual sehingga pengguna tidak perlu meninggalkan situs Anda dan berpindah ke aplikasi kalender pada ponsel cerdas mereka.

Meminimalkan tindakan dan bidang berulang

Tampilkan kemajuan dalam formulir multi-bagian
Dalam situs web Progressive.com, pengguna akan diminta kode pos mereka, yang berikutnya sudah diisi ke bagian berikutnya dari formulir.

Pastikan formulir Anda tidak memiliki tindakan berulang, memiliki bidang yang diperlukan saja, dan memanfaatkan dari isiotomatis, sehingga pengguna bisa dengan mudah melengkapi formulir dengan data yang sudah diisi.

Cari kesempatan untuk mengisi informasi yang Anda sudah tahu, atau mungkin mengantisipasinya supaya pengguna tidak harus mengisinya sendiri. Misalnya, alamat pengiriman sudah diisi dengan alamat pengiriman terakhir yang diberikan oleh pengguna.

Tunjukkan pada pengguna seberapa jauh kemajuan mereka

Tampilkan kemajuan dalam formulir multi-bagian
Gunakan bilah kemajuan yang dilabeli dengan jelas untuk membantu pengguna melalui formulir multi-bagian.

Bilah kemajuan dan menu harus secara akurat menampilkan kemajuan secara keseluruhan melalui formulir dan proses multi-langkah.

Jika Anda menempatkan formulir kompleks secara tidak proporsional dalam langkah sebelumnya, pengguna kemungkinan besar akan meninggalkan situs sebelum mereka melewati seluruh proses.

Menyediakan kalender visual ketika memilih tanggal

Situs web hotel dengan kalender yang mudah digunakan
Situs web pemesanan hotel dengan widget kalender yang mudah digunakan untuk memilih tanggal.

Pengguna sering kali membutuhkan lebih banyak konteks saat menjadwalkan janji pertemuan dan tanggal perjalanan, untuk membuat segalanya lebih mudah dan mencegah pengguna meninggalkan situs Anda untuk memeriksa aplikasi kalender mereka, sediakan kalender visual dengan label yang jelas untuk memilih tanggal mulai dan selesai.

Pilih tipe masukan yang terbaik

Rampingkan entri informasi dengan menggunakan tipe masukan yang tepat. Pengguna mengapresiasi situs web yang secara otomatis menampikan papan nomor untuk memasukkan nomor ponsel, atau secara otomatis memajukan bidang ketika mereka memasukkannya. Cari kesempatan untuk menghilangkan ketukan sia-sia dalam formulir Anda.

TL;DR

  • Pilih tipe masukan yang paling tepat bagi data Anda untuk menyederhanakan masukan.
  • Berikan saran ketika pengguna mengetik dengan elemen datalist.

Tipe masukan HTML5

HTML5 memperkenalkan sejumlah tipe masukan baru. Tipe masukan baru ini memberikan petunjuk ke browser tentang tipe layout keyboard yang ditampilkan pada keyboard di layar. Pengguna lebih mudah saat memasukkan informasi yang diperlukan tanpa harus mengubah keyboard mereka dan cukup melihat tombol yang sesuai untuk jenis masukan tersebut.

Input type
url
Untuk memasukkan URL. Itu harus diawali dengan skema URI yang valid, misalnya http://, ftp:// atau mailto:.
tel
Untuk memasukkan nomor ponsel. Itu tidak memberlakukan sintaks tertentu untuk validasi, jadi jika Anda ingin memastikan format tertentu, Anda bisa menggunakan pola.
email
Untuk memasukkan alamat email, dan petunjuk bahwa karakter @ harus ditampilkan pada keyboard secara default. Anda bisa menambahkan beberapa atribut jika disediakan lebih dari satu alamat email.
search
Sebuah bidang masukan teks yang didesain secara konsisten dengan platform bidang penelusuran.
number
Untuk masukan numerik, bisa berupa nilai float atau integer rasional.
range
Untuk memasukkan nomor, tapi tidak seperti tipe masukan nomor, nilainya tidak begitu penting. Ini ditampilkan ke pengguna sebagai kontrol slider.
datetime-local
Untuk memasukkan nilai tanggal dan waktu dengan zona waktu yang disediakan adalah zona waktu setempat.
date
Untuk memasukkan tanggal (saja) tanpa disediakan zona waktu.
time
Untuk memasukkan waktu (saja) tanpa disediakan zona waktu.
week
Untuk memasukkan minggu (saja) tanpa disediakan zona waktu.
month
Untuk memasukkan bulan (saja) tanpa disediakan zona waktu.
color
Untuk memilih warna.

Perhatian: Harap ingat untuk selalu menjaga pelokalan ketika memilih tipe masukan, beberapa lokal menggunakan titik (.) sebagai pemisah bukan koma (,)

Menawarkan saran saat masukan dengan datalist

Elemen datalist bukanlah tipe masukan, namun daftar nilai masukan yang disarankan untuk dikaitkan dengan bidang formulir. Ini memungkinkan browser menyarankan opsi pelengkapan otomatis ketika pengguna mengetik. Tidak seperti elemen select ketika pengguna harus memindai daftar yang panjang untuk menemukan nilai yang mereka cari, dan membatasi mereka hanya ke daftar tersebut, elemen datalist memberikan petunjuk ketika pengguna mengetik.

<label for="frmFavChocolate">Favorite Type of Chocolate</label>
<input type="text" name="fav-choc" id="frmFavChocolate" list="chocType">
<datalist id="chocType">
  <option value="white">
  <option value="milk">
  <option value="dark">
</datalist>

Cobalah

Memasukkan label dan nama dengan benar

Formulir sulit diisi pada perangkat seluler. Formulir terbaik adalah formulir dengan masukan paling sedikit. Formulir yang baik menyediakan tipe masukan semantik. Kunci harus berubah sesuai jenis masukan pengguna; pengguna memilih tanggal di kalender. Selalu beri tahu pengguna. Alat validasi harus memberi tahu pengguna apa yang harus mereka lakukan sebelum mengirimkan formulir.

TL;DR

  • Selalu gunakan label pada masukan formulir, dan pastikan itu terlihat ketika bidang sedang dalam fokus.
  • Gunakan placeholder untuk memberikan panduan mengenai apa yang Anda harapkan.
  • Untuk membantu browser mengisi-otomatis formulir, gunakan name yang ditetapkan untuk elemen dan menyertakan atribut autocomplete.

Pentingnya label

Elemen label memberikan petunjuk kepada pengguna, memberi tahu mereka informasi yang dibutuhkan dalam elemen formulir. Setiap label terkait pada sebuah elemen masukan dengan menempatkannya di dalam elemen label, atau dengan menggunakan atribut "for". Menerapkan label ke elemen formulir juga membantu meningkatkan ukuran target sentuh: pengguna bisa menyentuh label maupun masukan untuk menempatkan fokus pada elemen input.

<label for="frmAddressS">Address</label>
<input type="text" name="ship-address" required id="frmAddressS"
  placeholder="123 Any Street" autocomplete="shipping street-address">

Cobalah

Ukuran dan penempatan label

Label dan masukan harus cukup besar agar mudah ditekan. Di tampilan potret yang terlihat, label bidang harus diletakkan di atas elemen input, dan di sampingnya jika di mode lanskap. Pastikan bidang label dan kotak masukan bersesuaian terlihat pada saat yang bersamaan. Berhati-hatilah dengan penangan gulir khusus yang mungkin menggulir elemen masukan ke atas laman menyembunyikan label, atau label yang ditempatkan di bawah elemen masukan mungkin tertutupi oleh keyboard virtual.

Gunakan Placeholder

Atribut placeholder memberikan petunjuk kepada pengguna tentang apa yang diharapkan pada masukan, biasanya dengan menampilkan nilai sebagai teks bercahaya sampai pengguna mulai mengetik di elemen tersebut.

<input type="text" placeholder="MM-YYYY" ...>

Perhatian: Placeholder segera menghilang ketika pengguna mulai mengetik di sebuah elemen, sehingga mereka tidak untuk menggantikan label. Placeholder sebaiknya digunakan sebagai bantuan untuk memandu pengguna mengenai format dan materi yang diperlukan.

Gunakan metadata untuk mengaktifkan pelengkapan-otomatis

Pengguna menyukai ketika situs web mempercepat prosesnya dengan secara otomatis mengisi bidang yang umum seperti nama, alamat email dan bidang lainnya yang sering digunakan, ditambah hal ini membantu mengurangi potensi kesalahan masukan -- terutama pada keyboard virtual dan perangkat kecil.

Browser menggunakan banyak heuristik untuk menentukan bidang mana yang bisa mereka isi-otomatis berdasarkan data yang ditetapkan sebelumnya oleh pengguna, dan Anda dapat memberikan petunjuk ke browser dengan menyediakan atribut name dan atribut autocomplete pada setiap elemen masukan.

Misalnya, untuk memberikan petunjuk ke browser bahwa itu harus melengkapi-otomatis formulir dengan nama, alamat email dan nomor ponsel pengguna, Anda harus menggunakan:

<label for="frmNameA">Name</label>
<input type="text" name="name" id="frmNameA"
  placeholder="Full name" required autocomplete="name">

<label for="frmEmailA">Email</label>
<input type="email" name="email" id="frmEmailA"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmEmailC">Confirm Email</label>
<input type="email" name="emailC" id="frmEmailC"
  placeholder="name@example.com" required autocomplete="email">

<label for="frmPhoneNumA">Phone</label>
<input type="tel" name="phone" id="frmPhoneNumA"
  placeholder="+1-555-555-1212" required autocomplete="tel">

Cobalah

Masukan yang disarankan nilai atribut name dan autocomplete

Nilai atribut autocomplete adalah bagian dari WHATWG HTML Standard. Atribut autocomplete yang paling umum dipakai ditunjukkan di bawah ini.

Atribut autocomplete bisa disertai dengan nama bagian, seperti shippinggiven-name atau billingstreet-address. Browser akan otomatis mengisi bagian yang berbeda secara terpisah, dan bukan sebagai formulir berkelanjutan.

Jenis materi Atribut name Atribut autocomplete
Nama name fname mname lname
  • name (nama lengkap)
  • given-name (nama depan)
  • additional-name (nama tengah)
  • family-name (nama belakang)
Email email email
Alamat address city region province state zip zip2 postal country
  • Untuk satu masukan alamat:
    • street-address
  • Untuk dua masukan alamat:
    • address-line1
    • address-line2
  • address-level1 (negara bagian atau propinsi)
  • address-level2 (kota)
  • postal-code (kode pos)
  • country
Ponsel phone mobile country-code area-code exchange suffix ext tel
Kartu Kredit ccname cardnumber cvc ccmonth ccyear exp-date card-type
  • cc-name
  • cc-number
  • cc-csc
  • cc-exp-month
  • cc-exp-year
  • cc-exp
  • cc-type
Nama pengguna username
  • username
Sandi password
  • current-password (untuk formulir proses masuk)
  • new-password (untuk formulir pendaftaran dan perubahan-sandi)

Atribut autofocus

Pada beberapa formulir, misalnya laman beranda Google dengan satu-satunya hal yang Anda ingin pengguna lakukan adalah mengisi bidang tertentu, Anda bisa menambahkan atribut autofocus . Bila disetel, browser desktop segera memindahkan fokus ke bidang masukan, sehingga memudahkan pengguna untuk dengan cepat mulai menggunakan formulir. Browser seluler mengabaikan atribut autofocus, untuk mencegah keyboard muncul secara acak.

Hati-hati menggunakan atribut autofocus karena akan mencuri fokus keyboard dan berpotensi mencegah karakter backspace digunakan untuk navigasi.

<input type="text" autofocus ...>

Menyediakan validasi real-time

Validasi data real-time tidak hanya membantu menjaga data Anda tetap bersih, namun juga membantu meningkatkan pengalaman pengguna. Browser modern memiliki beberapa alat bawaan untuk membantu menyediakan validasi data real-time dan bisa mencegah pengguna mengirimkan formulir yang tidak valid. Isyarat visual sebaiknya digunakan untuk menunjukkan apakah formulir telah dilengkapi dengan baik.

TL;DR

  • Manfaatkan atribut validasi bawaan browser seperti pattern, required, min, max, dll.
  • Gunakan JavaScript dan Constraints Validation API untuk persyaratan validasi yang lebih kompleks.
  • Tampilkan kesalahan validasi secara real time, dan jika pengguna mencoba untuk mengirimkan formulir yang tidak valid, tunjukkan semua bidang yang harus mereka perbaiki.

Gunakan atribut ini untuk memvalidasi masukan

Atribut pattern

Atribut pattern menentukan ekspresi reguler yang digunakan untuk memvalidasi sebuah bidang masukan. Misalnya, untuk memvalidasi kode pos AS (5 digit, kadang-kadang diikuti dengan tanda hubung dan 4 digit tambahan), kita akan menyetel pattern seperti ini:

<input type="text" pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>
Pola ekspresi reguler umum
Ekspresi reguler
Alamat pos [a-zA-Z\d\s\-\,\#\.\+]+
Kode Pos (AS) ^\d{5,6}(?:[-\s]\d{4})?$
Alamat IP (IPv4) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$
Alamat IP (IPv6) ^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Alamat IP (keduanya) ^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)|(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9])|([0-9a-fA-F]{1,4}:){1,4}:((25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]).){3,3}(25[0-5]|(2[0-4]|1{0,1}[0-9]){0,1}[0-9]))$
Nomor Kartu Kredit ^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|6(?:011|5[0-9]{2})[0-9]{12}|(?:2131|1800|35\d{3})\d{11})$
Nomor Jaminan Sosial ^\d{3}-\d{2}-\d{4}$
Nomor Telepon Amerika Utara ^(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:\(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9])\s*\)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)?([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})(?:\s*(?:#|x\.?|ext\.?|extension)\s*(\d+))?$

Atribut required

Jika terdapat atribut required, maka bidang harus berisi nilai sebelum formulir bisa dikirimkan. Misalnya, untuk membuat kode pos yang diperlukan, kita cukup menambahkan atribut yang dibutuhkan:

<input type="text" required pattern="^\d{5,6}(?:[-\s]\d{4})?$" ...>

Atribut min, max dan step

Untuk jenis masukan numerik seperti nomor atau jarak serta masukan tanggal/waktu, Anda bisa menentukan nilai minimum dan maksimum, serta berapa seharusnya nilai mereka setiap terjadi kenaikan/penurunan ketika diselaraskan dengan slider atau spinner. Misalnya, masukan ukuran sepatu akan menyetel ukuran minimal 1 dan ukuran maksimal 13, dengan kenaikan bertahap 0,5

<input type="number" min="1" max="13" step="0.5" ...>

Atribut maxlength

Atribut maxlength bisa digunakan untuk menentukan panjang maksimal masukan atau kotak teks dan akan bermanfaat ketika Anda ingin membatasi panjang informasi yang bisa diberikan pengguna. Misalnya, jika Anda ingin membatasi nama file sampai 12 karakter, Anda bisa menggunakan atribut berikut.

<input type="text" id="83filename" maxlength="12" ...>

Atribut minlength

Atribut minlength bisa digunakan untuk menentukan panjang minimal masukan atau kotak teks dan akan bermanfaat ketika Anda ingin menetapkan panjang minimal yang harus diberikan pengguna. Misalnya, jika Anda ingin menetapkan bahwa nama file memerlukan setidaknya 8 karakter, Anda bisa menggunakan atribut berikut.

<input type="text" id="83filename" minlength="8" ...>

Atribut novalidate

Pada beberapa kejadian, Anda mungkin mau mengizinkan pengguna untuk mengirimkan formulir bahkan jika itu berisi masukan yang tidak valid. Untuk melakukan ini, tambahkan atribut novalidate ke elemen formulir, atau bidang masukan individual. Dalam kejadian ini, semua kelas-semu dan JavaScript API tetap akan memperbolehkan Anda untuk memeriksa apakah formulir divalidasi.

<form role="form" novalidate>
  <label for="inpEmail">Email address</label>
  <input type="email" ...>
</form>

Berhasil: Bahkan dengan validasi masukan sisi-klien, validasi data pada server tetap penting untuk memastikan konsistensi dan keamanan data Anda.

Gunakan JavaScript untuk validasi real-time yang lebih kompleks

Ketika validasi bawaan ditambah ekspresi reguler tidak mencukupi, Anda bisa menggunakan Constraint Validation API, alat yang efektif untuk menangani validasi khusus. API memungkinkan Anda untuk melakukan hal-hal seperti menyetel kesalahan khusus, memeriksa apakah suatu elemen valid, dan menentukan alasan sehingga sebuah elemen tidak valid:

Constraint Validation
setCustomValidity() Mengatur pesan validasi khusus dan properti customError dari objek ValidityState ke true.
validationMessage Mengembalikan string dengan alasan masukan gagal dalam tes validasi.
checkValidity() Mengembalikan true jika elemen memenuhi semua persyaratan, dan false jika sebaliknya. Memutuskan bagaimana laman merespons ketika pengecekan mengembalikan false diserahkan ke developer.
reportValidity() Mengembalikan true jika elemen memenuhi semua persyaratan, dan false jika sebaliknya. Ketika laman merespons false, masalah batasan dilaporkan ke pengguna.
validity Mengembalikan sebuah objek ValidityState mewakili status validitas dari elemen.

Menyetel pesan validasi khusus

Jika suatu bidang gagal divalidasi, gunakan setCustomValidity() untuk menandai bidang tersebut sebagai tidak valid dan menjelaskan mengapa bidang tidak divalidasi. Misalnya, formulir pendaftaran mungkin meminta pengguna untuk mengonfirmasi alamat email mereka dengan memasukkannya dua kali. Gunakan kejadian blur pada masukan kedua untuk memvalidasi dua masukan tersebut dan menyetel respons yang tepat. Misalnya:

if (input.value != primaryEmail) {
  // the provided value doesn't match the primary email address
  input.setCustomValidity('The two email addresses must match.');
  console.log("E-mail addresses do not match", primaryEmail, input.value);
} else {
  // input is valid -- reset the error message
  input.setCustomValidity('');
}

Cobalah

Mencegah pengiriman formulir pada formulir tidak valid

Oleh karena tidak semua browser akan mencegah pengguna mengirimkan formulir jika ada data yang tidak valid, Anda harus menangkap kejadian pengiriman, dan menggunakan checkValidity() pada elemen formulir untuk menentukan apakah formulir tersebut valid. Misalnya:

form.addEventListener("submit", function(evt) {
  if (form.checkValidity() === false) {
    evt.preventDefault();
    alert("Form is invalid - submission prevented!");
    return false;
  } else {
    // To prevent data from being sent, we've prevented submission
    // here, but normally this code block would not exist.
    evt.preventDefault();
    alert("Form is valid - submission prevented to protect privacy.");
    return false;
  }
});

Cobalah

Menampilkan umpan balik secara real-time

Akan lebih baik lagi jika memberikan indikasi visual pada masing-masing bidang yang menunjukkan apakah pengguna telah menyelesaikan formulir dengan benar sebelum mereka mengirimkannya. HTML5 juga memperkenalkan beberapa kelas-semu baru yang bisa digunakan untuk memberikan gaya masukan berdasarkan nilai atau atribut mereka.

Masukan Real-time
:valid Secara eksplisit menetapkan gaya bagi masukan untuk digunakan saat nilai memenuhi semua persyaratan validasi.
:invalid Secara eksplisit menetapkan gaya bagi masukan untuk digunakan saat nilai tidak memenuhi semua persyaratan validasi.
:required Secara eksplisit menetapkan gaya untuk elemen masukan yang memiliki set atribut yang diperlukan.
:optional Secara eksplisit menetapkan gaya untuk elemen masukan yang tidak memiliki set atribut yang diperlukan.
:in-range Secara eksplisit menyetel gaya untuk elemen masukan nomor dengan nilai dalam jangkauan.
:out-of-range Secara eksplisit menyetel gaya untuk elemen masukan nomor dengan nilai di luar jangkauan.

Validasi terjadi secara langsung yang berarti bahwa ketika laman dimuat, bidang mungkin ditandai sebagai tidak valid, meskipun pengguna belum memiliki kesempatan untuk mengisinya. Ini juga berarti bahwa ketika pengguna mengetik, ada kemungkinan mereka akan melihat gaya tidak valid saat mengetik. Untuk mencegah hal ini, Anda bisa memadukan CSS dengan JavaScript untuk hanya menampilkan penataan gaya yang tidak valid ketika pengguna telah mengunjungi bidang.

input.dirty:not(:focus):invalid {
  background-color: #FFD9D9;
}
input.dirty:not(:focus):valid {
  background-color: #D9FFD9;
}
var inputs = document.getElementsByTagName("input");
var inputs_len = inputs.length;
var addDirtyClass = function(evt) {
  sampleCompleted("Forms-order-dirty");
  evt.srcElement.classList.toggle("dirty", true);
};
for (var i = 0; i < inputs_len; i++) {
  var input = inputs[i];
  input.addEventListener("blur", addDirtyClass);
  input.addEventListener("invalid", addDirtyClass);
  input.addEventListener("valid", addDirtyClass);
}

Cobalah

Berhasil: Anda harus langsung menunjukkan kepada pengguna semua masalah pada formulir, bukannya menunjukkan satu per satu.