Codelab praktik terbaik formulir alamat

Sam Dutton

Bagaimana Anda bisa mendesain formulir yang berfungsi dengan baik untuk berbagai format nama dan alamat? Bentuk minor gangguan mengganggu pengguna dan dapat menyebabkan mereka meninggalkan situs Anda atau menyerah untuk menyelesaikan pembelian atau mendaftar.

Codelab ini menunjukkan cara membuat formulir yang mudah digunakan dan dapat diakses, yang berfungsi dengan baik untuk sebagian besar pengguna.

Langkah 1: Manfaatkan elemen dan atribut HTML semaksimal mungkin

Anda akan memulai bagian codelab ini dengan formulir kosong, hanya judul dan tombol saja dengan sendirinya. Kemudian Anda akan mulai menambahkan input. (CSS dan sedikit JavaScript sudah included.)

  • Klik Remix to Edit agar project dapat diedit.

  • Tambahkan kolom nama ke elemen <form> dengan kode berikut:

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Hal itu mungkin terlihat rumit dan berulang hanya untuk satu kolom nama, tetapi sebenarnya ada banyak hal yang dapat dilakukan.

Anda telah mengaitkan label dengan input dengan mencocokkan atribut for dari label dengan atribut name atau id input. Ketukan atau klik pada label akan memindahkan fokus ke inputnya, sehingga target daripada input itu sendiri—yang bagus untuk jari, jempol, dan klik mouse! Pembaca layar ucapkan teks label saat label atau input label mendapat fokus.

Bagaimana dengan name="name"? Ini adalah nama (yang kebetulan merupakan 'nama'!) yang terkait dengan data dari input ini yang dikirim ke server saat formulir dikirimkan. Menyertakan atribut name juga berarti bahwa data dari elemen ini dapat diakses oleh FormData API.

Langkah 2: Tambahkan atribut untuk membantu pengguna memasukkan data

Apa yang terjadi saat Anda mengetuk atau mengklik input Nama di Chrome? Anda akan melihat isi otomatis saran yang telah disimpan oleh browser dan tebakan yang sesuai untuk input ini, mengingat Nilai name dan id.

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 dan ketuk atau klik input Nama. Perbedaan apa yang Anda lihat?

Anda akan melihat perubahan kecil: dengan autocomplete="name", saran kini bersifat spesifik nilai yang digunakan sebelumnya dalam input formulir yang juga memiliki autocomplete="name". Browser tidak hanya menebak-nebak apa yang mungkin sesuai: Anda memiliki kendali. Anda juga akan melihat tombol Kelola... untuk melihat dan mengedit nama dan alamat yang disimpan oleh browser.

Dua screenshot Chrome di ponsel Android yang menampilkan formulir dengan satu input, dengan dan tanpa nilai pelengkapan otomatis. Salah satunya menunjukkan nilai saran UI browser secara heuristik; yang lain menampilkan UI ketika ada nilai pelengkapan otomatis yang disimpan.
UI untuk isi otomatis dengan nilai yang ditebak, versus pelengkapan otomatis.

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 berisi lebih dari 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 itu tidak akan terjadi 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 isian ini, dan akan memperingatkan serta menyorot input jika Anda mencoba mengirimkannya. Tanpa kode tambahan wajib!

Untuk menguji cara kerja formulir dengan dan tanpa atribut ini, coba masukkan data:

  • Coba masukkan nilai yang tidak sesuai dengan atribut pattern.
  • Coba kirimkan formulir dengan input kosong. Anda akan melihat peringatan fungsi {i>built-in <i}browser isian wajib yang kosong dan mengatur fokus padanya.

Langkah 3: Tambahkan kolom alamat 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 cocok untuk dengan cara memotong dan menempel.

Anda harus menghindari pembagian formulir alamat menjadi beberapa komponen seperti nama dan nomor jalan kecuali yang benar-benar Anda perlukan. Jangan paksa pengguna untuk memasukkan alamat mereka ke dalam kolom yang tidak masuk akal.

Sekarang, tambahkan kolom untuk ZIP atau kode pos, dan Negara atau wilayah. Untuk mempermudah, hanya lima negara pertama yang dicantumkan di sini. Daftar lengkap disertakan di 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 ini karena banyak negara tidak menggunakan kode pos. (Global Sourcebook memberikan informasi tentang format alamat untuk 194 negara yang berbeda, termasuk alamat contoh.) Label Negara atau region digunakan sebagai pengganti Country, karena beberapa opsi dari daftar lengkap (seperti Inggris Raya) bukan merupakan satu negara (meskipun bernilai autocomplete).

Langkah 4: Buat agar pelanggan dapat memasukkan alamat pengiriman dan penagihan dengan mudah

Anda telah membuat formulir alamat yang sangat berfungsi, tetapi bagaimana jika situs Anda memerlukan lebih dari satu alamat, untuk pengiriman dan penagihan, misalnya? Coba perbarui formulir Anda agar pelanggan dapat masuk alamat pengiriman dan penagihan. Bagaimana Anda bisa membuat entri data secepat dan semudah mungkin, terutama jika kedua alamatnya 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 menggunakan satu input: jangan membagi nomor menjadi bagian-bagian. Hal itu akan memudahkan pengguna memasukkan data atau menyalin dan menempel, menyederhanakan validasi, dan memungkinkan browser untuk diisi otomatis.

Ada dua atribut yang dapat meningkatkan pengalaman pengguna dalam memasukkan nomor telepon:

  • type="tel" memastikan pengguna seluler mendapatkan keyboard yang tepat.
  • enterkeyhint="done" menyetel label tombol enter keyboard seluler untuk menunjukkan bahwa ini adalah yang terakhir dan formulir kini dapat dikirim (default-nya adalah next).
Dua screenshot formulir di Android yang menunjukkan bagaimana atribut input enterkeyhint mengubah ikon tombol enter.
Gunakan atribut enterkeyhint untuk menetapkan label tombol Enter: 'berikutnya' dan 'selesai'.

Formulir alamat lengkap Anda sekarang akan terlihat seperti ini:

  • Coba formulir Anda di perangkat lain. Perangkat dan browser apa yang Anda targetkan? Bagaimana bisa formulir dapat diperbaiki?

Ada beberapa cara untuk menguji formulir Anda di berbagai perangkat:

Lebih jauh

  • Pemantauan Analisis dan Pengguna Nyata: memungkinkan performa dan kegunaan desain formulir untuk diuji dan dipantau untuk pengguna aktual, 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 Anda tanpa data tersebut? berapa lama waktu yang dihabiskan pengguna di halaman formulir alamat Anda?) dan analisis interaksi (halaman mana? atau tidak berinteraksi dengan pengguna.)

  • Di mana lokasi pengguna Anda? Bagaimana cara mereka memformat alamat? Nama apa yang mereka gunakan untuk alamat seperti ZIP atau kode pos? Panduan Kompulsif Frank tentang Alamat Pos menyediakan link berguna dan panduan ekstensif yang menguraikan format alamat di lebih dari 200 negara.

  • Pemilih negara terkenal karena kegunaan yang buruk. Sebaiknya hindari memilih elemen untuk daftar item yang panjang dan standar kode negara ISO 3166 saat ini mencantumkan 249 negara. Sebagai ganti <select>, Anda dapat mempertimbangkan alternatif seperti Pemilih negara Baymard Institute.

    Dapatkah Anda merancang pemilih yang lebih baik untuk daftar dengan banyak item? Bagaimana Anda memastikan bahwa desain Anda dapat diakses di berbagai perangkat dan platform? (Elemen <select> tidak berfungsi dengan baik untuk item dalam jumlah besar, tetapi setidaknya dapat digunakan di hampir semua {i>browser<i} dan perangkat asistif!)

    Postingan blog <input type="negara" /> membahas kompleksitas standarisasi pemilih negara. Pelokalan nama negara juga dapat bermasalah. Daftar Negara memiliki alat untuk mendownload kode dan nama negara dalam berbagai bahasa, dalam berbagai format.