在HTML中，常见的按钮有3种：普通按钮（button）；提交按钮（submit）；重置按钮（reset）。
一、普通按钮button
在HTML中，普通按钮一般情况下都是配合JavaScript来进行各种操作的。
语法：
<input type="button" value="取值" />
说明：
value的取值就是按钮上的文字。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
oBtn[0].onclick = function ()
{
alert("I ❤ HTML！");
};
}
</script>
</head>
<body>
<form method="post">
<input type="button" value="表白"/>
</form>
</body>
</html>
浏览器预览效果如下图所示。
分析：
对于这段功能代码，我们不需要理解，等学到本书的JavaScript部分就懂了。当我们点击按钮后，会弹出对话框，如下图所示。
二、提交按钮submit
在HTML中，提交按钮一般都是用来给服务器提交数据的。我们可以把提交按钮看成是一种特殊功能的普通按钮。
语法：
<input type="submit" value="取值" />
说明：
value的取值就是按钮上的文字。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="button" value="普通按钮"/>
<input type="submit" value="提交按钮"/>
</form>
</body>
</html>
浏览器预览效果如下图所示。
分析：
提交按钮与普通按钮从外观上是没有什么不同的，两者的区别在于功能上。对于初学者来说，暂时了解一下就行。
三、重置按钮reset
在HTML中，重置按钮一般用来清除用户在表单中输入的内容。重置按钮也可以看成是具有特殊功能的普通按钮。
语法：
<input type="reset" value="取值" />
说明：
value的取值就是按钮上的文字。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" /><br />
<input type="reset" value="重置" />
</form>
</body>
</html>
浏览器预览效果如下图所示。
分析：
当我们在文本框中输入内容，然后按下重置按钮，会发现内容被清空了！其实，这就是重置按钮的功能。
不过我们要注意一点：重置按钮只能清空它“所在form标签”内表单中的内容，对于当前所在form标签之外的表单清除是无效的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
账号：<input type="text" /><br />
密码：<input type="password" /><br />
<input type="reset" value="重置" /><br />
</form>
昵称：<input type="text" />
</body>
</html>
浏览器预览效果如下图所示。
分析：
当我们在所有文本框中输入内容，然后点击重置按钮，会发现只会清除这个重置按钮所在form标签内的表单。这里顺便提一下，提交按钮也是针对当前所在form标签而言的。
举例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form method="post">
<input type="button" value="按钮" />
<input type="submit" value="按钮" />
<input type="reset" value="按钮" />
</form>
</body>
</html>
浏览器预览效果如下图所示：
分析：
3种按钮虽然从外观上看起来是一样的，但是实际功能却是不一样的。最后，我们总结一下普通按钮、提交按钮以及重置按钮的区别。
- （1）普通按钮一般情况下都是配合JavaScript来进行各种操作的。
- （2）提交按钮一般都是用来给服务器提交数据的。
- （3）重置按钮一般用来清除用户在表单中输入的内容。
四、button标签
从上面我们知道，普通按钮、提交按钮以及重置按钮这3种按钮都是使用input标签来实现的。其实还有一种按钮是使用button标签来实现的。
语法：
<button></button>
说明：
在实际开发中，比较少用到button标签，暂时简单了解一下即可。
