<input type=button> vs <button> [重复]

Posted 2023-02-22

【中文标题】<input type=button> vs <button> [重复]

【英文标题】：<input type=button> vs <button> [duplicate]

【发布时间】：2014-10-15 15:59:07

【问题描述】：

我有点困惑。这些有什么区别。请不要引用真正的旧帖子。我注意到访问某些样式在 html 和样式表中是不同的内联样式。

<input type=button> 
   vs 
<button>

我想我想知道哪一个会活到哪一个？ 或者考虑到网站创建中所有通用技术之间的兼容性，哪个是最好的？又名。这会造成最少的麻烦

【问题讨论】：

我使用<input type=button> 仅当控件的目的是导致 [form] 回发。在所有其他情况下，我使用<button>。 （这对我来说“感觉不错”，尽管我从未见过绝对客观的规则。）

【参考方案1】：

与<input> 标签不同，<button> 可以包含其他 html 元素作为其标签。 <input type="button"> 只能接受一个字符串作为它的标签文本（不支持css样式）。

此外，<button> 元素接受关于多个表单和单击操作的各种不常见但有用的属性。 See the MDN page for more details.

至于一个“活出”另一个，HTML 标准非常向后兼容。在 HTML 标准中消除之前，人类会将人类送上火星。

【讨论】：

许多标签已被弃用，一些已被废弃。当然这是一个缓慢的过程..

Elon 正在计算日子...我认为 至少和 一样好 - 我们应该从现在开始继续使用 吗？这样做有缺点吗？

如果有明显的缺点，我还没有遇到过。自从写下这个答案以来的这些年里，我对<input type="submit"> 的使用严格限制在我将它放在表单中时，只是为了减少对未来开发人员的意外。总而言之，我怀疑自从这个答案以来，我已经为每个 <input type="submit"> 创建了 15-20 个 <button> 标签。

我还要补充一点，<button> 可以有::before 和::after 伪类以及子类，而input 不能，因为它是自动关闭的。尝试将 CSS 应用于您的元素时需要考虑这一点。

【参考方案2】：

在<button> 元素中，您可以放置​​内容，例如文本或图像。 例如：<button type="button" onclick="alert('Hello world!')">Click Me!</button>

如果您在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的值。因此，请始终使用<input type="button"> 在 HTML 表单中创建按钮。

【参考方案3】：

输入类型=按钮 标签是提交表单的最简单方法。当客户点击按钮时，它会自动提交。您不需要添加任何脚本，当点击提交 INPUT 标签时，浏览器知道提交表单。

问题是这个按钮非常丑陋和朴素。您不能向其中添加图像。您可以像任何其他元素一样设置它的样式，但它仍然感觉像一个丑陋的按钮。

当您的表单即使在关闭了 javascript 的浏览器中也必须可访问时，请使用 INPUT 方法。

按钮

BUTTON 元素为提交表单提供了更多选项。您可以在 BUTTON 元素中放置任何内容并将其变成提交按钮。人们最常使用图像和文本。但是如果你愿意，你可以创建一个 DIV 并把整个东西变成一个提交按钮。

BUTTON 元素的最大缺点是它不会自动提交表单。这意味着需要某种类型的脚本来激活它。因此它比 INPUT 方法更难访问。任何未开启 JavaScript 的用户都将无法提交只有一个 BUTTON 元素的表单来提交。

对不那么重要的表单使用 BUTTON 方法。此外，这是在一个表单中添加其他提交选项的好方法。

来源：https://www.thoughtco.com/buttons-on-forms-3464313

【讨论】：

我的经历似乎正好相反。在最新版本的 firefox (v60) 中，单击按钮元素将提交表单，而单击输入类型按钮则不会（除非它是输入类型提交）。编辑：澄清：这是当两者都在一个表单标签内时。

【参考方案4】：

如果您想在表单中创建按钮，请使用输入元素中的<button>。

如果你想为一个动作创建按钮，请使用按钮标签。

更多信息：Difference between <input type='submit' /> and <button type='submit'>text</button>

【讨论】：

最好去这个链接了解更多信息：***.com/questions/3543615/…

@AnandDwivedi 上面引用了这个链接 :)

【参考方案5】：

取决于你想在哪里使用它。输入应该在表单内部，按钮可以在任何地方使用。

【讨论】：

input 元素必须在表单中。