中华网--科技频道--网络教室

巧用表单单选框
　冯永曜　　黄山村夫

　　在网页的表单中使用单选框与用户进行交互是十分常见的方法，若是给每个选项再配一段选项的内容介绍，使用户在选择的时候做到心中有数，不是效果更好吗？若是每个选项的边上都写上一段说明文字，那就使页面太乱了，使用户不明白你是在作介绍还是在做表单。我们要做的是这样一种效果，在单选框的边上适当地划一块出来显示选项的介绍，随着用户选择不同的选项动态地更换内容，下面的单选框就具有这种效果，请看效果图。

　　图1

　　图2

在上面的表单中用了三个单选框组成一个“景点选择单元”，另用一个单行文本框用来显示景点简介，另外用一个按钮链接到已选择景点的相应网页，用HTML是无法实现这种动态效果的。用Javascript做起来并不难，所增加的代码也不多。表单的代码如下：
<form name="jdxzform" method="post" >
<p>
<input type="radio" name="radiobutton" value="hsfg/hsfg.htm" checked onclick="showjj(1)"> 黄山风景区 </p>
<p>
<input type="radio" name="radiobutton" value="hsfg/gmj.htm" onclick="showjj(2)"> 黟县古民居</p>
<p>
<input type="radio" name="radiobutton" value="hsfg/qys.htm" onClick="showjj(3)"> 道教圣地齐云山</p>
<div align="center">景点简介
<input type="text" name="jdjj" size="50" value="点击景点单选框，在此显示相应景点的简介。">
</div>
<p>
<input type="button" name="Button" value="显示相应的网页" onclick="showpage()">
</p>
</form>
　　这个表单的代码与普通表单稍有差别：
　　1、三个单选框的value参数值都是一个网页的地址，这是为了按下“显示相应网页”能实现显示相应网页的效果而设置的；
　　2、单选框都加了一个onclick事件来调用“showjj”函数来实现在文本框中显示相应的景点简介效果；
　　3、在按钮中加了一个onclick事件来调用showpage函数以实现按下按钮后能显示已选择的景点对应的网页。那么这两个函数是如何实现这种效果的呢？请看下面的程序代码，为了你看起来方便，把程序的解释写在相应代码的边上：
<script languae="JavaScript">

</script>

　　本文例子的制方法如下：
　　1、按文中介绍的方法做好表单；
　　2、把 Javascript程序复制在网页源代码的<head>与</head>之间就一切OK了。
　　若你所需要的单选框数不是三个，只要在switch语句多加几个"case"就行了，其它无需改动，上面程序代码中双斜杠（//）后是注释，不是程序所必须的，实际应用时可删去。再次提醒一下，程序中要用到的网页元素名称（如本例中的“jdxzform”、“jdjj”等）大小写一定要一致，这是初学者最易犯的错误。

　赛迪网　

进入BBS

进入聊天室

关闭窗口

﹣更多本栏目内容
??Windows 2000系统安全设置攻略 ??Dreamweaver编写CSS需要掌握的技巧 ??使用Flash MX过程中的3个小技巧 ??拖IE9网站图标到Win7任务栏精彩好礼任你拿 ??从此不再耗流量？Google离线地图试用 ??给瑞星添加移动存储自动杀毒功能 ??一周壁纸榜单靓丽风景伴您欢度周末 ??金山网络七款软件齐升级炫丽界面贺新春 ??提升网站流量和权重百度热榜排第一 ☉预警：电商促销引钓鱼七夕网购需谨慎

本站检索

网络教室编辑信箱