共计 2127 个字符，预计需要花费 6 分钟才能阅读完成。
按钮在咱们的生存中随处可见，比方：QQ 登录界面中的登录按钮，12306 购票零碎中的注册按钮，以及购物实现之后的 ” 开始抽奖 ” 按钮等等，这些页面都是通过按钮来取得用户点击确认信息的。
表单控件中的按钮总共分为 5 类。别离是：提交按钮、重置按钮、一般按钮、图像按钮以及双标签 button 按钮。
先来介绍第一类：提交按钮。他具备 点击确认提交信息，同时发送表单数据给后盾的性能。提交按钮也是通过 input 控件实现，定义 type 的值为 submit sei 即可。submit 就是提交的意思。
关上编辑器，新建一个 input_button.html 页面，实现根底代码，在 body 增加 form 标签，在 form 标签外部增加文本 “ 姓名：”，再增加一个 input 输入框标签，type 属性值为 text，在输入框前面增加 br 标签换行。在 form 里再次增加文本 “ 邮箱：”，再增加一个 input 输入框标签，type 属性值同为 text，再增加一个 br 换行标签。
最初在 form 里增加 input，type 属性赋值为 submit。se 保留。在浏览器中关上页面，输出姓名和邮箱地址，点击 “ 提交 ” 按钮。
表单提交后，页面产生了什么变动？其实，当咱们点击按钮时，产生了三件事：第一件事：页面刷新了；第二件事：输入框的内容隐没了；第三件事：浏览器地址栏里多了一个问号。
咱们刷新一下页面，再次操作一遍，大家仔细观察。刷新，填入姓名和邮箱，点击 “ 提交 ”，咱们发现页面闪了一下，这里多了个问号，输入框的内容也隐没了。
上面，咱们来揭发三件事背地暗藏的假相。
页面为什么刷新了？事件的假相是：当用户填写完表单，点击提交按钮，数据提交给了网站的后盾服务器，后盾服务器再将数据保留到数据库中。这里的服务器会给网页的表单提供一个拜访地址。
回到编辑器，咱们曾经觉察到，form 表单里并没有定义服务器地址。那如何定义呢？咱们须要在 form 标签上定义一个 action 属性，action 是口头的意思，就是用户点击提交按钮后，做什么动作。
事实上它的值就是服务器的地址。这个地址咱们得找后端的小伙伴去要，当然，你能够写一个任意的网站地址测试一下。
回到编辑器，咱们给 form 定义 action 属性，赋值为：http://www.baidu.com (全副读出来)，保留页面。
回到浏览器，刷新。填写姓名和邮箱，点击 “ 提交 ”，惊奇的一幕产生了，页面跳转到了百度首页，页面的地址里也多了一个问号。
其实也不奇怪，因为咱们就打算将数据提交给百度。那你可能会问，数据真的存到百度的数据库里了吗？难道我把百度服务器给黑了？没那么容易，当初只是两厢情愿，百度批准承受咱们的申请才能够。
回到编辑器，咱们把 form 的 action 属性去掉。留神，如果不定义 action，浏览器默认会把以后的页面地址当成是 action 的值。咱们保留一下页面。回到浏览器，刷新。填写姓名和邮箱，再次 “ 提交 ”。
因为表单提交给了页面本人，收到本身提交的信号后，作为响应，本人又关上了一下页面，所以页面刷新了。因为页面刷新了，原来在表单里填写的内容也不见了，其实也能够保留这些内容。
办法就是给 form 标签定义一个 target 属性，属性值和链接的 target 属性值一样，能够是 _blank，也能够是 _self。
回到编辑器，给 form 定义 action 属性，值仍旧为百度首页地址。再定义 target 属性，值为 _blank。保留。
回到浏览器，刷新。填写姓名和邮箱，再 “ 提交 ” 一下，咱们发现百度首页在新的窗口里关上了，咱们本人的页面没有刷新，内容也会保留。持续学习第二类按钮：重置按钮。
如果用户想擦除已填写的表单内容，或者想取得一个空表单，从新填写内容，点击这个重置按钮就能够实现了。重置按钮定义的语法是，将 input 控件的 type 属性值定义为 reset。reset 意为重置，复位。回到编辑器，在提交按钮前面再定义一个 input 标签，type 属性值为 reset。
保留。回到浏览器，刷新，页面表单多了一个重置按钮。输出姓名和邮箱的测试数据，点击 “ 重置 ” 按钮，咱们输出的数据就被清空了。
接下来学习第三类按钮：一般按钮。顾名思义，一个一般按钮，没有任何的性能。一般按钮定义的语法是，将 input 控件的 type 属性值定义为 button。button 就是按钮的意思回到编辑器，再定义一个 input 标签，type 属性值为 button。
保留。回到浏览器，刷新，页面中多了一个没有名字的按钮，咱们能够给按钮起个名字。返回编辑器，给一般按钮的 input 控件再定义一个 value 属性，赋值为 ” 一般按钮 ”。保留。
回到浏览器，刷新，按钮有了名字，咱们输出一些测试数据，点击一般按钮，没有任何性能。受此启发，咱们能不能给提交和重置按钮起个别名呢？返回编辑器，给提交按钮再定义一个 value 属性，值为 “ 注册 ”；给重置按钮也定义一个 value 属性，值为 “ 危险，别点我 ”。
回到浏览器，刷新，按钮的名字被批改了。填写一些测试数据，点击 “ 重置 ”，性能仍然在。这节课，提交、重置和一般三类按钮就讲完了，大家连忙本人练习一下吧。
[文章配套视频链接](https://www.bilibili.com/video/BV1oU4y1278g?p=36)
