Rendering KEYBOARDS yang tepat adalah UX yang penting

Jan 29 2023

Ya, saya benci ketika saya tidak mendapatkan papan ketik hanya dengan angka ketika situs web/aplikasi meminta nomor telepon, kode PIN, dll. Tidak hanya itu, papan ketik yang relevan untuk bidang input masing-masing harus diberikan untuk memberi pengguna pengalaman terbaik yang bisa dia dapatkan dan atribut type dalam HTML melakukan hal itu.

Gambar tag masukan HTML

Ya, saya benci ketika saya tidak mendapatkan papan ketik hanya dengan angka ketika situs web/aplikasi meminta nomor telepon, kode PIN, dll.

Tidak hanya itu, keyboard yang relevan untuk bidang input masing-masing harus dirender untuk memberikan pengalaman terbaik kepada pengguna dan typeatribut dalam HTML melakukan hal itu.

Misalnya, papan ketik dengan '@'bidang email dan
papan ketik dengan '/','.'untuk mengetik URL, dll.

Atribut “ type” dari tag input memberikan banyak informasi ke browser termasuk jenis keyboard yang akan ditampilkan untuk perangkat dengan keyboard di layar seperti ponsel, tablet, dll. Mari kita lihat beberapa nilai yang diterima secara mendetail .

CATATAN: Keyboard yang dirender mungkin berbeda dari yang Anda lihat pada gambar di bawah. Mungkin karena alasan yang berbeda — browser yang berbeda, versinya, atau pengaturan default/kustom Anda atau menggunakan Android/IOS.

1. Keypad Numerik

Ini ideal untuk input yang hanya memerlukan angka dan tanpa huruf seperti nomor telepon, PIN, nomor kartu kredit, dll.

<input type="numeric">

Keypad Numerik di Android

2. Keypad Tele Standar

Anda juga dapat menggunakan "tel" jika Anda mau * and #dan alfabet seperti yang ada di papan tombol.

<input type="tel">

Keypad Tele di Android

3. Bidang email

Ini membawa @karakter ke keyboard, serta karakter titik (.).

<input type="email">

Keypad Email di Android

4. Mengetik Alamat Web

Keyboard dilengkapi dengan pintasan praktis bagi pengguna untuk menambahkan TLD (mis. .com) dan tombol yang biasanya digunakan di alamat web, seperti karakter titik (.) dan garis miring (/).

<input type="url">

Keypad URL di Android

5. Tanggal dan Waktu

Jangan membuat pengguna Anda menderita hanya untuk memasukkan tanggal, gunakan type='date'dan buat pekerjaan mereka lebih mudah. Demikian pula, Anda dapat menggunakan type=’time’bidang waktu dan juga menambahkannya untuk kedua fungsi bersama sebagai
type='datetime-local'.

Keypad Tanggal dan Waktu di Android

6. Formulir? Mencari? Fitur filter?

Keyboard menampilkan tombol Enter, berguna untuk pengiriman formulir, fitur pencarian, dll.

<input type="search">

Cari Keypad di Android

Bonus

<input type="password">→ Harus digunakan untuk bidang sensitif apa pun seperti kata sandi, CVV kartu kredit/debit, dll.

<input type="color">→ Merender pemilih warna yang dapat Anda sesuaikan melalui javascript.

Wrappity membungkus waktu

Atributnya typesangat beragam. Ini memungkinkan Anda mengubah keyboard, mengunggah file, menyembunyikan bidang, memilih warna, dan banyak lagi. Anda dapat membaca dokumen MDN jika Anda ingin tahu tentangnya.