被遗忘掉的button标签

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

• 当鼠标右键点击时，不会出现默认的浏览器菜单；
• 如果<button>标签中包含<input>标签，则与<input>标签关联的文字和其样式会全部消失。

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

正确使用 type 属性

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

• type="submit"：用于在表单中提交数据。默认情况下，触发提交表单前会触发 form 元素的 submit 事件。
• type="reset"：用于清除表单。默认情况下，触发清除表单前会触发 form 元素的 reset 事件。
• 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>

如果我们运行该代码，会发现并不能正常关闭浏览器窗口。这时我们需要将标签的type属性设置为button，如下所示：

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

这时，点击按钮就可以正常关闭浏览器窗口了。

总结

以上就是“被遗忘掉的 button 标签”的攻略，这里我们强烈建议大家在使用<button>标签时，一定要注意type属性，特别是在与相关元素进行关联时。