如果您閱讀這篇文章,表示目前使用的是全球資訊網。 您的表單可能會由不同語言的人士使用 不同國家/地區、文化背景不同的人 瞭解如何準備國際化和本地化的表單。
確認表單支援不同語言
以下說明如何確認表單支援不同語言。
想在網站本地化時做好準備,第一步就是在 <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
屬性。hreflang
屬性。lang
屬性。如何修改網站上的書寫系統?
direction
屬性。dir
屬性。<link>
元素。資源
- W3C 國際化文章和教學課程
- 《Frank Compulsive Guide to Postal Addresses》提供多個實用連結和詳盡的地址格式指引,範圍涵蓋超過 200 個國家/地區。
- DataHub.io 是用來下載國家/地區代碼和名稱的工具。