Jika Anda membaca ini, Anda sedang menggunakan {i>World Wide Web<i}. Formulir Anda mungkin digunakan oleh orang yang berbicara dalam bahasa yang berbeda, orang dari negara yang berbeda, dan orang-orang dengan latar belakang budaya yang berbeda. Pelajari cara menyiapkan formulir Anda untuk internasionalisasi dan pelokalan.
Pastikan formulir Anda berfungsi dalam berbagai bahasa
Mari kita lihat cara memastikan formulir Anda dapat digunakan dalam berbagai bahasa.
Langkah pertama agar situs Anda siap dilokalkan adalah menentukan atribut bahasa lang
pada elemen <html>
.
Atribut ini memungkinkan pembaca layar memanggil pengucapan yang benar,
dan membantu browser menawarkan terjemahan laman jika bahasa yang ditentukan bukan bahasa browser default.
<html lang="en-us">
Pelajari atribut lang
lebih lanjut.
Misalnya Anda menerjemahkan formulir ke dalam bahasa Jerman.
Bagaimana cara memastikan bahwa mesin telusur dan browser mengetahui versi yang diterjemahkan?
Anda dapat menambahkan elemen <link>
di <head>
situs Anda yang mendeskripsikan versi alternatif.
<link rel="alternate" title="The form element"
href="https://example.com/en/form" hreflang="en">
<link rel="alternate" title="Das Formularelement"
href="https://example.com/de/form" hreflang="de">
Bantu pengguna yang berbicara dalam bahasa lain untuk menggunakan formulir Anda
Anda tidak dapat menerjemahkan formulir ke semua bahasa, tetapi Anda dapat memastikan bahwa alat penerjemahan dapat menerjemahkannya untuk Anda.
Untuk memastikan alat terjemahan menerjemahkan semua teks di formulir, pastikan semua teks ditetapkan dalam HTML dan terlihat. Beberapa alat juga bekerja dengan konten yang ditentukan dalam JavaScript, tetapi untuk meningkatkan kompatibilitas, cobalah untuk menyertakan teks sebanyak mungkin dalam HTML.
Memastikan formulir Anda berfungsi dengan sistem penulisan yang berbeda
Bahasa yang berbeda menggunakan sistem penulisan dan himpunan karakter yang berbeda. Beberapa skrip ditulis dari kiri ke kanan, dan beberapa dari kanan ke kiri.
Membuat spasi terpisah dari sistem penulisan
Untuk memastikan formulir Anda berfungsi untuk sistem penulisan yang berbeda, Anda dapat menggunakan properti logis CSS.
Input memiliki ketebalan batas 1px
di semua sisi,
kecuali di sisi kiri, dengan batas tebal 4px
.
Sekarang, edit CodePen dan ubah sistem penulisan dari kanan ke kiri
dengan menambahkan dir="rtl"
ke elemen <main>
Batas tebal sekarang berada di sisi kanan. Hal itu karena kita menentukan batas menggunakan properti logis.
input {
border-inline-start-width: 4px;
}
Pelajari properti logis lebih lanjut.
Pastikan formulir Anda dapat menangani format nama yang berbeda
Misalnya, Anda memiliki formulir yang harus diisi oleh pengguna. Bagaimana cara Anda menambahkan kolom ini ke formulir?
Anda dapat menambahkan satu kolom untuk nama depan dan satu kolom untuk nama belakang. Namun, namanya berbeda di seluruh dunia: misalnya, beberapa orang tidak memiliki nama belakang—jadi bagaimana mereka harus mengisi kolom nama belakang?
Untuk mempercepat dan mempermudah proses memasukkan nama—serta untuk memastikan semua orang dapat memasukkan namanya, apa pun format—gunakan satu kolom formulir untuk nama jika memungkinkan.
Pelajari lebih lanjut nama pribadi.
Jika Anda memiliki nama dengan karakter non-Latin,
Anda mungkin pernah mengalami masalah yaitu nama Anda dilaporkan sebagai invalid
dalam beberapa bentuk. Jika Anda
buat formulir, pastikan untuk mengizinkan semua karakter yang memungkinkan—dan jangan berasumsi bahwa nama hanya terdiri
yang menggunakan karakter Latin.
Izinkan berbagai format alamat
Kantor pusat Google berada di 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.
Alamat ini mencakup nomor jalan, jalan, kota, negara bagian/provinsi, kode pos, dan negara. Di negara Anda, format alamat mungkin sangat berbeda. Bagaimana cara memastikan semua orang dapat memasukkan alamat mereka di formulir Anda?
Salah satu caranya adalah dengan menggunakan input generik.
Pelajari lebih lanjut cara lain untuk bekerja sama kolom alamat internasional.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang internasionalisasi dan pelokalan
Bagaimana cara memanggil pengucapan yang benar untuk pembaca layar?
hreflang
.lang
.language
.Bagaimana cara mengubah sistem penulisan di situs Anda?
direction
.<link>
.dir
.Resource
- Artikel dan tutorial Internasionalisasi W3C
- Panduan Kompulsif Frank untuk Alamat Pos memberikan link berguna dan panduan lengkap untuk format alamat di lebih dari 200 negara.
- DataHub.io adalah alat untuk mendownload kode dan nama negara.