浅谈<button>与<input>

<button>只想简简单单的做个按钮。而<input>更多的侧重于表单提交.。

1.<button>

文字按钮：

<button type="button">这是一个按钮</button>

图片按钮：

<button type="button">
   <img src="https://www.baidu.com/img/bd_logo1.png(随便填一个图片地址就好)" width="100" height="50">
</button>

请注意写 type="button"让我们来看看w3c的解释：

<button> 标签定义一个按钮。

在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input 元素创建的按钮之间的不同之处。

<button> 控件 与 <input type="button"> 相比，提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。

唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。

请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。

2.<input>

一般都是拿来在<form>里面提交表单的用法

<form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <input name="subject" type="submit" value="123">
    <input name="subject" type="submit" value="321">
</form>

//name可以重复 id只能一个 action是提交的位置 value是提交的值

但是你说我非要用button呢

  <form action="http://www.w3school.com.cn/example/html/form_action.asp"
    method="get">
    请选择你喜爱的项目:
    <button name="subject" type="subject" value="HTML">HTML</button>
    <button name="subject" type="submit" value="CSS">CSS</button>
 </form>

        <!--在这个地方用到form和button进行结合使用，其实form提供的是
        一个来链接，button的属性是提交submit，而且method方法是得到
        应该注意的是button标签尽量少和form一起使用，因为不同的浏览器提交的
        内容是不同的，有的 是value的值，有的 是button之间的内容  -->

一些来自互联网的内容：

在一个页面上画一个按钮，有四种办法：

• <input type="button" /> 这就是一个按钮。如果你不写javascript 的话，按下去什么也不会发生。
  
• <input type="submit" /> 这样的按钮用户点击之后会自动提交 form，除非你写了javascript 阻止它。
  
• <button> 这个按钮放在 form 中也会点击自动提交，比前两个的优点是按钮的内容不光可以有文字，还可以有图片等多媒体内容。（当然，前两个用图片背景也可以做到）。它的缺点是不同的浏览器得到的 value 值不同；可能还有其他的浏览器兼容问题（葛亮）。
• 其他标签，例如 a, img, span, div，然后用图片把它伪装成一个按钮。

参见：
[原]<button>和<input type="button"> 的区别
html - Difference between <input type='button' /> and <input type='submit' />
html - input type="submit" Vs button tag are they interchangeable?

作者：王洪雷
链接：https://www.zhihu.com/question/20839977/answer/16354924
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。