首页 文章

<button>与<input type =“button”/> . 哪个用？

提问于
浏览 次
1479

在查看大多数站点（包括SO）时，大多数站点使用：

<input type="button" />

代替：

<button></button>

  • 如果有的话，两者之间有哪些主要区别？

  • 是否有正当理由使用一个而不是另一个？

  • 是否有合理的理由使用它们？

  • 使用 <button> 是否存在兼容性问题，看到它没有被广泛使用？

html button compatibility html-input

15 回答

  • 7

    如果你使用jQuery有很大的不同 . jQuery知道输入上的事件多于按钮上的事件 . 在按钮上，jQuery只知道“点击”事件 . 在输入上，jQuery知道'click'，'focus'和'blur'事件 .

    您可以随时根据需要将事件绑定到按钮，但请注意jQuery自动识别的事件是不同的 . 例如，如果您创建了一个在页面上有“focusin”事件时执行的函数，则输入将触发该函数，但按钮则不会 .

    回复于
  • 606

    如果要在表单中创建按钮，请使用input元素中的按钮 . 如果要为操作创建按钮，请使用按钮标记 .

    回复于
  • 16

    引用HTML手册中的Forms Page：

    使用BUTTON元素创建的按钮功能就像使用INPUT元素创建的按钮一样，但它们提供了更丰富的渲染可能性：BUTTON元素可能包含内容 . 例如，包含图像的BUTTON元素的功能类似于并且可能类似于其类型设置为“image”的INPUT元素，但BUTTON元素类型允许内容 .

    回复于
  • 3

    引用

    重要提示：如果您在HTML表单中使用button元素，则不同的浏览器将提交不同的值 . Internet Explorer将在<button>和</ button>标记之间提交文本，而其他浏览器将提交value属性的内容 . 使用input元素在HTML表单中创建按钮 .

    来自：http://www.w3schools.com/tags/tag_button.asp

    如果我理解正确，答案是从浏览器到浏览器的兼容性和输入一致性

    回复于
  • 8

    此外，其中一个差异可能来自库的提供者，以及他们编码的内容 . 例如，在这里，我想到了一个元素的某些功能，即他/她在另一个元素上提供的功能 . 因此，当您使用库时，您可能会遇到一个元素的问题，您将不会面对另一个元素 . 简单地说像 input 这样的流行的，主要是固定的，只是因为它更受欢迎 .

    回复于
  • 36

    我会引用文章The Difference Between Anchors, Inputs and Buttons：

    Anchors （ <a> 元素）表示人们可以在浏览器中导航或下载的超链接，资源 . 如果要允许用户移动到新页面或下载文件，请使用锚点 .

    input （ <input> ）表示数据字段：因此您要将某些用户数据发送到服务器 . 有几种与按钮相关的输入类型： <input type="submit"> ， <input type="image"> ， <input type="file"> ， <input type="reset"> ， <input type="button"> .
    它们中的每一个都有含义，例如“file " is used to upload a file, " reset " clears a form, and " submit”将数据发送到服务器 . 检查W3参考on MDN或on W3Schools .

    button （ <button>) 元素非常多才多艺：

    • 您可以在按钮中嵌套元素，例如图像，段落或 Headers ;

    • 按钮还可以包含 ::before 和 ::after 伪元素;

    • 按钮支持 disabled 属性 . 这样可以轻松打开和关闭它们 .

    再次，检查 <button> 标签on MDN或on W3Schools的W3参考 .

    回复于
  • 6
    <button>

    默认情况下

    • 的行为类似于"type=" submit“属性

    • 可以在没有表格的情况下使用，也可以在表格中使用 .
      允许

    • 文本或html内容
      允许使用

    • css伪元素（如：之前）

    • 标记名称通常对单个表单是唯一的

    与

    <input type='button'>

    • 类型应设置为'submit'以充当提交元素

    • 只能在表单中使用 .

    • 仅允许文本内容

    • 没有css伪元素

    • 与大多数表单元素（输入）相同的标记名称

    在现代浏览器中，这两个元素都可以使用css轻松设置样式，但在大多数情况下， button 元素是首选，因为您可以使用内部html和伪元素设置更多样式

    回复于
  • 281

    简短的回答是IE6 / 7中的按钮与其他浏览器的行为不同，而输入按钮在所有浏览器中的行为都相同 .

    回复于
  • 3

    正如旁注， <button> 将隐式提交，如果您想在没有提交的情况下使用表单中的按钮，这可能会导致问题 . 因此，使用 <input type="button"> （或 <button type="button"> ）的另一个原因

    Edit - 更多细节

    没有类型，button implicitly receives type of submit . 表单中有多少提交按钮或输入无关紧要，其中任何一个显式或隐式输入为提交，单击时，将提交表单 .

    按钮有3种支持的类型

    submit ||  "submits the form when clicked (default)"
reset  ||  "resets the fields in the form when clicked"
button ||  "clickable, but without any event handler until one is assigned"
    回复于
  • 16

    就CSS样式而言， <button type="submit" class="Btn">Example</button> 更好，因为它使您能够使用CSS :before 和 :after pseudo classes这可以提供帮助 .

    由于 <input type="button"> 在视觉上在某些情况下使用类进行样式设置时，使用 <a> 或 <span> 呈现不同，我会避免使用它们 .

    非常值得注意的是current top answer是在2009年写的 . 现在IE6并不是一个问题，所以 <button type="submit">Wins</button> 在我眼中的造型一致性排在首位 .

    回复于
  • 15

    • Here's a page描述差异（基本上你可以将html放入 <button></button> ）

    • And another page描述人们为什么要避免 <button></button> （提示：IE6）

    使用 <button /> 时的另一个IE问题：

    当我们谈论IE时，它有一些与按钮宽度有关的错误 . 当你试图添加样式时，它会神秘地添加额外的填充，这意味着你必须添加一个小小的黑客来控制事物 .

    回复于
  • 5

    <button> 非常灵活，因为它可以包含HTML . 而且，使用CSS进行样式设计要容易得多，并且样式实际上应用于所有浏览器 . 但是，有关Internet Explorer（Eww！IE！）的一些缺点 . Internet Explorer不会使用标记的内容作为值来正确检测值属性 . 无论是否单击该按钮，表单中的所有值都将发送到服务器端 . 这使得使用它作为一个棘手的问题和痛苦 .

    另一方面 <input type="submit"> 并不是't have any value or detection issues, but you can'，但是，使用 <button> 添加HTML . 它始终在所有浏览器中都能很好地响应 . 希望这有帮助 .

    回复于
  • 39

    我只想在这里为其余答案添加一些内容 . 输入元素被认为是空元素或空元素（其他空元素是area，base，br，col，hr，img，input，link，meta和param . 您也可以检查here），这意味着它们不能包含任何内容 . 除了没有任何内容，空元素 cannot have any pseudo-elements like ::after and ::before ，我认为这是一个主要的缺点 .

    回复于
  • 0

    This article似乎提供了很好的差异概述 .

    从页面：

    使用BUTTON元素创建的按钮功能就像使用INPUT元素创建的按钮一样，但它们提供了更丰富的渲染可能性：BUTTON元素可能包含内容 . 例如，包含图像的BUTTON元素的功能类似于并且可能类似于其类型设置为“image”的INPUT元素，但BUTTON元素类型允许内容 . 按钮元素 - W3C

    回复于
  • 162

    在 <button> 元素中，您可以放置内容，如文本或图像 .

    <button type="button">Click Me!</button>

    这是此元素与使用 <input> 元素创建的按钮之间的区别 .

    回复于

相关问题