Jika Anda membaca ini, berarti Anda menggunakan {i>World Wide Web<i}. Formulir Anda dapat digunakan oleh orang yang berbicara dalam bahasa berbeda, orang dari negara berbeda, dan orang dengan latar belakang budaya berbeda. Pelajari cara menyiapkan formulir Anda untuk internasionalisasi dan pelokalan.
Pastikan formulir Anda berfungsi dalam berbagai bahasa
Mari kita lihat cara memastikan formulir Anda berfungsi dalam berbagai bahasa.
Langkah pertama untuk membuat situs Anda siap untuk pelokalan adalah menentukan atribut bahasa lang
pada elemen <html>
.
Atribut ini memungkinkan pembaca layar memanggil pengucapan yang benar,
dan membantu browser menawarkan terjemahan halaman jika bahasa yang ditentukan bukan bahasa browser default.
<html lang="en-us">
Pelajari atribut lang
lebih lanjut.
Katakanlah Anda menerjemahkan formulir ke dalam bahasa Jerman.
Bagaimana cara memastikan mesin telusur dan browser mengetahui versi terjemahan?
Anda dapat menambahkan elemen <link>
di <head>
situs yang menjelaskan 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">
Membantu pengguna yang menggunakan bahasa lain untuk menggunakan formulir Anda
Anda tidak dapat menerjemahkan formulir ke semua bahasa, tetapi Anda dapat memastikan alat terjemahan dapat menerjemahkannya.
Untuk memastikan alat terjemahan menerjemahkan semua teks pada formulir, pastikan semua teks ditentukan dalam HTML dan terlihat. Beberapa alat juga berfungsi dengan konten yang ditentukan dalam JavaScript, tetapi untuk meningkatkan kompatibilitas, coba sertakan teks sebanyak mungkin dalam HTML.
Pastikan 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 lainnya dari kanan ke kiri.
Buat spasi terpisah dari sistem penulisan
Guna memastikan formulir Anda berfungsi untuk berbagai sistem penulisan, Anda dapat menggunakan properti logis CSS.
Input memiliki ketebalan batas 1px
di semua sisi,
kecuali di sisi kiri, yang memiliki ketebalan batas 4px
.
Sekarang, edit CodePen dan ubah sistem penulisan ke kanan ke kiri
dengan menambahkan dir="rtl"
ke elemen <main>
Batas tebal sekarang berada di sisi kanan. Hal ini dikarenakan 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-beda
Misalnya Anda memiliki formulir yang harus diisi pengguna. Bagaimana cara Anda menambahkan kolom tersebut ke formulir?
Anda dapat menambahkan satu kolom untuk nama depan dan satu lagi untuk nama belakang. Namun, nama di seluruh dunia berbeda-beda: misalnya, beberapa orang tidak memiliki nama belakang, jadi bagaimana sebaiknya mereka mengisi kolom nama belakang?
Untuk mempercepat dan mempermudah memasukkan nama—dan untuk memastikan semua orang dapat memasukkan nama mereka, apa pun formatnya—gunakan satu kolom formulir untuk nama jika memungkinkan.
Pelajari nama pribadi lebih lanjut.
Jika Anda memiliki nama dengan karakter non-Latin,
Anda mungkin mengalami masalah sehingga nama Anda dilaporkan sebagai invalid
dalam beberapa bentuk. Saat
mem-build formulir, pastikan untuk mengizinkan semua karakter yang memungkinkan—dan jangan berasumsi bahwa suatu nama hanya terdiri dari
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, kode pos, dan negara. Di negara Anda, format alamat mungkin sangat berbeda. Bagaimana Anda memastikan setiap orang dapat memasukkan alamat dalam formulir?
Salah satu caranya adalah dengan menggunakan input generik.
Pelajari lebih lanjut cara lain untuk menangani kolom alamat internasional.
Menguji pemahaman Anda
Uji pengetahuan Anda tentang internasionalisasi dan pelokalan
Bagaimana cara memanggil pengucapan yang benar untuk pembaca layar?
lang
.hreflang
.language
.Bagaimana cara mengubah sistem penulisan di situs Anda?
direction
.dir
.<link>
.Referensi
- Artikel dan tutorial Internasionalisasi W3C
- Panduan Kompulsif Frank untuk Alamat Pos memberikan link bermanfaat dan panduan lengkap untuk format alamat di lebih dari 200 negara.
- DataHub.io adalah alat untuk mendownload kode dan nama negara.