<button>与<input type ="button"/>.哪个用?

Aron Rotteveel 1588 html compatibility button html-input

在查看大多数网站(包括SO)时,大多数网站使用:

<input type="button" />

代替:

<button></button>
  • 如果有的话,两者之间的主要区别是什么?
  • 是否有正当理由使用一个而不是另一个?
  • 有合理的理由使用它们吗?
  • 是否使用<button>兼容性问题,看到它没有被广泛使用?

Tamas Czineg.. 642

  • 这是一个描述差异的页面(基本上你可以将html放入一个<button></button>)
  • 另一页描述了人们避免的原因<button></button>(提示:IE6)

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

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

  • 这个答案是在2009年,因为现在IE6已经死了我认为现在没有理由不使用"<button>"? (174认同)
  • 如果他们想要盗版,让他们得到你的网站的一个sucky版本.删除IE6,删除IE7,遗憾的是IE8仍然需要支持. (73认同)
  • 正如许多人所讽刺的那样,仍旧旧版IE的用户可能习惯于互联网看起来非常糟糕. (51认同)
  • 根据微软的[IE6倒计时页面](http://www.modern.ie/ie6countdown),中国的IE6使用量仍在(截至2014年1月)约22%.http://www.ie6death.com/注意到IE6支持将于2014年4月8日结束. (14认同)
  • `<button />`还有一个`form`属性(和相关属性),因此它可以链接到文档正文的其他部分中的表单. (7认同)
  • 另一个显着的区别是按钮元素比使用输入元素稍微更具语义性(至少在于您不必开始扫描寻找"类型"的无序属性集以查看它不是另一种形式之一控件,虽然你仍然需要这样做来区分type = button | submit). (2认同)

Travis J.. 307

就像旁注一样,<button>将隐式提交,如果你想在没有提交的情况下使用表单中的按钮,这可能会导致问题.因此,使用<input type="button">(或<button type="button">)的另一个原因

编辑 - 更多细节

没有类型,button隐式接收类型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"

  • 哦亲爱的W3C,为什么`提交`作为默认值,99.9%的表格有很多`button`和******submit` ?! (36认同)
  • 很多表单也只有一个按钮,即提交.我想,不得不单程打电话. (10认同)
  • 你能添加更多细节吗?如果有多个按钮会发生什么?这只是type ='submit'吗? (3认同)
  • 这可能是大问题!我的测试代码提交了大约80%的时间,否则它被视为普通按钮.在<form>中使用<button>时很容易 (3认同)
  • @ mik01aj"表单中有多少提交按钮或输入无关紧要,其中任何一个显式或隐式输入为提交,点击后,都会提交表单." 这不是很明显吗?任何提交按钮都应该提交表格.为什么这么说?我错过了什么? (3认同)

Noldorin.. 168

这篇文章似乎提供了很好的差异概述.

从页面:

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

按钮元素 - W3C


小智.. 42

<button>元素内部,您可以放置​​内容,如文本或图像.

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

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

  • +1,因为`<input />`确实是一个void元素,而`<button>`则不是 (3认同)

user54579.. 37

引用

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

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

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

  • 小心,因为w3schools的准确性不为人所知:http://w3fools.com/ (73认同)
  • @Hawken那个页面是由那些认为W3Schools假装成W3C的白痴写的.实际上,W3Schools并不比处理这种材料的数千个其他网站更好或更差. (40认同)
  • @MrLister W3Schools很容易成为Web技术信息最常用的非官方来源.质量真的太糟糕了.为什么不把它们单独出来?W3Fools出了什么问题?那里的一切对我来说都是正确的. (16认同)
  • @MrLister我和那些认为W3Schools与W3C有联系的人交谈过.虽然我不确定我是否同意W3Fools"提供准确信息的责任",但我确实认为W3Schools的准确性还有待改进,而且其批评者不一定是白痴.(我从W3S那里学到了很多东西,当它很好的时候回来了;它没有跟上标准的步伐.) (10认同)

gimel.. 16

在HTML手册中引用表单页面:

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


小智.. 16

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

  • 对于客户端脚本.<input type ="button">在HTML中没有任何功能. (8认同)

Attilio.. 16

我将引用文章锚点,输入和按钮之间的区别:

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

一个输入(<input>)表示数据字段:所以你的意思是某些用户数据发送给服务器.有相关的几个按钮输入类型:<input type="submit">,<input type="image">,<input type="file">,<input type="reset">,<input type="button">.
它们中的每一个都有含义,例如" file "用于上传文件," reset "清除表单," submit "将数据发送到服务器.检查MDNW3Schools 上的 W3参考.

按钮(<button>)元素是相当具有通用性:

  • 您可以在按钮中嵌套元素,例如图像,段落或标题;
  • 按钮也可以包含::before::after伪元素;
  • 按钮支持该disabled属性.这样可以轻松打开和关闭它们.

再次,在MDNW3Schools 检查<button>标签的W3参考.


Sergey Sklya.. 11

<button>
  • 默认情况下,如果它具有"type ="submit"属性
  • 可以在没有形式和形式的情况下使用.
  • 允许使用文字或HTML内容
  • 允许使用css伪元素(如:之前)
  • 标签名称通常对单个表单是唯一的

<input type='button'>
  • type应设置为'submit'以表现为提交元素
  • 只能用于表格.
  • 只允许文字内容
  • 没有css伪元素
  • 与大多数表单元素(输入)相同的标记名称

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


MattC.. 8

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

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


jnowland.. 7

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

由于<input type="button">视觉渲染不同于某种情况<a><span>在某些情况下使用类进行样式时我会避免使用它们.

值得注意的是,目前的最佳答案是在2009年写的.现在IE6并不是一个问题,因此<button type="submit">Wins</button>我眼中的造型一致性排在首位.


小智.. 6

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

<input type="submit">另一方面,没有任何价值或检测问题,但你不能像你一样添加HTML <button>.风格也更难,而且样式并不总能在所有浏览器中做出很好的反应.希望这有帮助.


Roumelis Geo.. 5

我只想在此处的其余答案中添加一些内容。输入元素被认为是空元素或空元素(其他空元素是area,base,br,col,hr,img,input,link,meta和param。您也可以在此处检查),这意味着它们不能包含任何内容。除了没有任何内容之外,空元素不能具有任何伪元素,例如:: after和:: before,我认为这是一个主要缺点。


归档时间:

查看次数:

588514 次

最近记录:

1 年,11 月 前