旧版浏览器中的 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 表单的高级样式
• 表单小部件属性兼容性表格