傳統瀏覽器中的 HTML 表單

瞭解這些問題

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

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

優雅降級是 Web 開發者最好的朋友

優雅降級和漸進增強是開發模式，它們允許你在同時支援各種瀏覽器的同時構建出色的東西。當你為現代瀏覽器構建東西，並希望它以某種方式在傳統瀏覽器上也能工作時，你正在執行優雅降級。

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

HTML 輸入型別

所有 HTML 輸入型別都可以在所有瀏覽器中使用，甚至是舊瀏覽器，因為它們的降級方式是高度可預測的。如果瀏覽器不知道 <input> 元素的 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" />

如果我們移除所有輸入框的邊框，我們可以使用全域性 CSS revert 值只恢復輸入按鈕的預設外觀。

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 #cccccc;
}
input[type="button"] {
  /* Revert the last border declaration */
  border: revert;
}

限制傳統瀏覽器中的樣式

傳統瀏覽器中 HTML 表單的一個大問題是用 CSS 為它們設定樣式。正如其他地方所介紹的，你可以宣告 appearance: none; 來移除預設樣式並在其基礎上構建你自己的樣式。然而，傳統瀏覽器比現代瀏覽器更不可能支援本模組前面介紹的樣式技術。如果你需要支援傳統瀏覽器，最好讓表單控制元件在傳統瀏覽器中保持無樣式。有關檢測特定輸入型別支援的建議，請參見下一節。

如果你必須修改傳統瀏覽器中表單小部件的預設樣式，請定義樣式指南以確保所有表單控制元件之間的一致性，從而不破壞使用者體驗。你還可以研究一些高難度技術，例如使用 JavaScript 重建小部件，但這可能得不償失。

特性檢測和 Polyfill

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

CSS 特性檢測

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

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

appearance 屬性可用於使用平臺原生樣式顯示元素，或者，如使用 none 值所示，移除預設的平臺原生樣式。

JavaScript 表單輸入檢測

你可以使用 JavaScript 來檢測是否支援特定的輸入型別。這是基於我們之前提到的事實——在不支援的瀏覽器中，所有輸入型別都會回退到 <input type="text">。

定義一個測試函式。函式體的第一行應該建立一個測試 <input> 元素。接下來，將其 type 屬性設定為你想要測試的型別。最後，測試 type 屬性值。在不支援該輸入型別的瀏覽器中，最後一行將不起作用，並且 type 將返回為 text。在下面這行中，我們使用否定運算子 (!) 反轉了返回值，因為如果 type 不是 text，則該型別受支援，因此我們希望返回 true。完整的函式如下所示

function testDatetimeLocalSupport() {
  const testInput = document.createElement("input");
  testInput.setAttribute("type", "datetime-local");
  return testInput.type !== "text";
}

以上例子展示了此類測試的基本思想。然而，與其重新發明輪子，不如使用功能檢測庫來處理此類測試。

根據測試結果，你可以選擇使用 JavaScript 為不受支援的型別構建自定義替代方案，或者不應用為不受支援的型別設定樣式的樣式表，因為你希望為傳統瀏覽器提供簡單的預設樣式。

無侵入式 JavaScript

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

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

無侵入式 JavaScript 的原則（最初由 Peter-Paul Koch 為 dev.opera.com 撰寫）很好地描述了這些思想。

注意效能

儘管有些 Polyfill 非常注重效能，但載入額外的指令碼會影響應用程式的效能。這對於傳統瀏覽器尤其關鍵；許多傳統瀏覽器都有非常慢的 JavaScript 引擎，這會使所有 Polyfill 的執行對使用者來說很痛苦。效能本身就是一個主題，但傳統瀏覽器對它非常敏感：基本上，它們很慢，它們需要的 Polyfill 越多，它們需要處理的 JavaScript 就越多。因此，與現代瀏覽器相比，它們的負擔是雙重的。使用傳統瀏覽器測試你的程式碼，看看它們的實際表現如何。有時，放棄一些功能比在所有瀏覽器中都擁有完全相同的功能能帶來更好的使用者體驗。最後提醒一句，請始終考慮終端使用者。

總結

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

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