國際化和本地化

如果選擇閱讀這段文字，代表您目前使用的是全球資訊網。 表單可能會用於說不同語言的人、來自不同國家/地區的使用者，以及不同文化背景的人。瞭解如何為表單做好國際化和本地化的準備工作。

確保表單支援其他語言

以下說明如何確保表單支援其他語言。

如要讓網站做好本地化準備，第一步是在 <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。

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

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

進一步瞭解其他使用國際地址欄位的方法。

隨堂測驗

測驗您對國際和本地化的相關知識

如何針對螢幕閱讀器叫用正確的發音？

使用 lang 屬性。
🎉
使用 hreflang 屬性。
請再試一次！
新增說明，並附上使用的語言。
請再試一次！
使用 language 屬性。
請再試一次！

如何變更網站的書寫系統？

使用 direction 屬性。
請再試一次！
使用 dir 屬性。
🎉
使用 CSS 邏輯屬性。
請再試一次！
使用 <link> 元素。
請再試一次！

資源