表单按钮的属性及作用
表单按钮的属性及作用
一、按钮的分类
共有四种分类：
1. 重置按钮
2. 提交按钮
3. 一般按钮
4. 图片按钮
二、按钮的内容
1. 重置按钮
如果游览者想清除输入到表单中的全部内容，可以使用元素中的type 属性设置重置按钮(reset),以省去在重新输入前，一项一项删除的麻烦！ 格式为
2. 提交按钮
当游览者完成表单的填写，想要发送时，可使用元素的type 属性设置提交(submit)按钮，将表单内容送给action 属性中的网址或函件信箱。 格式为
3. 一般按钮
如果游览者想制作一个用于触发事件的普通按钮，可以使用元素的type 属性设置普通按钮(button)
格式为
4. 图片按钮
如果游览者想制作一个美观的图片按钮，可以使用元素的type 属性设置图片按钮(image)
格式为
三、按钮的属性解释
1. 重置按钮
重置按钮用来重置表单。
代码格式：
属性解释：
type="reset"定义复位按钮；
name 属性定义复位按钮的名称；
value 属性定义按钮的显示文字；
样例代码：
2. 提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式：
属性解释：
type="submit"定义提交按钮；
name 属性定义提交按钮的名称；
value 属性定义按钮的显示文字；
样例代码：
3. 一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：
属性解释：
type="button"定义一般按钮；
name 属性定义一般按钮的名称；
value 属性定义按钮的显示文字；
onClick 属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为； 样例代码：
4. 图片按钮
使用图片按钮时比较特殊，虽然type 属性没有设置为“submit ”，但仍然具有提交功能
四、动态按钮的制作（鼠标是否在按钮上）
利用CSS 属性可以动态改变的特点，先给按钮定义两种外观样式，再在标记中加上两个事件，即onmuseover （鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS 定义的按钮外观样式，从而达到动态变换的效果。为了提高CSS 的利用率（若有多个按钮，则可重复使用），把CSS 放到与之间，在按钮中用class 调用CSS 格式。本例在与之间的CSS 代码是这样的：
本例按钮的代码如下：
class="style1">
从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover 事件发生，那么按钮将采用style2甩定义的外观样式；当鼠标移开按钮时，也就是onmuseout 事件发生，那么按钮就采用style1所定义的外观样式，从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover 、onmouseout 这两个事件都没发生时，采用style1所定义的外观样式，从而保持了按钮外观的一致性。
总结：现在上面的三种按钮多被图片按钮所替代，图片按钮的使用率远高于其他的按钮的，
现在图片按钮用途是最广泛的，但另一方面图片按钮又可不单独列为按钮种类。