Internasionalisasi dan pelokalan

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?

Dengan atribut lang.
🎉
Dengan atribut hreflang.
Coba lagi.
Menambahkan deskripsi dengan bahasa yang digunakan.
Coba lagi.
Dengan atribut language.
Coba lagi.

Bagaimana cara mengubah sistem penulisan di situs Anda?

Dengan atribut direction.
Coba lagi.
Dengan atribut dir.
🎉
Menggunakan properti logis CSS.
Coba lagi.
Menggunakan elemen <link>.
Coba lagi.

Referensi