您当前的位置: 首页 » HTML/XHTML/XML编程 » 新手学习老知识（九）用好表单的按钮
新手学习老知识（九）用好表单的按钮
论坛链接
对于一个交互式表单，按钮是必不可少的。按钮一般分为两类，一类本身就具有特定的功能，叫做特殊按钮，如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产生的效果，一般在编辑窗中是看不到的， 如本文的按钮效果，只有在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。
一、制作常规按钮
制作按钮非常简单，在<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产生的效果，一般在编辑窗中是看不到的， 如本文的按钮效果，只有在预览时才能看到，在编辑窗口中看到的仍是表单默认的那种样子。