舊版瀏覽器中的 HTML 表單

為了理解常見的模式，閱讀文件很有幫助。如果你在 MDN 上閱讀，你已經處於正確的位置。只需檢視你想要使用的元素（或 DOM 介面）的支援情況。MDN 為大多數可以在網頁中使用的元素、屬性和 API 提供了相容性表格。

因為 HTML 表單 涉及複雜的互動，所以有一條重要的規則：保持簡單，也稱為“KISS 原則”。在很多情況下，我們希望表單更“漂亮”或“具有高階功能”，但構建高效的 HTML 表單不是設計或技術問題。相反，它關乎簡單、直觀和易於使用者互動。本教程 表單可用性在 UX For The Masses 上 解釋得很好。

優雅降級和漸進增強 是開發模式，使你能夠透過支援廣泛的瀏覽器來構建優秀的東西。當你為現代瀏覽器構建某些東西時，並且你想確保它以某種方式在舊版瀏覽器上正常工作，你就正在執行優雅降級。

讓我們看一些與 HTML 表單相關的示例。

HTML 輸入型別

所有 HTML 輸入型別都可以在所有瀏覽器中使用，即使是古老的瀏覽器也是如此，因為它們降級的模式非常可預測。如果瀏覽器不知道 type 屬性的值，它將回退，就好像值為 text 一樣。

<label for="myColor">
  Pick a color
  <input type="color" id="myColor" name="color" />
</label>

支援	不支援

表單按鈕

在 HTML 表單中定義按鈕有兩種方法

• <input> 元素，其屬性 type 設定為值 button、submit、reset 或 image
• <button> 元素

<input>

如果你想透過使用元素選擇器應用一些 CSS，<input> 元素可能會使事情變得有點困難

<input type="button" value="click me" />

如果我們刪除所有輸入的邊框，我們是否可以僅在輸入按鈕上恢復預設外觀？

input {
  /* This rule turns off the default rendering for the input types that have a border,
     including buttons defined with an input element */
  border: 1px solid #ccc;
}
input[type="button"] {
  /* This does NOT restore the default rendering */
  border: none;
}
input[type="button"] {
  /* These don't either! Actually there is no standard way to do it in any browser */
  border: auto;
  border: initial;
}
input[type="button"] {
  /* This will come the closest to restoring default rendering. */
  border: revert;
}

有關更多資訊，請參閱全域性 CSS revert 值。

HTML 表單的一個主要問題是使用 CSS 樣式化表單小部件。表單控制元件的外觀特定於瀏覽器和作業系統。例如，顏色型別的輸入在 Safari、Chrome 和 Firefox 瀏覽器中看起來不同，但顏色選擇器小部件在裝置上的所有瀏覽器中都相同，因為它打開了作業系統的本機顏色選擇器。

通常最好不要更改表單控制元件的預設外觀，因為更改一個 CSS 屬性值可能會更改某些輸入型別，但不會更改其他輸入型別。例如，如果你宣告 input { font-size: 2rem; }，它將影響 number、date 和 text，但不會影響 color 或 range。如果你更改屬性，這可能會以意想不到的方式影響小部件的外觀。例如，[value] { background-color: #ccc; } 可能已用於定位具有 value 屬性的每個 <input>，但更改 <meter> 的背景顏色或邊框半徑會導致瀏覽器之間可能出現意想不到的結果。你可以宣告 appearance: none; 來刪除瀏覽器樣式，但這通常會違背目的：因為你失去了所有樣式，刪除了你的訪問者習慣的預設外觀和感覺。

總之，在樣式化表單控制元件小部件時，使用 CSS 樣式化它們的副作用可能是不可預測的。所以不要。正如你在 表單小部件屬性相容性表格 文章中看到的那樣，這非常困難。即使仍然可以對文字元素進行一些調整（例如大小或字型顏色），也總是會有一些副作用。最好的方法是根本不樣式化 HTML 表單小部件。但是你仍然可以對所有周圍的專案應用樣式。此外，如果你必須更改表單小部件的預設樣式，請定義一個樣式指南以確保所有表單控制元件的一致性，這樣使用者體驗就不會被破壞。你還可以研究一些困難的技術，例如 使用 JavaScript 重新構建小部件。但如果是這種情況，不要猶豫 向你的客戶收取這種愚蠢行為的費用。

CSS 和 JavaScript 是很棒的技術，但重要的是要確保你不會破壞舊版瀏覽器。在使用目標瀏覽器中未完全支援的功能之前，你應該進行功能檢測

在樣式化替換的表單控制元件小部件之前，你可以檢查瀏覽器是否支援你計劃使用的功能 @supports

@supports (appearance: none) {
  input[type="search"] {
    appearance: none;
    /* restyle the search input */
  }
}

<appearance> 屬性可用於使用平臺本機樣式顯示元素，或者，如使用 none 值一樣，刪除預設平臺本機樣式。

最大的問題之一是 API 的可用性。因此，使用“非侵入式”JavaScript 被認為是最佳實踐。這是一種開發模式，定義了兩個要求

• 結構和行為之間的嚴格分離。
• 如果程式碼中斷，內容和基本功能必須保持可訪問和可用。

非侵入式 JavaScript 的原則（最初由 Peter-Paul Koch 為 Dev.Opera.com 撰寫）很好地描述了這些想法。

即使一些墊片非常注意效能，載入額外的指令碼也會影響應用程式的效能。對於舊版瀏覽器來說，這一點尤其重要；它們中的許多擁有非常慢的 JavaScript 引擎，這會導致所有墊片的執行對使用者來說很痛苦。效能是一個單獨的主題，但舊版瀏覽器對此非常敏感：基本上，它們很慢，需要的墊片越多，需要處理的 JavaScript 就越多。因此，與現代瀏覽器相比，它們承受著雙重負擔。使用舊版瀏覽器測試你的程式碼，以檢視它們的實際效能。有時，放棄一些功能比在所有瀏覽器中擁有完全相同的功能帶來更好的使用者體驗。最後提醒一下，始終考慮終端使用者。

如你所見，考慮瀏覽器和作業系統預設的表單控制元件外觀非常重要。有許多技術可以處理這些問題；然而，掌握所有這些技術超出了本文的範圍。基本前提是在著手解決挑戰之前，考慮是否值得更改預設實現。

如果你閱讀了本 HTML 表單指南 的所有文章，你現在應該可以輕鬆使用表單。如果你發現新的技巧或提示，請幫助改進本指南。

• 你的第一個 HTML 表單
• 如何構建 HTML 表單
• 本機表單小部件
• HTML5 輸入型別
• 其他表單控制元件
• UI 偽類
• 樣式化 HTML 表單
• 表單資料驗證
• 傳送表單資料

• 透過 JavaScript 傳送表單
• 如何構建自定義表單小部件
• 舊版瀏覽器中的 HTML 表單
• HTML 表單的高階樣式
• 表單小部件屬性相容性表格