表单按钮的属性及作用
一、按钮的分类
共有四种分类：
    1.重置按钮
    2.提交按钮
    3.一般按钮
4.图片按钮
二、按钮的内容
1.重置按钮
如果游览者想清除输入到表单中的全部内容，可以使用<input>元素中的type属性设置重置按钮(reset),以省去在重新输入前，一项一项删除的麻烦！
格式为  <input type=“reset” value="按钮名">
2.提交按钮
当游览者完成表单的填写，想要发送时，可使用<input>元素的type属性设置提交(submit)按钮，将表单内容送给action属性中的网址或函件信箱。
格式为  <input type=“submit” value="按钮名">
属于input属性3.一般按钮
如果游览者想制作一个用于触发事件的普通按钮，可以使用<input>元素的type属性设置普通按钮(button)
格式为  <input type=“button” value="按钮名">

4.图片按钮
如果游览者想制作一个美观的图片按钮，可以使用<input>元素的type属性设置图片按钮(image)
格式为  <input type=“image” src="图片来源">
三、按钮的属性解释
1.重置按钮
重置按钮用来重置表单。
代码格式：<input type="reset" name="..." value="...">
属性解释：
type="reset"定义复位按钮；
name属性定义复位按钮的名称；
value属性定义按钮的显示文字；
样例代码：
<input type="reset" name="myCancle" value="取消">
2. 提交按钮
提交按钮用来将输入的信息提交到服务器。
代码格式：<input type="submit" name="..." value="...">
属性解释：
type="submit"定义提交按钮；
name属性定义提交按钮的名称；
value属性定义按钮的显示文字；
样例代码：
<input type="submit" name="mySent" value="发送">
3.一般按钮
一般按钮用来控制其他定义了处理脚本的处理工作。
代码格式：<input type="button" name="..." value="..." onClick="...">
属性解释：
type="button"定义一般按钮；
name属性定义一般按钮的名称；
value属性定义按钮的显示文字；
onClick属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；
样例代码：
<input type="button" name="myB" value="保存" onClick="javascript:alert('it is a button')">
4.图片按钮
使用图片按钮时比较特殊，虽然type属性没有设置为“submit”，但仍然具有提交功能
4、动态按钮的制作（鼠标是否在按钮上）
利用CSS属性可以动态改变的特点，先给按钮定义两种外观样式，再在<input>标记中加上两个事件，即onmuseover（鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS定义的按钮外观样式，从而达到动态变换的效果。为了提高CSS的利用率（若有多个按钮，则可重复使用），把CSS放到<head>与</head>之间，在按钮中用class 调用CSS格式。本例在<head>与</head>之间的CSS代码是这样的：
<style type="text/css">
<!--
.style1 { font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF}
.style2 { font-size: 12px; font-weight: bold; background: #CCFFCC; border-width: thin medium medium thin; border-color: #CCFF99 #999999 #999999 #CCFF99}
-->
</style>
本例按钮的代码如下：
<input type="submit" name="Submit" value="提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1">
  从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover事件发生，那么按钮将采用style2甩定义的外观样式；当鼠标移开按钮时，也就是onmuseout事件发生，那么按钮就采用style1所定义的外观样式，从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时，采用style1所定义的外观样式，从而保持了按钮外观的一致性。
总结：现在上面的三种按钮多被图片按钮所替代，图片按钮的使用率远高于其他的按钮的，
现在图片按钮用途是最广泛的，但另一方面图片按钮又可不单独列为按钮种类。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。