如果選擇閱讀這段文字,代表您目前使用的是全球資訊網。 表單可能會用於說不同語言的人、來自不同國家/地區的使用者,以及不同文化背景的人。瞭解如何為表單做好國際化和本地化的準備工作。
確保表單支援其他語言
以下說明如何確保表單支援其他語言。
如要讓網站做好本地化準備,第一步是在 <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
屬性。<link>
元素。資源
- W3C 國際化文章和教學課程
- Frank 的「郵政地址指南」針對超過 200 個國家/地區的地址格式提供實用連結和詳盡的指引。
- DataHub.io 這項工具可用來下載國家/地區代碼和名稱。