代替:两者..."> 代替:两者..."/> 代替:两者..."> 代替:两者...">
与<input type =“ button” />。使用哪个?</p> html HTML 2020-03-13 </div> 查看大多数站点(包括SO)时,大多数使用: <input type="button" /> 代替: <button></button> 两者之间的主要区别是什么? 是否有正当理由使用一个而不是另一个? 是否有使用它们的有效理由? <button>看到使用不是很广泛时,使用会带来兼容性问题吗? </div> 第1493篇《与<input type =“ button” />。使用哪个?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p> 共13个回答 Stafan逆天 2020.03.13 我将引用文章“锚点,输入和按钮之间的区别”: 锚点(<a>元素)代表超链接,人们可以浏览到或在浏览器中下载的资源。如果要允许用户移动到新页面或下载文件,请使用锚点。 一个输入(<input>)表示数据字段:所以一些用户数据你的意思发送给服务器。有几种与按钮相关的输入类型: <input type="submit"> <input type="image"> <input type="file"> <input type="reset"> <input type="button"> 它们每个都有含义,例如,“ file ”用于上载文件,“ reset ”清除表单,然后“ submit ”将数据发送到服务器。检查MDN或W3Schools 上的 W3参考。 的按钮(<button>)元素是相当具有通用性: 您可以将元素嵌套在按钮内,例如图像,段落或标题; 按钮也可以包含::before和::after伪元素; 按钮支持disabled属性。这样可以轻松打开和关闭它们。 再次,检查W3参考以获取MDN或W3Schools 上的<button>标签。 有壳网 2020.03.13 我只想在此处的其余答案中添加一些内容。输入元素被认为是空元素或空元素(其他空元素是area,base,br,col,hr,img,input,link,meta和param。您也可以在此处检查),这意味着它们不能包含任何内容。除了没有任何内容外,空元素不能具有任何伪元素,例如:: after和:: before,我认为这是一个主要缺点。 番长阿飞 2020.03.13 此外,差异之一可能来自库的提供者及其所编写的内容。例如,在这里,我将Cordova平台与移动角度ui结合使用,并且虽然input / div / etc标签与ng-click可以很好地工作,但该按钮可能导致Visual Studio调试器崩溃,这肯定是程序员造成的差异。请注意,MattC答案指向的是同一问题,jQuery只是一个库,提供程序没有想到一个元素上的功能,而他/他在另一个元素上提供了功能。因此,当您使用图书馆时,您可能会遇到一个元素的问题,而您不会遇到另一个。input只是因为它更受欢迎,所以像这样的受欢迎的大多数将是固定的。 小欧学姐 2020.03.13 This article seems to offer a pretty good overview of the difference. From the page: 使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“ image”的INPUT元素,但是BUTTON元素类型允许内容。 按钮元素-W3C Tony凯 2020.03.13 <button>灵活,因为它可以包含HTML。而且,使用CSS进行样式设置要容易得多,并且样式实际上已应用到所有浏览器中。但是,有关Internet Explorer(Eww!IE!)有一些缺点。Internet Explorer使用标记的内容作为值,无法正确检测到value属性。表单中的所有值都发送到服务器端,无论是否单击该按钮。这使得使用它既<button type="submit">棘手又痛苦。 <input type="submit">另一方面,它没有任何价值或检测问题,但是您不能像使用一样添加HTML <button>。这也很难设置样式,并且样式在所有浏览器中不一定总是响应良好。希望这会有所帮助。 达蒙Eva 2020.03.13 这是描述差异的页面(基本上,您可以将html放入<button></button>) 另一页描述了人们为什么回避的原因<button></button>(提示:IE6) 使用时的另一个IE问题<button />: 当我们谈论IE时,有一些与按钮宽度有关的错误。当您尝试添加样式时,它将神秘地添加额外的填充,这意味着您必须添加一个微小的技巧来控制一切。 米亚Near 2020.03.13 引用HTML手册中的“ 表单页面 ”: 使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“图像”的INPUT元素,但是BUTTON元素类型允许内容。 小小乐 2020.03.13 就CSS样式而言,这<button type="submit" class="Btn">Example</button>是更好的选择,因为它使您能够使用CSS :before和:after 伪类,这可以提供帮助。 由于在某些情况下类的<input type="button">视觉呈现方式与<a>或不同,因此<span>我避免使用它们。 值得注意的是,当前的最佳答案是在2009年编写的。如今,IE6不再是一个问题,因此<button type="submit">Wins</button>我眼中的样式一致性始终居于首位。 Sam伽罗 2020.03.13 如果您使用的是jQuery,则会有很大的不同。jQuery知道输入上的事件比按钮上的事件更多。在按钮上,jQuery仅知道“单击”事件。在输入上,jQuery知道“单击”,“焦点”和“模糊”事件。 您总是可以根据需要将事件绑定到按钮,但是要知道jQuery自动知道的事件是不同的。例如,如果您创建了一个在页面上出现“ focusin”事件时就执行的函数,则输入将触发该函数,但按钮不会触发。 神无阳光 2020.03.13 如果要在表单中创建按钮,请使用输入元素中的按钮。如果要为操作创建按钮,请使用按钮标签。 MandyL 2020.03.13 引用 重要提示:如果在HTML表单中使用button元素,则不同的浏览器将提交不同的值。Internet Explorer将在<button>和</button>标记之间提交文本,而其他浏览器将提交value属性的内容。使用input元素以HTML形式创建按钮。 来自:http : //www.w3schools.com/tags/tag_button.asp 如果我理解正确,答案是浏览器之间的兼容性和输入一致性 TomSam 2020.03.13 就像一个旁注,<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" Green小哥Tom 2020.03.13 <button>您可以在元素内放置内容,例如文本或图像。 <button type="button">Click Me!</button> 这是此元素和使用该<input>元素创建的按钮之间的区别。
2020-03-13
查看大多数站点(包括SO)时,大多数使用:
<input type="button" />
代替:
<button></button>
<button>
第1493篇《与<input type =“ button” />。使用哪个?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点</p> 共13个回答 Stafan逆天 2020.03.13 我将引用文章“锚点,输入和按钮之间的区别”: 锚点(<a>元素)代表超链接,人们可以浏览到或在浏览器中下载的资源。如果要允许用户移动到新页面或下载文件,请使用锚点。 一个输入(<input>)表示数据字段:所以一些用户数据你的意思发送给服务器。有几种与按钮相关的输入类型: <input type="submit"> <input type="image"> <input type="file"> <input type="reset"> <input type="button"> 它们每个都有含义,例如,“ file ”用于上载文件,“ reset ”清除表单,然后“ submit ”将数据发送到服务器。检查MDN或W3Schools 上的 W3参考。 的按钮(<button>)元素是相当具有通用性: 您可以将元素嵌套在按钮内,例如图像,段落或标题; 按钮也可以包含::before和::after伪元素; 按钮支持disabled属性。这样可以轻松打开和关闭它们。 再次,检查W3参考以获取MDN或W3Schools 上的<button>标签。 有壳网 2020.03.13 我只想在此处的其余答案中添加一些内容。输入元素被认为是空元素或空元素(其他空元素是area,base,br,col,hr,img,input,link,meta和param。您也可以在此处检查),这意味着它们不能包含任何内容。除了没有任何内容外,空元素不能具有任何伪元素,例如:: after和:: before,我认为这是一个主要缺点。 番长阿飞 2020.03.13 此外,差异之一可能来自库的提供者及其所编写的内容。例如,在这里,我将Cordova平台与移动角度ui结合使用,并且虽然input / div / etc标签与ng-click可以很好地工作,但该按钮可能导致Visual Studio调试器崩溃,这肯定是程序员造成的差异。请注意,MattC答案指向的是同一问题,jQuery只是一个库,提供程序没有想到一个元素上的功能,而他/他在另一个元素上提供了功能。因此,当您使用图书馆时,您可能会遇到一个元素的问题,而您不会遇到另一个。input只是因为它更受欢迎,所以像这样的受欢迎的大多数将是固定的。 小欧学姐 2020.03.13 This article seems to offer a pretty good overview of the difference. From the page: 使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“ image”的INPUT元素,但是BUTTON元素类型允许内容。 按钮元素-W3C Tony凯 2020.03.13 <button>灵活,因为它可以包含HTML。而且,使用CSS进行样式设置要容易得多,并且样式实际上已应用到所有浏览器中。但是,有关Internet Explorer(Eww!IE!)有一些缺点。Internet Explorer使用标记的内容作为值,无法正确检测到value属性。表单中的所有值都发送到服务器端,无论是否单击该按钮。这使得使用它既<button type="submit">棘手又痛苦。 <input type="submit">另一方面,它没有任何价值或检测问题,但是您不能像使用一样添加HTML <button>。这也很难设置样式,并且样式在所有浏览器中不一定总是响应良好。希望这会有所帮助。 达蒙Eva 2020.03.13 这是描述差异的页面(基本上,您可以将html放入<button></button>) 另一页描述了人们为什么回避的原因<button></button>(提示:IE6) 使用时的另一个IE问题<button />: 当我们谈论IE时,有一些与按钮宽度有关的错误。当您尝试添加样式时,它将神秘地添加额外的填充,这意味着您必须添加一个微小的技巧来控制一切。 米亚Near 2020.03.13 引用HTML手册中的“ 表单页面 ”: 使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“图像”的INPUT元素,但是BUTTON元素类型允许内容。 小小乐 2020.03.13 就CSS样式而言,这<button type="submit" class="Btn">Example</button>是更好的选择,因为它使您能够使用CSS :before和:after 伪类,这可以提供帮助。 由于在某些情况下类的<input type="button">视觉呈现方式与<a>或不同,因此<span>我避免使用它们。 值得注意的是,当前的最佳答案是在2009年编写的。如今,IE6不再是一个问题,因此<button type="submit">Wins</button>我眼中的样式一致性始终居于首位。 Sam伽罗 2020.03.13 如果您使用的是jQuery,则会有很大的不同。jQuery知道输入上的事件比按钮上的事件更多。在按钮上,jQuery仅知道“单击”事件。在输入上,jQuery知道“单击”,“焦点”和“模糊”事件。 您总是可以根据需要将事件绑定到按钮,但是要知道jQuery自动知道的事件是不同的。例如,如果您创建了一个在页面上出现“ focusin”事件时就执行的函数,则输入将触发该函数,但按钮不会触发。 神无阳光 2020.03.13 如果要在表单中创建按钮,请使用输入元素中的按钮。如果要为操作创建按钮,请使用按钮标签。 MandyL 2020.03.13 引用 重要提示:如果在HTML表单中使用button元素,则不同的浏览器将提交不同的值。Internet Explorer将在<button>和</button>标记之间提交文本,而其他浏览器将提交value属性的内容。使用input元素以HTML形式创建按钮。 来自:http : //www.w3schools.com/tags/tag_button.asp 如果我理解正确,答案是浏览器之间的兼容性和输入一致性 TomSam 2020.03.13 就像一个旁注,<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" Green小哥Tom 2020.03.13 <button>您可以在元素内放置内容,例如文本或图像。 <button type="button">Click Me!</button> 这是此元素和使用该<input>元素创建的按钮之间的区别。
我将引用文章“锚点,输入和按钮之间的区别”:
锚点(<a>元素)代表超链接,人们可以浏览到或在浏览器中下载的资源。如果要允许用户移动到新页面或下载文件,请使用锚点。
<a>
一个输入(<input>)表示数据字段:所以一些用户数据你的意思发送给服务器。有几种与按钮相关的输入类型:
<input>
<input type="submit">
<input type="image">
<input type="file">
<input type="reset">
<input type="button">
它们每个都有含义,例如,“ file ”用于上载文件,“ reset ”清除表单,然后“ submit ”将数据发送到服务器。检查MDN或W3Schools 上的 W3参考。
的按钮(<button>)元素是相当具有通用性:
<button>)
::before
::after
disabled
再次,检查W3参考以获取MDN或W3Schools 上的<button>标签。
我只想在此处的其余答案中添加一些内容。输入元素被认为是空元素或空元素(其他空元素是area,base,br,col,hr,img,input,link,meta和param。您也可以在此处检查),这意味着它们不能包含任何内容。除了没有任何内容外,空元素不能具有任何伪元素,例如:: after和:: before,我认为这是一个主要缺点。
此外,差异之一可能来自库的提供者及其所编写的内容。例如,在这里,我将Cordova平台与移动角度ui结合使用,并且虽然input / div / etc标签与ng-click可以很好地工作,但该按钮可能导致Visual Studio调试器崩溃,这肯定是程序员造成的差异。请注意,MattC答案指向的是同一问题,jQuery只是一个库,提供程序没有想到一个元素上的功能,而他/他在另一个元素上提供了功能。因此,当您使用图书馆时,您可能会遇到一个元素的问题,而您不会遇到另一个。input只是因为它更受欢迎,所以像这样的受欢迎的大多数将是固定的。
input
This article seems to offer a pretty good overview of the difference.
From the page:
使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“ image”的INPUT元素,但是BUTTON元素类型允许内容。 按钮元素-W3C
使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“ image”的INPUT元素,但是BUTTON元素类型允许内容。
按钮元素-W3C
<button>灵活,因为它可以包含HTML。而且,使用CSS进行样式设置要容易得多,并且样式实际上已应用到所有浏览器中。但是,有关Internet Explorer(Eww!IE!)有一些缺点。Internet Explorer使用标记的内容作为值,无法正确检测到value属性。表单中的所有值都发送到服务器端,无论是否单击该按钮。这使得使用它既<button type="submit">棘手又痛苦。
<button type="submit">
<input type="submit">另一方面,它没有任何价值或检测问题,但是您不能像使用一样添加HTML <button>。这也很难设置样式,并且样式在所有浏览器中不一定总是响应良好。希望这会有所帮助。
使用时的另一个IE问题<button />:
<button />
当我们谈论IE时,有一些与按钮宽度有关的错误。当您尝试添加样式时,它将神秘地添加额外的填充,这意味着您必须添加一个微小的技巧来控制一切。
引用HTML手册中的“ 表单页面 ”:
使用BUTTON元素创建的按钮的功能与使用INPUT元素创建的按钮一样,但是它们提供了更丰富的呈现可能性:BUTTON元素可能具有内容。例如,包含图像功能的BUTTON元素类似于并且可能类似于其类型设置为“图像”的INPUT元素,但是BUTTON元素类型允许内容。
就CSS样式而言,这<button type="submit" class="Btn">Example</button>是更好的选择,因为它使您能够使用CSS :before和:after 伪类,这可以提供帮助。
<button type="submit" class="Btn">Example</button>
:before
:after
由于在某些情况下类的<input type="button">视觉呈现方式与<a>或不同,因此<span>我避免使用它们。
<span>
值得注意的是,当前的最佳答案是在2009年编写的。如今,IE6不再是一个问题,因此<button type="submit">Wins</button>我眼中的样式一致性始终居于首位。
<button type="submit">Wins</button>
如果您使用的是jQuery,则会有很大的不同。jQuery知道输入上的事件比按钮上的事件更多。在按钮上,jQuery仅知道“单击”事件。在输入上,jQuery知道“单击”,“焦点”和“模糊”事件。
您总是可以根据需要将事件绑定到按钮,但是要知道jQuery自动知道的事件是不同的。例如,如果您创建了一个在页面上出现“ focusin”事件时就执行的函数,则输入将触发该函数,但按钮不会触发。
如果要在表单中创建按钮,请使用输入元素中的按钮。如果要为操作创建按钮,请使用按钮标签。
引用
重要提示:如果在HTML表单中使用button元素,则不同的浏览器将提交不同的值。Internet Explorer将在<button>和</button>标记之间提交文本,而其他浏览器将提交value属性的内容。使用input元素以HTML形式创建按钮。
</button>
来自:http : //www.w3schools.com/tags/tag_button.asp
如果我理解正确,答案是浏览器之间的兼容性和输入一致性
就像一个旁注,<button>将隐式提交,如果您要在表单中使用按钮而不提交,则可能会导致问题。因此,使用<input type="button">(或<button type="button">)的另一个原因
<button type="button">
编辑 - 更多详细信息
没有类型,则button隐式接收的类型submit。表单中有多少个提交按钮或输入都没有关系,单击时显式或隐式键入为提交的任何一个按钮将被提交。
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"
<button>您可以在元素内放置内容,例如文本或图像。
<button type="button">Click Me!</button>
这是此元素和使用该<input>元素创建的按钮之间的区别。
相似问题
0 回答
5 回答
25 回答
问题类别