被遗忘掉的button标签

当我们在开发网页时，可能会经常用到<button>标签，但有时候我们可能会遇到如下问题：

这些问题似乎无从下手，因为我们通常认为<button>标签不需要对其进行额外处理。然而，原因在于我们没有正确地使用type属性。

正确使用 type 属性

我们都知道，<button>标签有type属性，该属性用于指定按钮的类型。但有时我们可能会忘记设置它，或者错误地将其设置为错误的值。这就会导致一些不可预知的问题。下面是<button>标签的几个可选值及其行为：

因此，正确地使用 type 属性至关重要。

示例一

下面是一个使用了错解<button>标签的例子：

<button>
    <input type="submit" value="Submit">
</button>

我们在一个<button>标签中套了一个<input>标签。这是很常见的做法。但我们注意一下，如果我们统一让<button>和<input>标签的type属性都设置为submit，会发生什么呢？

<button type="submit">
    <input type="submit" value="Submit">
</button>

此时，<input>标签中的文字和样式就全都消失了。这是因为，如果一个元素被设置为type="submit"，它的默认行为是提交表单。此时，元素中所有的文本内容都会被提交到服务器。为了防止这种情况发生，我们应该将<button>标签的type属性设置为button，如下所示：

<button type="button">
    <input type="submit" value="Submit">
</button>

这时，<input>标签中的文字和样式就不会消失了。

示例二

下面是第二个示例。你是否想过如何关闭当前浏览器窗口呢？可以使用如下代码：

<button onclick="window.close()">关闭窗口</button>

如果我们运行该代码，会发现并不能正常关闭浏览器窗口。这时我们需要将