国际化和本地化

如果您正在阅读此内容，则表示您使用的是万维网。 您的表单可供使用不同语言的用户、来自不同国家/地区的用户以及具有不同文化背景的用户使用。了解如何准备表单以进行国际化和本地化。

确保您的表单支持使用不同语言

我们来看看如何确保您的表单支持不同的语言。

为了让您的网站做好本地化准备，第一步是在 <html> 元素中定义语言属性 lang。此属性可让屏幕阅读器调用正确的发音，并在定义的语言不是默认浏览器语言时帮助浏览器提供网页的翻译。

<html lang="en-us">

详细了解 lang 属性。

假设您将一个表单翻译成了德语。 如何确保搜索引擎和浏览器知道翻译版本？ 您可以在网站的 <head> 中添加 <link> 元素来描述备用版本。

<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">

帮助说其他语言的用户使用您的表单

您无法将表单翻译成所有语言，但您可以使用翻译工具进行翻译。

为确保翻译工具能够翻译表单上的所有文本，请确保所有文本均使用 HTML 定义且可见。有些工具也适用于用 JavaScript 定义的内容，但为了提高兼容性，请尝试在 HTML 中添加尽可能多的文本。

确保您的表单适用于不同的书写系统

不同的语言使用不同的书写系统和字符集。 有些脚本从左到右编写，有些则从右到左。

使间距独立于书写系统

为了确保您的表单适用于不同的书写系统，您可以使用 CSS 逻辑属性。

输入的边框粗细为 1px，左侧除外，其边框粗细为 4px。现在，修改 CodePen，并通过将 dir="rtl" 添加到 <main> 元素，将书写系统更改为从右向左

粗边框现在显示在右侧。 这是因为我们使用逻辑属性定义了边框。

input {
  border-inline-start-width: 4px;
}

详细了解逻辑属性。

确保您的表单可以处理不同的名称格式

假设您有一个表单，用户应在该表单中填写姓名。您将如何向表单中添加此字段？

您可以为名字和姓氏分别添加一个字段。不过，世界各地的姓名并不相同：例如，有些人没有姓氏，那么他们应该如何填写姓氏字段？

为了方便快捷地输入姓名，并确保每个人都可以输入姓名（无论采用什么格式），请尽可能使用单个表单字段输入姓名。

详细了解个人姓名。

如果您的名字包含非拉丁字符，您可能会遇到以下问题：您的姓名在某些表单中被报告为 invalid。构建表单时，请确保允许使用所有可能的字符，不要假设名称仅由拉丁字符组成。

允许各种地址格式

Google 总部位于 1600 Amphitheatre Parkway, Mountain View, CA 94043, United States。

此地址包括门牌号、街道、城市、州/省/自治区/直辖市、邮政编码和国家/地区。 在您所在的国家/地区，地址格式可能完全不同。 如何确保每个人都能在您的表单中输入地址？

一种方法是使用通用输入。

详细了解使用国际地址字段的其他方式。

检查您的掌握程度

考考您对国际化和本地化知识的掌握情况

如何为屏幕阅读器调用正确的发音？

使用 lang 属性。
🎉
使用 hreflang 属性。
再试一次！
添加说明，说明使用的语言。
再试一次！
使用 language 属性。
再试一次！

如何更改网站上的书写系统？

使用 direction 属性。
再试一次！
使用 dir 属性。
🎉
使用 CSS 逻辑属性。
再试一次！
使用 <link> 元素。
再试一次！

资源