为什么为 HTML 按钮指定类型很重要

剧透

没有 type 属性的按钮会充当type="submit"，并在点击时尝试提交表单数据。请明确您的意图，并友善地对待将来使用您代码的开发人员：提供类型。通过指定button、submit或reset，代码的用途更加清晰，也更易于维护。

按钮基础知识

如何用 HTML 创建按钮元素？我经常看到这样的写法：

<button>Press me</button>

这段代码是有效的 HTML，并且通过了W3C 标记验证服务。但是，我认为按钮上应该始终包含该type属性。如果缺少此属性，可能会引发潜在的混淆行为——在 Web 开发中，这种情况已经够多了！

注意：我使用<button>标签而不是输入标签，例如<input type=“button” />在 HTML 中创建按钮时。我推荐这样做，因为按钮标签在语义上符合此目的，并且比input标签更容易设置样式。

类型属性值

HTML 标签使用键值对（或称属性）来修改其功能。例如，一个常用的属性是 class 属性，就像这个 div 元素一样：<div class="foobar"></div>。每个 HTML 元素都有一组各自的有效属性。

按钮允许使用一个名为“type”的可选属性，用于定义按钮的用途。type属性可以采用以下三个值：

1. 提交
2. 按钮
3. 重置

“提交”

<button type=“submit”>Press me</button>

此按钮用于提交表单数据。提交按钮通常嵌套在表单中，例如<form>标签中。

“按钮”

<button type=“button”>Press me</button>

此按钮没有默认行为。必须使用 JavaScript 来定义点击时发生的行为。

“重置”

<button type=“reset”>Press me</button>

当嵌套在表单中时，单击此按钮会将表单控件重置为其初始值。

无类型

<button>Press me</button>

读完前面的定义后，你认为没有 type 属性的按钮会有什么表现？当缺少 type 属性时，按钮的行为与提交按钮相同。

这当然不是我预期的——我以为一个没有指定类型的按钮点击后不会有任何反应。如果你像我一样，没有预料到这种情况，这可能会导致你的代码出现问题（也就是 bug！）。

按钮类型实际作用

下面的动图展示了一个简单的表单（下方是 Codepen 的原始代码）。提交表单时，页面的背景颜色会通过 JavaScript 监听事件来改变onsubmit。表单中包含了前面提到的每种按钮类型，并标注了它们的类型值。注意点击每个按钮时会发生什么：

• 提交类型按钮会改变背景颜色并提交表单，正如预期的那样。

• 正如预期的那样，按钮类型的按钮不执行任何操作。

• 重置按钮没有任何作用，因为本例中没有任何需要重置的表单输入。这也是预料之中的。

• 没有明确指定类型值的按钮会提交表单并更改背景颜色。虽然我们在上面讨论过之后也预料到了这一点，但与其他类型的按钮相比，它仍然不够直观。

尝试使用这里的 CodePen 进行实验：

为什么总是要声明类型属性？

1）明确定义按钮的功能

如果按钮没有 type 属性，其用途就不明确。在编写代码时，您可能很清楚该按钮用于提交表单。但成为一名优秀的软件开发人员，其重要性之一就是编写易于维护且易于他人理解的代码。通过添加 type 属性，未来的开发人员，甚至未来的开发者，都可以快速轻松地了解按钮的用途。

2）避免错误

“为什么当我点击这个不相关的按钮时，表单会提交？”遵循这个建议，你和任何使用你的代码的人都不会再遇到这个错误：

对于任何不提交或重置表单数据的按钮，添加 type 属性button。

如果每个写 HTML 的人都明白按钮默认充当提交按钮，那么这条建议就没必要了。可惜的是，并非所有人都明白，所以在此期间，请声明一个按钮类型 🙂

受到wtfhtmlcss的启发。