如果您正在阅读此内容,则说明您使用的是万维网。 您的表单可供使用不同语言的人使用, 来自不同国家/地区的用户,以及具有不同文化背景的用户。 了解如何准备表单以进行国际化和本地化。
确保表单支持多种语言
让我们来看看如何确保表单支持不同的语言。
为使您的网站做好本地化准备,第一步是在 <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。
此地址包括门牌号、街道、城市、州/省/自治区/直辖市、邮政编码和国家/地区。 您所在国家/地区的地址格式可能完全不同。 您如何确保每个人都可以在您的表单中输入自己的地址?
一种方法是使用通用输入。
详细了解其他使用方式 国际地址字段。
检查您的理解情况
测试您对国际化和本地化知识的掌握情况
如何为屏幕阅读器调用正确的发音?
hreflang
属性。lang
属性。language
属性。如何更改网站的书写系统?
<link>
元素。direction
属性。dir
属性。资源
- W3C 国际化文章和教程
- Frank 的邮政地址强制指南针对 200 多个国家/地区的地址格式提供了实用链接和详尽指南。
- DataHub.io 是一款用于下载国家/地区代码和名称的工具。