国际化和本地化

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

确保表单支持多种语言

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

为使您的网站做好本地化准备，第一步是在 <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 并将书写系统更改为从右向左 向 <main> 元素添加 dir="rtl"

现在，粗边框位于右侧。 这是因为我们使用逻辑属性定义了边界。

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

详细了解逻辑属性。

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

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

您可以为名字和姓氏各添加一个字段。不过，名称是不同的 例如，有些人没有姓氏，那么他们应如何填写 姓氏字段？

为了方便您快速轻松地输入姓名，并确保每个人都可以输入自己的姓名，无论 格式设置名称 - 尽可能使用单个表单字段填写名称。

详细了解个人姓名。

如果您的名字包含非拉丁字符， 您可能遇到过在某些表单中显示您的姓名为“invalid”的问题。当您 build 表单，请确保允许使用所有可能的字符，并且不要假设名称仅包含 由拉丁字符组成

允许使用多种地址格式

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

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

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

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

检查您的理解情况

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

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

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

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

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

资源