國際化和本地化

如果您閱讀這篇文章,表示目前使用的是全球資訊網。 您的表單可能會由不同語言的人士使用 不同國家/地區、文化背景不同的人 瞭解如何準備國際化和本地化的表單。

以下說明如何確認表單支援不同語言。

想在網站本地化時做好準備,第一步就是在 <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。

這個地址包括門牌號碼、街道、城市、州/省、郵遞區號和國家/地區。 您所在國家/地區的地址格式可能完全不同。 如何確保所有人都能在表單中輸入自己的地址?

其中一種方法是使用一般輸入。

進一步瞭解其他合作方式 國際地址欄位

隨堂測驗

測試自己對於國際化和本地化的瞭解

如何叫用螢幕閱讀器的正確發音?

使用 language 屬性。
新增說明,說明所用語言。
使用 lang 屬性。
使用 hreflang 屬性。

如何修改網站上的書寫系統?

使用 <link> 元素。
使用 direction 屬性。
使用 CSS 邏輯屬性。
使用 dir 屬性。

資源