国际化和本地化

如果您正在阅读本文，则您正在使用万维网。您的表单可能被讲不同语言、来自不同国家/地区以及具有不同文化背景的人使用。了解如何为国际化和本地化准备您的表单。

确保您的表单在不同的语言中都能正常工作

让我们看看如何确保您的表单在不同的语言中都能正常工作。

使您的网站为本地化做好准备的第一步是在 <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;
}

了解更多关于 逻辑属性的信息。

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

假设您有一个表单，用户应在其中填写他们的姓名。您将如何将字段添加到表单中？

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

为了快速轻松地输入姓名——并确保每个人都可以输入他们的姓名，无论格式如何——尽可能在任何地方都使用单个姓名表单字段。

了解更多关于 个人姓名的信息。

如果您有一个带有 非拉丁字符的姓名，您可能遇到过您的姓名在某些表单中被报告为 无效 的问题。当您构建表单时，请确保允许所有可能的字符——并且不要假设姓名仅由拉丁字符组成。

允许各种地址格式

Google 总部位于美国加利福尼亚州山景城圆形剧场大道 1600 号，邮编 94043。

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

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

了解更多关于使用 国际地址字段的其他方法。

检查您的理解情况

测试您对国际化和本地化的知识

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

使用 lang 属性。
🎉
使用 hreflang 属性。
再试一次！
添加对所用语言的描述。
再试一次！
使用 language 属性。
再试一次！

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

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

资源