按钮在我们的生活中随处可见，比如：QQ登录界面中的登录按钮、12306票务系统中的注册按钮、购物完成后的“开始抽奖”"按钮等等，这些页面都是通过按钮获取用户的点击确认信息。表单控件中的按钮一共分为5类。它们是：提交按钮、重置按钮、普通按钮、图像按钮和双标签按钮按钮。让我们从第一类开始：提交按钮。他有点击确认提交信息，同时将表单数据发送到后台的功能。提交按钮也是通过输入控件实现的，只需将type的值定义为submitsei即可。提交的意思是提交。打开编辑器，新建一个input_button.html页面，完成基本代码，在body中添加一个form标签，在form标签里面添加文字“Name:”，然后添加一个input输入框标签，type属性值为文本，在输入框后面添加br标签，用于换行。再次在表单中添加文本“Email:”，添加一个input输入框标签，type属性值也是text，添加一个br换行标签。最后，向表单添加输入，并分配类型属性以提交。保存。在浏览器中打开页面，输入您的姓名和电子邮件地址，然后单击“提交”按钮。表单提交后页面发生了什么？实际上，当我们点击按钮时，会发生三件事：第一件事：页面被刷新；第二件事：输入框内容消失；第三件事：浏览器地址栏出现问号。我们刷新页面，再次操作，仔细观察。刷新，填写姓名和邮箱，点击“提交”，我们发现页面一闪，出现了一个问号，输入框的内容也消失了。下面，就来揭开这三件事背后隐藏的真相吧。为什么页面会刷新？事情的真相是：当用户填写表单并点击提交按钮时，数据被提交到网站的后台服务器，后台服务器将数据保存到数据库中。这里的服务器会为网页的形式提供一个访问地址。回到小编，我们注意到form表单中并没有定义服务器地址。怎么定义呢？我们需要在表单标签上定义一个动作属性。Action表示动作，也就是用户点击提交按钮后所采取的动作。实际上它的值就是服务器的地址。我们必须向后端合作伙伴询问此地址。当然，你可以随便写一个网址来测试一下。回到编辑器，我们为表单定义action属性，赋值：http://www.baidu.com（全部阅读），保存页面。返回浏览器并刷新。填写姓名和邮箱，点击“提交”，令人意外的一幕发生了，页面跳转到了百度首页，页面的地址有个问号。其实也不奇怪，因为我们打算把数据提交给百度。那么你可能会问，数据真的存储在百度的数据库中吗？我破解了百度服务器吗？没那么容易，现在只是一厢情愿，百度同意接受我们的请求。回到编辑器，我们删除表单的action属性。注意，如果没有定义action，浏览器会默认将当前页面地址作为action的值。让我们保存页面。返回浏览器并刷新。填写您的姓名和电子邮件地址，然后再次“提交”。由于表单是自己提交给页面的，在收到自己提交的信号后，作为回应，我又打开了页面，所以页面刷新了。由于刷新了页面，原来填写表单的内容也没有了。其实这些内容也是可以保留的。方法是为form标签定义一个target属性。属性值与链接的目标属性值相同，可以是_blank或_self。回到编辑器，为表单定义action属性，值还是百度首页地址。然后定义值为_blank的目标属性。节省。返回浏览器并刷新。填写姓名和邮箱，然后“提交”，我们发现新窗口打开了百度首页，而我们自己的页面没有刷新，内容会保留。继续了解第二种按钮：复位按钮。如果用户想擦除填写的表单内容，或者想得到一个空表单重新填写内容，点击重置按钮即可实现。重置按钮定义的语法是将输入控件的类型属性值定义为重置。reset的意思是重置，复位。回到编辑器，在提交按钮后定义一个input标签，type属性值被重置。节省。回到浏览器，刷新，页面表单上多了一个重置??按钮。输入name和email的测试数据，点击“Reset”按钮，我们输入的数据就会被清除。接下来学习第三类按钮：普通按钮。顾名思义，一个没有任何功能的普通按钮。普通按钮定义的语法是将输入控件的type属性值定义为button。button是按钮的意思。回到编辑器，定义一个input标签，type属性的值为button。节省。回到浏览器，刷新，页面上多了一个没有名字的按钮，我们可以给按钮起个名字。返回编辑器，为普通按钮的输入控件定义一个value属性，赋值给“普通按钮”。节省。回到浏览器，刷新，按钮有名称，我们输入一些测试数据，点击普通按钮，没有任何功能。受此启发，我们可以给提交和重置按钮起别名吗？返回编辑器，为提交按钮定义一个value属性，值为“register”；为重置按钮定义一个值属性，值为“危险，不要点击我”。回到浏览器，刷新，按钮的名字已经改了。填入一些测试数据，点击“Reset”，功能依旧。在本课中，完成了提交、重置和通用三种类型的按钮。让我们自己练习吧。[文章支持视频链接](https://www.bilibili.com/video/BV1oU4y1278g?p=36)
