分享
 
 
 

HTML进阶应用技巧(十)用好表单的按钮

王朝html/css/js·作者佚名  2006-11-24
窄屏简体版  字體: |||超大  

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

一、制作常规按钮

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

<input type="submit" name="Submit" value="提 交">

<input type="reset" name="Reset" value="重 写">

<input type="button" name="butto11" value="点我试试" onclick="alert('谢谢您点击!')" >

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

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

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

二、改变按钮的外观

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

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

<input type="submit" name="Submit" value="提 交" 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="提 交" 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="提 交" onmouseover="this.className='style4'" onmouseout="this.className='style3'" class="style3">

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

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有