、下面是三种button点击的方法。

1. btn.onclick=function(){}
2. btn.addEventListener("click",function(){})
3. function btclick(){} 前提是标签里有onclick="btclick()"

• 第1种方法参看javascript通过dom实现按钮点击事件。【303】
• 第3种方法参看最简单的网页按钮单击函数响应事件，基于javascript。【302】

二、第2种方法就看我下面的表现了。

做个按钮

加入javascript，dom取得按钮元素。

添加click监听函数。

ss实现常用的开关按钮功能，常用在一些网站的设置页面中，一般用在手机端的页面比较多，实现的做法有很多，可以利用图片完成，也可以用css和js完成！具体效果如下：

实现代码：

html结构：

css样式：

js:

一篇文章我们说了单选框、多选框以及下拉框的使用，今天呢我们继续看一下表单剩下的常用控件：提交按钮以及重置按钮。

（1）提交按钮

提交按钮，顾名思义就是当我们填好了表单中的数据之后，我们需要通过提交按钮来将数据传递到后台的服务器中，供后台程序使用。

使用语法：<input type="submit" value="提交数据">

详细讲解：

1、type：只有当type值设置为submit时，按钮才有提交作用，才能正常的进行表单的提交。（或者使用JavaScript代码来触发提交事件，这个到后期我们讲解js的时候我进行介绍）

2、value：按钮上显示的文字，显示按钮的名称。

（2）重置按钮

当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。

使用语法：<input type="reset" value="重置数据">

详细讲解：

1、type：只有当type值设置为reset时，按钮才有重置作用，点击按钮会将form表单内的所有信息还原到初始未输入的状态。

2、value：按钮上显示的文字，显示重置按钮的名称

使用练习：

我们创建一个表单，数据我们以post的形式提交到百度首页，表单里边有姓名和年龄的输入框，并且添加提交数据按钮以及重置数据按钮。具体代码如下图所示：

在网页中的显示效果就如下图所示：

我们在姓名和年龄输入框中输入内容，点击重置数据既可以清空里边的内容，还原到初始状态，点击提交数据按钮，那么数据将会提交到我们的指定链接处。

以上呢就是表单最常用的一些控件了，接下来我们对学到的表单知识进行一次综合的测试，我们来写一个完整的表单包含我们学到的所有知识。

我们在这里就写一个网站制作常用的留言表，表格名称就叫留言表，然后表中包含有姓名输入框、性别单选框（默认选中男）、爱好多选框（默认选中第一个）、所在地区下拉框、留言内容多行文本框，以及提交信息按钮和重置信息按钮。数据提交呢我们还是提交到百度，提交类型我们使用post。具体的代码如下图所示：

在网页中的显示效果就如下图所示：

好了，到了这里我们的第一个表单就算是做完了，到这有人就会问了，为什么别人的代码在浏览器上看起来都是那么的规整，我这么写完看着怎么这么丑，接下来的文章我们将为大家介绍css的知识了，学习了css你也可以将你的页面做的高达上起来。最后大家看完一定要自己动手写一写，只有自己写出的代码才能体会到其中的乐趣，多加练习才是王道。

每日金句：人生最大的喜悦是每个人都说你做不到，你却完成它了！喜欢我的文章的小伙伴记得关注一下哦，每天将为你更新最新知识。