admin 管理员组文章数量: 1086019
2023年12月17日发(作者：免费的网站制作)
表单按钮的属性及作用
一、按钮的分类
共有四种分类：
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属性，也可以是其它的事件，通过指定脚本函数来定义按钮的行为；
样例代码：
button')">
4.图片按钮
使用图片按钮时比较特殊，虽然type属性没有设置为“submit”，但仍然具有提交功能
四、动态按钮的制作（鼠标是否在按钮上）
利用CSS属性可以动态改变的特点，先给按钮定义两种外观样式，再在标记中加上两个事件，即onmuseover（鼠标在按钮上）和onmuseout （鼠标离开按钮），我们用这两个事件分别调用不同的CSS定义的按钮外观样式，从而达到动态变换的效果。为了提高CSS的利用率（若有多个按钮，则可重复使用），把CSS放到
与之间，在按钮中用class 调用CSS格式。本例在与之间的CSS代码是这样的：
本例按钮的代码如下：
onmouseover="ame='style2'" onmouseout="ame='style1'"
class="style1">
从上面的代码中可看到，当鼠标移到按钮上，也就是onmuseover事件发生，那么按钮将采用style2甩定义的外观样式；当鼠标移开按钮时，也就是onmuseout事件发生，那么按钮就采用style1所定义的外观样式，从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时，采用style1所定义的外观样式，从而保持了按钮外观的一致性。
总结：现在上面的三种按钮多被图片按钮所替代，图片按钮的使用率远高于其他的按钮的，
现在图片按钮用途是最广泛的，但另一方面图片按钮又可不单独列为按钮种类。
版权声明：本文标题：表单按钮的属性及作用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1702800114a431379.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论