表单按钮的使用 - Dreamweaver - 网页制作 - 站长资讯 - 一摘网站分类目录-免费收录各类优秀网站的中文网站目录
当前位置:一摘网站分类目录 > 首页 > 资讯首页 > 网页制作 > Dreamweaver > 表单按钮的使用

表单按钮的使用

发表时间:2011-06-29内容来源:中国目录网整理  [我要投稿]  [免费提交网站]  转发微博:

  对于一个交互式表单,按钮是必不可少的。按钮一般分为两类,一类本身就具有特定的功能,叫做特殊按钮,如Submit(提交按钮)——用于传输用户所填写的信息至服务器、Reset(复原按钮)——清除所填写的信息以利重新填写;另一类本身不具特殊功能的,叫作普通按钮。特殊按钮只能用于表单才能发挥特殊的功能。而普通按钮除可在表单中应用外,在网页的其它地方使用也很方便。

  一、制作常规按钮

按此在新窗口浏览图片

  制作按钮非常简单,在<input>标记中把type参数设置为:type="submit"就获得一个提交按钮,如本例的“提交”按钮;在<input> 标记中把type参数设置为:type="reset"就获得一个复原按钮,如本例的“重写”按钮;在<input>标记中把type参数设置为:type="button"就获得一个普通按钮。本例的按钮源代码如下:

<input type="submit" name="Submit" value=http://www.chinahtml.com/0610/"提 交">
<input type="reset" name="Reset" value=http://www.chinahtml.com/0610/"重 写">
<input type="button" name="butto11" value=http://www.chinahtml.com/0610/"点我试试" onclick="alert('谢谢您点击!')" >


  按钮的制虽简单,但在制作按钮时要注意两点:

  1、对于特殊按钮,一般不需另加动作,当按下按钮时就有动作发生;而对于普通按钮,必须加上指定的动作并用相就的事件来触发,才会在事件发生时激发动作,否则按下普通按钮,什么也不发生。在本例的普通按钮上加了一个弹出提示窗口的动作:alert('谢谢您点击!'),并用onclick事件来触发,所以当你在那个按钮上点击时会弹出一个窗口,并显示“谢谢您点击!”这句话。

  2、按钮上的文字是通过设置value参数来实现的,其默认值是英文名。

  二、改变按钮的外观

  HTML对文本提供了丰富的颜色设置,唯独对表单按钮默认的则是Windows系统的颜色,显得有点死板,而且也没有提供按钮的颜色设置参数,因此,要改变表单按钮的外观,只能借助于CSS了。请看下面的示例:

  按此在新窗口浏览图片

  你看!这个按钮是不是变了样,新鲜多了吧?我们来看看它的源代码作了那些改变。按钮源代码:

<input type="submit" name="Submit" value=http://www.chinahtml.com/0610/"提 交" style=" font-size: 12px; background: #CCCCFF; border-width: thin thin thin thin; border-color: #CCCCFF #CCCCCC #CCCCCC #CCCCFF">


  从源代码中可以看出,按钮的基本参数设置没变,只是加了一段CSS代码,正是这段CSS代码改变了按钮的外观风格。在这段CSS代码中,不仅重新设置了表单按钮的背景色和字号大小,而且还对按钮的边框线进行了设置,把上边框线、左边框线设置浅一点的颜色,而把下边框线、右边框线设置深一点的颜色,其目的是使表单按钮产生立体效果。当然,你可以任意改变CSS代码中颜色,以使按钮的颜色与所在网页的颜色协调。

  若想使表单按钮一改那死板板的老面孔,能象网页中其它导航菜单那样具有动态变换样式的效果且仍具其特殊地表单按钮功能,使它更具吸引人的魅力,采用本文介绍的制作方法是个不错的主意。请看下面的示例子。

一、动态变换文本按钮
  按此在新窗口浏览图片鼠标不在按钮上
  按此在新窗口浏览图片鼠标在按钮上

  你看!这个按钮的效果不错吧?!制作这种效果的思路是这样的,利用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=http://www.chinahtml.com/0610/"提 交" onmouseover="this.className='style2'" onmouseout="this.className='style1'" class="style1"> 


  从上面的代码中可看到,当鼠标移到按钮上,也就是onmuseover事件发生,那么按钮将采用style2甩定义的外观样式;当鼠标移开按钮时,也就是onmuseout事件发生,那么按钮就采用style1所定义的外观样式,从而实现了动态变化的目的。后面那个class="style1"的作用是当onmouseover、onmouseout这两个事件都没发生时,采用style1所定义的外观样式,从而保持了按钮外观的一致性。

  二、动态变换图像按钮

  按此在新窗口浏览图片鼠标不在按钮上
  按此在新窗口浏览图片鼠标在按钮上

  本例与上例在制作思路和制作方法上均没有多大区别,只是采用了两张图片来作按钮背景,但产生的效果却非同一般。在制作这种效果的按钮时要注意两点:

  1、作按钮背景的图片最好用具透明背景的gif图片,这样可以做出各种各样形状的按钮,将具有很强的个性;

  2、背景图片的大小要与按钮的大小一致,否则,由于背景的平铺填充,将使按钮面目全非。

  下面是本例在<head>与</head>之间的CSS代码:

<style type="text/css">
<!--
.style3 { font-size: 12px; background: url(image/buttonbg1.gif); border: 0px; width: 60px; height: 22px}
.style4 { font-size: 12px; font-weight: bold; background: url(image/buttonbg2.gif); border: 0px 0; width: 60px; height: 22px}
-->
</style> 


  本例的按钮代码如下:

<input type="submit" name="Submit2" value=http://www.chinahtml.com/0610/"提 交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3">


  从按钮代码可看出它与例一的按钮代码完全相同,但本例的CSS代码与例一有较大的区别,这里要注意:url后面的括号中是按钮背景图片的地址,也就是含路径的图片文件名,你在实际制作时要把它改成图片的实际地址。

  另外再多讲一句,你若是用图形化网页制作工具(如Dreamweaver),那么凡是用CSS产生的效果,一般在编辑窗中是看不到的, 如本文的按钮效果,只有在预览时才能看到,在编辑窗口中看到的仍是表单默认的那种样子。

  • 站长资讯刊登此文只为传递信息,并不表示赞同或者反对作者观点。
  • 如果此内容给您造成了负面影响或者损失,本站不承担任何责任。
  • 如果内容涉及版权问题,请及时与我们取得联系。
107
最新推荐                    我也要出现在这里 | 更多
快速链接
最新快速审核
动态图片基地每日最搞笑的gif动态图片大全与您共分享,网罗当下最热门的微信图片表
www.asqql.com
中国数字期刊网(www.shiziqikan.com)是提供论文发表、期刊合作、
www.shuziqikan.com
71读小说网是广大书友最值得收藏的网络小说阅读网,网站收录了当前最火最热的网络小
www.71du.com
大香蕉网是专业发放淘宝优惠券天猫超市优惠券的优惠券网站,每天数万种淘宝内部优惠券
www.daxiangjiao1234.com
读客吧汇聚经典原创小说,致力于打造最好最完善的免费网络小说阅读网,网站收录了当前
www.dukeba.com
ADS 广告位招租
一摘开放式网站目录
在线投稿提交网站关于我们帮助中心 广告赞助免责声明 隐私保护最新推荐友情连接意见反馈
Copyright © 2006-2011 一摘网络 版权所有  1zhai.com  All Rights Reserved
在线投稿,网站免费登录,新收录网站首页显示,所有排名全自动实时刷更新,网站推广的最佳选择就在一摘开放式网站目录
Powered by 一摘网络(1zhai.com)    快速审核|投放广告,请点击给我信息快速审核|投放广告
页面执行时间: 134.2 毫秒