Bagaimana Anda bisa mendesain formulir yang berfungsi dengan baik untuk berbagai format nama dan alamat? Gangguan bentuk kecil mengganggu pengguna dan dapat menyebabkan mereka meninggalkan situs atau menyerah untuk menyelesaikan pembelian atau pendaftaran.
Codelab ini menampilkan cara membuat formulir yang mudah digunakan dan diakses serta berfungsi dengan baik bagi sebagian besar pengguna.
Langkah 1: Optimalkan elemen dan atribut HTML
Anda akan memulai bagian codelab ini dengan bentuk kosong, yang hanya memiliki judul dan tombol. Selanjutnya, Anda akan mulai menambahkan {i>input<i}. (CSS dan sedikit JavaScript sudah disertakan.)
Klik Remix untuk Mengedit agar project dapat diedit.
Tambahkan kolom nama ke elemen
<form>
Anda dengan kode berikut:
<section>
<label for="name">Name</label>
<input id="name" name="name">
</section>
Hal ini mungkin terlihat rumit dan berulang untuk satu kolom nama saja, tetapi hal ini sudah memiliki banyak pengaruh.
Anda mengaitkan label
dengan input
dengan mencocokkan atribut for
label
dengan
name
atau id
input
. Ketukan atau klik pada label akan memindahkan fokus ke inputnya, sehingga menghasilkan target yang jauh lebih besar
daripada input itu sendiri—yang bagus untuk klik jari, jempol, dan mouse! Pembaca layar
mengumumkan teks label saat label atau input label menjadi fokus.
Bagaimana dengan name="name"
? Ini adalah nama (yang kebetulan 'name'!) yang terkait dengan data
dari input ini yang dikirim ke server saat formulir dikirimkan. Menyertakan atribut name
juga berarti data dari elemen ini dapat diakses oleh FormData API.
Langkah 2: Tambahkan atribut untuk membantu pengguna memasukkan data
Apa yang terjadi jika Anda mengetuk atau mengklik input Nama di Chrome? Anda akan melihat saran isi otomatis
yang telah disimpan browser dan tebakan sesuai untuk input ini, mengingat nilai
name
dan id
-nya.
Sekarang tambahkan autocomplete="name"
ke kode input Anda sehingga terlihat seperti ini:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name">
</section>
Muat ulang halaman di Chrome, lalu ketuk atau klik input Nama. Perbedaan apa yang Anda lihat?
Anda akan melihat perubahan kecil: dengan autocomplete="name"
, saran kini merupakan nilai spesifik
yang sebelumnya digunakan dalam input formulir yang juga memiliki autocomplete="name"
. Browser tidak hanya menebak-nebak apa yang
mungkin sesuai: Anda punya kendali. Anda juga akan melihat opsi Manage... untuk melihat dan mengedit nama serta alamat yang disimpan oleh browser Anda.
![Dua screenshot Chrome di ponsel Android yang menampilkan formulir dengan satu input, dengan dan tanpa nilai pelengkapan otomatis. Satu menampilkan nilai saran heuristik UI browser; yang lain menampilkan UI saat ada nilai pelengkapan otomatis tersimpan.](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-chrome-4d8d209f546ec.jpg?authuser=0&hl=id)
Sekarang tambahkan atribut validasi batasan
maxlength
, pattern
, dan required
sehingga kode input Anda terlihat seperti ini:
<section>
<label for="name">Name</label>
<input id="name" name="name" autocomplete="name"
maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>
maxlength="100"
berarti browser tidak akan mengizinkan input yang melebihi 100 karakter.pattern="[\p{L} \-\.]+"
menggunakan ekspresi reguler yang mengizinkan karakter huruf Unicode, tanda hubung, dan titik (tanda titik). Artinya nama seperti Françoise atau Jörg tidak diklasifikasikan sebagai 'tidak valid'. Hal ini tidak berlaku jika Anda menggunakan nilai\w
yang [hanya mengizinkan karakter dari alfabet Latin.required
berarti... wajib diisi! Browser tidak akan mengizinkan formulir dikirimkan tanpa data untuk kolom ini, dan akan memperingatkan serta menandai input jika Anda mencoba mengirimkannya. Tidak perlu kode tambahan.
Untuk menguji cara kerja formulir dengan dan tanpa atribut ini, coba masukkan data:
- Coba masukkan nilai yang tidak sesuai dengan atribut
pattern
. - Coba kirim formulir dengan input kosong. Anda akan melihat peringatan fungsi browser bawaan tentang kolom wajib diisi yang kosong dan menetapkan fokus pada kolom tersebut.
Langkah 3: Tambahkan kolom alamat yang fleksibel ke formulir Anda
Untuk menambahkan kolom alamat, tambahkan kode berikut ke formulir Anda:
<section>
<label for="address">Address</label>
<textarea id="address" name="address" autocomplete="address"
maxlength="300" required></textarea>
</section>
textarea
adalah cara paling fleksibel bagi pengguna untuk memasukkan alamat mereka, dan bagus untuk
memotong dan menempel.
Anda harus menghindari membagi formulir alamat menjadi beberapa komponen seperti nama dan nomor jalan kecuali jika memang diperlukan. Jangan memaksa pengguna untuk mencoba memasukkan alamat mereka ke dalam bidang yang tidak masuk akal.
Sekarang tambahkan kolom untuk ZIP atau kode pos, dan Negara atau wilayah. Untuk mempermudah, hanya lima negara pertama yang disertakan di sini. Daftar lengkap disertakan dalam formulir alamat lengkap.
<section>
<label for="postal-code">ZIP or postal code (optional)</label>
<input id="postal-code" name="postal-code"
autocomplete="postal-code" maxlength="20">
</section>
<section id="country-region">
<label for="">Country or region</label>
<select id="country" name="country" autocomplete="country"
required>
<option selected value="SPACER"> </option>
<option value="AF">Afghanistan</option>
<option value="AX">Åland Islands</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
</select>
</section>
Anda akan melihat bahwa Kode pos bersifat opsional: hal itu karena banyak negara yang tidak menggunakan kode pos.
(Buku Sumber Global memberikan informasi tentang format alamat untuk 194 negara yang berbeda, termasuk alamat contoh.) Label Negara atau wilayah digunakan, bukan Negara, karena beberapa opsi dari daftar lengkap (seperti Inggris Raya) bukan merupakan negara tunggal (meskipun nilai autocomplete
).
Langkah 4: Memungkinkan pelanggan memasukkan alamat pengiriman dan penagihan dengan mudah
Anda telah membuat formulir alamat yang sangat fungsional, tetapi bagaimana jika situs Anda memerlukan lebih dari satu
alamat, misalnya untuk pengiriman dan penagihan? Coba perbarui formulir Anda agar pelanggan dapat memasukkan alamat pengiriman dan penagihan. Bagaimana Anda dapat membuat entri data secepat dan semudah mungkin,
terutama jika kedua alamat sama? Artikel yang menyertai codelab ini menjelaskan teknik untuk menangani beberapa alamat.
Apa pun yang Anda lakukan, pastikan untuk menggunakan nilai autocomplete
yang benar.
Langkah 5: Tambahkan kolom nomor telepon
Untuk menambahkan input nomor telepon, tambahkan kode berikut ke formulir:
<section>
<label for="tel">Telephone</label>
<input id="tel" name="tel" autocomplete="tel" type="tel"
maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
required>
</section>
Untuk nomor telepon, gunakan input tunggal: jangan membagi nomor menjadi beberapa bagian. Tindakan tersebut memudahkan pengguna memasukkan data atau menyalin dan menempel, menyederhanakan validasi, dan memungkinkan browser melakukan isi otomatis.
Ada dua atribut yang dapat meningkatkan pengalaman pengguna dalam memasukkan nomor telepon:
type="tel"
memastikan pengguna seluler mendapatkan keyboard yang tepat.enterkeyhint="done"
menetapkan label kunci enter pada keyboard seluler untuk menunjukkan bahwa ini adalah kolom terakhir dan formulir sekarang dapat dikirimkan (default-nya adalahnext
).
![Dua screenshot sebuah formulir di Android yang menunjukkan bagaimana atribut input enterkeyhint mengubah ikon tombol enter.](https://web.developers.google.cn/static/articles/codelab-address-form-best-practices/image/two-screenshots-a-form-d3f2a1ca901d8.png?authuser=0&hl=id)
Formulir alamat lengkap Anda sekarang akan terlihat seperti ini:
- Coba formulir di perangkat lain. Perangkat dan browser apa yang Anda targetkan? Bagaimana formulirnya bisa diperbaiki?
Ada beberapa cara untuk menguji formulir Anda di berbagai perangkat:
- Gunakan Mode Perangkat Chrome DevTools untuk menyimulasikan perangkat seluler.
- Kirim URL dari komputer ke ponsel.
- Gunakan layanan seperti BrowserStack untuk melakukan pengujian di berbagai perangkat dan browser.
Melangkah lebih jauh
Analisis dan Pemantauan Pengguna Asli: memungkinkan performa dan kegunaan desain formulir Anda diuji dan dipantau untuk pengguna sungguhan, dan untuk memeriksa apakah perubahan berhasil. Anda harus memantau performa pemuatan dan Data Web lainnya, serta analisis halaman (berapa proporsi pengguna yang kembali dari formulir alamat tanpa menyelesaikannya? berapa lama waktu yang dihabiskan pengguna di halaman formulir alamat?) dan analisis interaksi (pengguna berinteraksi dengan komponen halaman mana, atau tidak?)
Di mana lokasi pengguna Anda? Bagaimana cara mereka memformat alamat? Nama apa yang mereka gunakan untuk komponen alamat, seperti kode pos atau ZIP? Panduan Kompulsif Frank untuk Alamat Pos memberikan link berguna dan panduan lengkap yang menjelaskan format alamat di lebih dari 200 negara.
Pemilih negara terkenal karena kegunaan yang buruk. Sebaiknya hindari elemen tertentu untuk daftar item yang panjang dan standar kode negara ISO 3166 saat ini mencantumkan 249 negara. Sebagai ganti
<select>
, sebaiknya Anda mempertimbangkan alternatif seperti pemilih negara Baymard Institute.Dapatkah Anda mendesain pemilih yang lebih baik untuk daftar yang berisi banyak item? Bagaimana Anda memastikan bahwa desain dapat diakses di berbagai perangkat dan platform? (Elemen
<select>
tidak berfungsi dengan baik untuk sejumlah besar item, tetapi setidaknya dapat digunakan di hampir semua browser dan perangkat pendukung.)Postingan blog <input type="country" /> membahas kompleksitas standardisasi pemilih negara. Pelokalan nama negara juga bisa bermasalah. Daftar Negara memiliki alat untuk mendownload kode dan nama negara dalam beberapa bahasa, dalam berbagai format.