HTML表单中按钮button标签的三种用法，在线实例

HTML的按钮button是web前端中常见的常用的交互组件，虽然button可以是HTML表单中的元素，也是表单中的常见元素，但按钮button的可以使用在任何想要使用的地方。button按钮根据type属性的不同值有不同的用法，这里介绍三种常见用法。

HTML的按钮标签

提示：button需要一个闭合标签。

button的普通用法

button的type属性设置为button时，是button的一般性用法，使用的时候，一般需要搭配onclick属性，如下实例：

button普通用法实例代码，及在线编辑器

<button type='button'>普通按钮，不带onlick属性</button><br><br>
<button type='button' class='btn btn-default'onclick='alert("笨鸟工具,x1y1z1.com")'>普通按钮，带onlick属性</button>

button普通用法代码解析

1、如上代码，当点击不带onclick的普通按钮时，按钮不执行任何操作，当点击带onclick属性值的时候，程序会执行onclick中设置的操作；2、第二个按钮中的class来源于前端框架bootstrap的样式；3、onclick的属性值可以直接写在button标签内，也可以设置为函数，然后通过script标签或JS文件来设计这个函数，写在JS文件的话，需要对该文件进行引入；

button的提交用法

HTML表单的提交可以通过设置input标签的type属性值为submit，也可以用button来设置，但也要将button的type属性值设置为submit，如下实例：

button提交用法实例代码

<form method='GET' action='https://www.x1y1z1.com/search' target='_blank'>
  <input type='text' name='qsearchword'>
  <button type='submit'>笨鸟搜索</button>
</form>

button提交用法代码解析

这是一个用表单设计的建议的本站的站内搜索工具，表单form标签的method和action属性，可以参考：HTML表单常用的两大属性，action和method。

button的表单重置reset用法

在有些网站的注册页面或登录页面，可能会设置一个一键清除内容或重置内容的按钮，这项功能可以通过button中style值设置为reset来实现，如下实例：

button重置reset实例代码

<form>
  <span>用户：</span><input type='text'><br><br>
  <span>密码：</span><input type='password'><br><br>
  <button type='reset'>重置</button>
</form>

hot：热门