HTML按钮(连通图)

HTML按钮(连通图)

HTML按钮

在 HTML 中，按钮分为 3 种：

• 普通按钮
• 提交按钮
• 重置按钮

1. 普通按钮

普通按钮默认没有提交功能，它只是一个可点击的小装置，一般情况下，需要配合 JavaScript 脚本才能实现具体的功能。在 HTML 中，把 标签的 type 属性设置为 button 用来表示普通按钮。具体语法格式如下：普通按钮没有默认内容，我们需要使用 value 属性为其设置具体内容。代码如下：

运行结果如图所示：图1：HTML 普通按钮

2. 提交按钮

提交按钮可以看成是一种具有特殊功能的普通按钮。当单击提交按钮时，会对表单的内容进行提交。在 HTML 中，当 标签的 type 属性值为 submit 时，用来表示提交按钮。具体语法格式如下：我们通过一段简单的代码来看一下：

运行结果如图所示：图2：HTML 提交按钮在上述代码中，我们并没有为提交按钮设置 value 值。但是通过运行结果可以发现，提交按钮是有默认值的，默认为提交。如果需要改变其默认值，只需要设置 value 属性即可。

注意：表单中的字段需要设置 name 属性才可以进行提交，但是提交按钮的 name 属性可以根据需求进行设置，一般情况下不使用。当点击提交按钮后，表单中含有 name 属性的数据会发送到表单服务器，后台经过操作便可以拿到用户输入的内容。

3. 重置按钮

重置按钮也可以看成是一种具有特殊功能的普通按钮，单击重置按钮可以清除用户在表单中输入的信息。把 标签的 type 属性设置为 reset 用来表示重置按钮。重置按钮也有默认值，默认值为重置。具体语法格式如下：示例如下：

  用户名 
  密码：
  

运行结果如图所示：图3：HTML 重置按钮接下来我们看一下点击重置按钮后的效果：图4：点击 reset 后的效果通过运行结果发现，数据没有清空。这是为什么呢？这里需要大家注意的是，reset 按钮只能清空用户在表单中输入的内容，对于提前设置好的内容不会清空。

不同浏览器对于一些标签会有不同的样式设置，以上均使用谷歌浏览器。