國際化和本地化

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

確認表單支援不同語言

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

想在網站本地化時做好準備，第一步就是在 <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 屬性。
🎉
使用 CSS 邏輯屬性。
請再試一次！
使用 <link> 元素。
請再試一次！

資源