HTML按钮

在 HTML 中，按钮分为 3 种：

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

1. 普通按钮

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

普通按钮没有默认内容，我们需要使用 value 属性为其设置具体内容。代码如下：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post">
    <input type="button" value="普通按钮"/>
</form>

运行结果如图所示：

图1：HTML 普通按钮

2. 提交按钮

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

我们通过一段简单的代码来看一下：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post">
    <input type="submit"/>
</form>

运行结果如图所示：

图2：HTML 提交按钮

3. 重置按钮

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

示例如下：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=login" method="post">
  用户名 <input type="text" name="username" value="城东书院"/>
  密码：<input type="password" name="psd" value="123456"/>
  <input type="reset"/>
</form>

运行结果如图所示：

图3：HTML 重置按钮

图4：点击 reset 后的效果