如果您正在阅读此内容,则表示您使用的是万维网。 您的表单可供使用不同语言的用户、来自不同国家/地区的用户以及具有不同文化背景的用户使用。了解如何准备表单以进行国际化和本地化。
确保您的表单支持使用不同语言
我们来看看如何确保您的表单支持不同的语言。
为了让您的网站做好本地化准备,第一步是在 <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
属性。<link>
元素。资源
- W3C 国际化文章和教程
- Frank 的《邮政地址强制指南》针对 200 多个国家/地区的地址格式提供了实用的链接和详尽指南。
- DataHub.io 是一款用于下载国家/地区代码和名称的工具。