Internationalization and localization
Be prepared for international data formats, and learn how to plan your form for localization.
If you're reading this, you're using the World Wide Web. Your forms may be used by people speaking different languages, people from different countries, and people with different cultural backgrounds. Learn how to prepare your form for internationalization and localization.
Ensure your form works in different languages #
Let's see how you can make sure your form works with different languages.
The first step to make your site localization-ready is to define the language attribute
lang on the
<html> element. This attribute enables screen readers to invoke the correct pronunciation, and helps browsers offer a translation of the page if the defined language is not the default browser language.
Learn more about the
Say you translated a form to German. How can you make sure search engines and browsers know about the translated version? You can add
<link> elements in your site's
<head> describing the alternate versions.
<link rel="alternate" title="The form element"
<link rel="alternate" title="Das Formularelement"
Help users who speak another language to use your form #
You can't translate your form into every language, but you can ensure translation tools can translate it for you.
Ensure your form works with different writing systems #
Different languages use different writing systems and character sets. Some scripts are written from left to right, and some from right to left.
Make spacing independent of writing systems #
To ensure your form works for different writing systems, you can use CSS logical properties.
The input has a border thickness of
1px on all sides, except on the left side, where the border is
4px thick. Now, edit the CodePen and change the writing system to right to left by adding
dir="rtl" to the
The thick border is now on the right side. That's because we defined the border using a logical property.
Learn more about logical properties.
Ensure your form can handle different name formats #
Say you have a form where the user should fill in their name. How would you add the field to your form?
You could add one field for the first name and one for the surname. However, names are different around the world: for example, some people don't have a surname—so how should they fill in the surname field?
To make it quick and easy to enter names—and to ensure everybody can enter their name, whatever the format—use a single form field for names wherever possible.
Learn more about personal names.
If you have a name with non-Latin characters, you may have encountered the issue that your name is reported as
invalid in some forms. When you build forms, make sure to allow all possible characters—and do not assume that a name only consists of Latin characters.
Allow a variety of address formats #
The headquarters of Google is at 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States.
This address includes the street number, street, city, state, postal code, and country. In your country, the address format may be totally different. How can you ensure everybody can enter their address in your form?
One way is to use generic inputs.
Learn more about other ways to work with international address fields.
How do you invoke the correct pronunciation for screen readers?With the
langattribute. With the
hreflangattribute. Adding a description with what language is used. With the
How can you change the writing system on your website?With the
directionattribute. With the
dirattribute. Using CSS logical properties. Using the