Materi
USWDS meminta blok formulir disusun vertikal, satu di bawah yang lain, karena pengguna dengan penglihatan terbatas sulit memindai dari kanan ke kiri. Urutan kontrol di HTML sama dengan urutan di layar dan tidak disusun ulang dengan CSS, karena pembaca layar membacakan kontrol sesuai urutan HTML. GOV.UK meminta label diletakkan di atas isian yang dirujuknya.
Lebar isian adalah petunjuk. GOV.UK meminta ukuran isian sesuai isinya: kode pos selebar kode pos, nomor telepon selebar nomor telepon. Isian berlebar tetap dipakai untuk jawaban yang panjangnya diketahui. USWDS menulis bahwa panjang isian memberi tanda berapa banyak yang perlu ditulis, dan menyediakan kelas lebar: 2xs (5ex), xs (9ex), sm (13ex), md (20ex), lg (30ex), xl (40ex), dan 2xl (50ex). USWDS juga meminta nomor yang punya beberapa bagian, seperti nomor telepon, tidak dipecah ke beberapa isian, karena setiap isian butuh label dan label potongan jarang bermakna.
| Jawaban | Pilihan | Sumber |
|---|---|---|
| Bilangan bulat (jumlah, kode) | type="text" dengan inputmode="numeric"; hindari type="number" | GOV.UK Text input |
| Angka berdesimal | inputmode="decimal" | GOV.UK Text input, MDN inputmode |
| Nomor telepon | type="tel": ponsel dapat menampilkan papan angka telepon | MDN input tel |
GOV.UK menghindari type="number" kecuali riset menunjukkan kebutuhannya: angka bisa bertambah atau berkurang tanpa sengaja saat pengguna menggulir halaman, dan tidak ada umpan balik jelas bila yang diketik bukan angka. MDN menjelaskan bahwa inputmode hanya memilih papan ketik virtual dan tidak memaksakan aturan validitas apa pun.
<label for="jumlah-ekor">Jumlah ekor ternak</label>
<input type="text" id="jumlah-ekor" name="jumlah-ekor" inputmode="numeric" class="lebar-2xs">
