上QQ阅读APP看书，第一时间看更新

第2章表单及表单元素

文本框/编辑框/隐藏域组件

下拉列表/菜单

单选按钮组

复选框

密码域

表单应用

2.1 文本框/编辑框/隐藏域组件

在制作网页过程中，经常要对文本框、编辑框、隐藏域等组件的属性进行设置，以方便用户操作。本节将介绍文本框/编辑框/隐藏域组件的应用。

实例055 获取文本框/编辑框/隐藏域的值

本实例是一个获取控件值的程序

实例位置：光盘\mingrisoft\02\055

实例说明

用户在浏览网页时，经常需要填写一些动态表单。例如，在互联网上发表自己的文章时，需要填写作者名称、文章标题以及文章内容。当用户提交表单时，程序需要获取表单内容，并对表单内容进行验证或者存储。本实例将介绍如何获取表单中的文本框、编辑框以及隐藏域的值。程序运行结果如图2.1所示。

图2.1 获取文本框/编辑框/隐藏域的值

技术要点

本实例主要应用 JavaScript 脚本的 document 对象从客户端获得各项信息，并调用 window对象的 alert( )方法（用于弹出一个警告对话框）动态显示获取到的信息。document 对象指向HTML 文档，文档是内容与网页中可访问元素的组合。下面介绍 document 对象的常用属性和方法。

● document.forms[ ]属性：表示文档中所有表单元素的数组，方括号内的索引值指向数组中的某个元素。

● document.images[ ]属性：表示使用<img>标记插入到文档中的图像数组。

● document.title 属性：获取网页的标题文本。

● document.write( )方法：将指定字符串（可以包括 HTML 标记语言）写入到 HTML 文档中。

● document.write( )方法：将打开一个新的输出流，它将清除当前网页的内容，而只显示指定字符串的内容。

实现过程

获取文本框/编辑框/隐藏域的值的关键代码如下。

functionMycheck(){

var checkstr="获取内容如下:\n";

if (document.form1.文章作者.value != ""){

checkstr+="作者名称:"+document.form1.文章作者.value+"\n";

}

if (document.form1.文章主题.value != ""){

checkstr+="文章主题:"+document.form1.文章主题.value+"\n";

}

if (document.form1.文章内容.value != ""){

checkstr+="文章内容:"+document.form1.文章内容.value+"\n";

}

if (document.form1.隐藏域.value != ""){

checkstr+=document.form1.隐藏域.value;

}

if (checkstr != ""){

alert(checkstr);

return false;

}

else return

return true;

}

</script>

举一反三

根据本实例，读者可以：

实现编写企业门户网站中的加盟申请页面；

实现编写电子商务网站中的会员申请页面。

实例056 自动计算金额

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\056

实例说明

在实际应用中，为了提高操作效率以及保证计算的准确性，可以使用 JavaScript 语言编写程序用于自动计算金额。例如，在签订合同页面，根据用户填写的签订合同年限，自动计算用户应缴纳的保证金额，其中，每年缴纳的保证金额是固定的。运行本实例，用户在输入合同年限后，程序将自动计算保证金额，并将其显示在文本框内。程序运行结果如图2.2所示。

图2.2 自动计算金额

技术要点

本实例主要应用JavaScript的document对象获取文本框以及隐藏域的值，并将计算后的数值赋值给文本框，使该文本框立即显示计算后得到的保证金总额。关于document对象的介绍请参见实例055，这里不再赘述。

实现过程

通过以下步骤在页面中实现自动计算金额。

（1）自定义一个 JavaScript 函数。该函数首先获取用户在文本框中填写的合同年限数值和隐藏域的保证金额/年，然后将获取到的两个数值进行计算得到保证金总额，并将此计算金额赋值给相应文本框，其关键代码如下。

function count(){

var amount,price,money;

amount=document.form1.txt_year.value;

price=document.form1.txt_by.value;

money=amount*price;

document.form1.txt_bail.value=money;

}

</script>

（2）在“合同年限”文本框的onBlur事件（即在文本框失去焦点时触发的事件）中调用自定义的JavaScript函数count()，代码如下。

<tr>

<td height="22" align="left"><input name="txt_year" type="text" id="txt_year" size="10" onBlur="count()">年

</tr>

<tr>

</tr>

举一反三

根据本实例，读者可以：

实现开发电子商务网站中的购物车程序；

实现开发企业进销存系统中的商品销售程序。

实例057 设置文本框的只读属性

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\057

实例说明

在网站后台管理系统中，管理员经常要查看用户基本信息，用户基本信息是指用户在网站前台填写的注册或者申请等信息。虽然管理员具有查看用户基本信息的权限，但是不可以修改用户所提交的信息内容。在设计页面时，设置显示用户信息的文本框为只读属性，即可以查看但不可修改文本框中的文本。运行本实例，当鼠标光标放在文本框上或者在文本框内使用键盘按键时，都将弹出提示信息。程序运行结果如图2.3所示。

图2.3 设置文本框的只读属性

技术要点

为了防止用户修改文本框内的文本，可以设置文本框的readOnly属性值为true，这时将禁止用户更改或删除文本框中的内容。

在自定义的JavaScript函数中，应用document对象获取文本框的realOnly属性值，如果为true（即该文本框为只读属性），则调用alert()方法弹出一个警告对话框显示相应信息。

实现过程

（1）在<input>标记中设置文本框的 readOnly 属性值为 true，并在 onKeyDown 事件和onMouseup事件中调用JavaScript函数Mycheck()，代码如下。

（2）自定义的JavaScript函数Mycheck()的关键代码如下。

functionMycheck(){

if (document.form1.UserName.readOnly){

alert("用户名文本框为只读属性!");return false;

}

else return

return true;

}

</script>

举一反三

根据本实例，读者可以：

实现开发电子商务网站中的查看会员基本信息页面；

实现开发在线论坛中的查看注册用户信息页面。

实例058 限制多行文本域输入的字符个数

本实例是一个提高程序安全性的程序

实例位置：光盘\mingrisoft\02\058

实例说明

在网站建设过程中，数据库的设计起着关键作用，为了节省存储数据的空间，提高数据库操作效率，在创建数据表时，通常要对字段大小进行限制。在页面中，为了保证程序的可靠性，根据数据表的结构要对用户输入的信息量进行控制，保证与数据表中的字段属性保持一致。运行本实例，当用户输入内容超过限制的字符个数时，将弹出提示信息。程序运行结果如图2.4所示。

图2.4 限制多行文本域输入的字符个数

技术要点

本实例主要应用JavaScript语言中的if…else条件判断语句和for循环语句，以及应用String对象的charCodeAt( )方法和substring( )方法，下面分别进行介绍。

（1）对变量或表达式进行判定时，可以使用if…else条件判断语句，其语法格式如下。

if(条件表达式){

语句序列1　　　　//条件满足时执行

}else{语句序列2　　//条件不满足时执行

}

执行上述语句时，首先计算“条件表达式（任意的逻辑表达式）”的值，如果值为 true，则执行“语句序列1”，执行完毕后结束该if语句；否则执行“语句序列2”，执行后同样结束该if语句。

上述if语句是典型的二路分支结构，其中的else部分可以省略，而且“语句序列”为单一语句时，其两边的大括号可以省略。

例如：

if(document.quesion.value=="") alert("请填写密码提示问题！");

if语句是一种使用很灵活的语句，可以根据需要对if语句进行嵌套使用。所谓嵌套就是将一个if语句当成另一个if语句的执行语句来使用。if语句的嵌套语法格式如下。

if (条件表达式){

if (条件表达式) {

语句序列1

}else{

语句序列2

}

}else{

if (条件表达式){

语句序列3

}else{

语句序列4

}

（2）for循环语句是JavaScript语言中应用比较广泛的条件语句。for循环语句通常使用一个变量作为计数器来执行循环，这个变量称为循环变量。

for循环语句的语法格式如下。

for(循环变量赋初值;循环条件;循环变量递增/减值){

循环体;

}

for循环语句的相关参数说明如表2.1所示。

表2.1 for循环语句的参数说明

for循环语句可以使用break语句来中止循环语句的执行。

（3）调用 string 对象的 charCodeAt()方法将返回一个整数，该整数表示字符串对象中指定位置处的字符的Unicode编码。

（4）调用string对象的substring()方法将返回字符串中指定区间的子字符串。

实现过程

通过以下步骤实现限制多行文本域输入的字符个数。

（1）自定义一个JavaScript脚本函数。该函数首先使用if…else条件判断语句和for循环语句判断文本域内输入的字符个数是否超过允许的最多字符个数，如果输入的字符个数超过允许的最多字符个数，则调用 alert( )方法弹出一个警告对话框，并立即退出循环；然后将已用字符数和剩余字符数返回给页面。其关键代码如下。

<!--

varLastCount=0;

functionCountStrByte(Message,Total,Used,Remain){//字节统计

varByteCount=0;

varStrValue　=Message.value;

varStrLength=Message.value.length;

varMaxValue　=Total.value;

if(LastCount !=StrLength) {//在此判断，减少循环次数

for (i=0;i<StrLength;i++){

ByteCount　= (StrValue.charCodeAt(i)<=256) ?ByteCount+1 :ByteCount+2;

if (ByteCount>MaxValue) {

Message.value=StrValue.substring(0,i);

alert("评论内容最多不能超过 "+MaxValue+"个字节！\n注意：一个汉字为两字节。");

ByteCount=MaxValue;

break;

}

Used.value=ByteCount;

Remain.value=MaxValue-ByteCount;

LastCount=StrLength;

}

//-->

</SCRIPT>

（2）在<textarea>标记的 onKeyDowns 事件和 onKeyUp 事件中分别调用自定义 JavaScript脚本函数CountStrByte()，其关键代码如下。

最多允许

个字节已用字节：

剩余字节：

举一反三

根据本实例，读者可以：

实现开发中介信息网站中的信息发布页面；

实现开发餐饮网站中的留言信息页面。

实例059 自动选择文本框/编辑框中的文字

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\059

实例说明

在一些实际应用中，经常要对大量的文字信息进行编辑。为了节省对文字编辑的时间或是引起用户的注意，可以自动选择编辑区域内的文字内容，方便用户进行替换、读取等操作。运行本实例，当单击文本框/编辑框（即当页面中的文本框/编辑框获得焦点）时，文本框/编辑框中的文字将自动全部选中。程序运行结果如图2.5所示。

图2.5 自动选择文本框/编辑框中的文字

技术要点

本实例主要应用 JavaScript的 document 对象来设置文本框/编辑框的 select()属性，select()属性用于选择文本框/编辑框中的所有文本。

实现过程

（1）实现自动选择文本框/编辑框中的文字的自定义JavaScript函数，其关键代码如下。

function Myselect_txt(){

if (document.form1.title.focus){

document.form1.title.select();}

}

function Myselect_txtarea(){

if (document.form1.content.focus){

document.form1.content.select();}

}

</script>

（2）分别在<input>标记和<textarea>标记的onClick事件中调用自定义JavaScript函数，代码如下。

<textarea name="content" cols="50" rows="6" onClick="Myselect_txtarea()">今日,据相关方面报道,...</textarea>

举一反三

根据本实例，读者可以：

实现开发电子商务网站中的查看商品信息页面；

实现开发中介网站中的查看用户求职信息页面。

实例060 按下回车键时自动切换焦点

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\02\060

实例说明

在设计表单时，为了方便用户填写表单，可以设置按下回车键自动切换到下一个控件的焦点，而不是直接提交表单。运行本实例，当用户填写完一项信息后，按下回车键时将焦点自动切换到下一个文本框中。程序运行结果如图2.6所示。

图2.6 按下回车键时自动切换焦点

技术要点

本实例主要应用JavaScript的event对象的keyCode只读属性。event对象的确切属性依赖于发生的事件。下面给出event对象的部分属性，如表2.2所示。

表2.2 Event对象的部分属性

实现过程

实现按下回车键时自动切换焦点的关键代码如下。

function Myenter(str){

if (event.keyCode == 13){

str.focus();}

}

</script>

举一反三

根据本实例，读者可以：

开发在线论坛的用户注册页面；

开发客房预订管理系统的用户信息登记页面。

2.2 下拉列表/菜单

在开发网络程序时，对下拉列表的应用非常广泛，通过下拉列表用户不仅可以查看多种选项，在页面中还可以使用多个下拉列表制作多级菜单，为用户提供更多信息。本节将介绍下拉列表的应用。

实例061 获取下拉列表/菜单的值

本实例是一个获取控件值的程序

实例位置：光盘\mingrisoft\02\061

实例说明

在设计网页时，可以使用下拉列表/菜单提供多个选项，不仅为用户提供方便，程序人员还可以根据获取到的下拉列表/菜单值将用户提交的信息进行分类存储，保证对数据库信息的有效维护。运行本实例，单击“添加”按钮，在弹出的窗口中将显示用户在下拉列表中选择的选项名称。程序运行结果如图2.7所示。

图2.7 获取下拉列表/菜单的值

技术要点

本实例主要应用JavaScript 的document 对象获取下拉列表/菜单的值，并调用alert( )方法弹出一个警告对话框，显示获取的信息内容。

实现过程

实现获取下拉列表/菜单的值的关键代码如下。

functionMycheck(){

var val1,val2,val3;

val1=document.form1.address.value;

val2=document.form1.class1.value;

val3=document.form1.huxing.value;

alert("获取下拉列表值:\n地段:"+val1+"\n房源类别:"+val2+"\n房源户型:"+val3);

}

</script>

举一反三

根据本实例，读者可以：

开发旅游网站中的用户旅游申请页面；

开发在线考试系统中的考生登记页面。

实例062 遍历多选择下拉列表

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\062

实例说明

在使用下拉列表时，用户并不局限在只能选择一个选项，还可以在下拉列表中选择多个选项。运行本实例，用户可以按住Ctrl键并使用鼠标单击所要选择的选项，或者按住Shift键并使用鼠标选择所要选择的区段，实现在下拉列表中选择多个选项，选择的内容将显示在编辑框中。程序运行结果如图2.8所示。

图2.8 遍历多选择下拉列表

技术要点

本实例首先设置下拉列表的multiple属性，即允许用户选择多个选项，然后应用JavaScript脚本获取下拉列表的 length 属性值（即选项个数）。在 for 循环语句中判断 select 元素对象的selected属性值，如果值为true（即此选项已被选中），则将此选项的value值赋给一指定变量，并将此变量值赋予页面中的编辑框。

实现过程

（1）为页面中的下拉列表设置multiple属性，并在下拉框的onChange事件中调用自定义的JavaScript函数updateorder()，其关键代码如下。

<selectname="mcusep" size="4"multiple class="wenbenkuang"

onchange="updateorder()">

<optionvalue="JavaScript程序设计">JavaScript程序设计</option>

<optionvalue="JavaScript经典教程">JavaScript经典教程</option>

<optionvalue="JavaScript范例宝典">JavaScript范例宝典</option>

<optionvalue="JavaScript与CSS样式">JavaScript与CSS样式</option>

<optionvalue="JavaScript与HTML">JavaScript与HTML</option>

</select>

（2）自定义的JavaScript脚本函数updateorder()的关键代码如下。

function updateorder()

{

var orderstring="";

var n=document.form1.mcusep.length;

for (i=0;i<n;++i)

{

if (document.form1.mcusep.options[i].selected)

{

orderstring+=document.form1.mcusep.options[i].value+"\n";

}

document.form1.textarea.value=orderstring;

}

</script>

举一反三

根据本实例，读者可以：

开发企业商务系统中的企业信息添加页面；

编写动态网站中的友情链接管理页面。

实例063 在下拉列表中进行多选移除

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\02\063

实例说明

在开发动态网站程序时，经常会遇到将下拉列表中的选项进行多选移除或者多选移入。例如，在为员工分配工作地区时，为了避免工作冲突，分给员工A负责的地区就不可以再分给员工B了，同理，分给员工B负责的地区就不可以再分给员工A了。运行本实例，选择“任务地区1”下拉列表中的选项，并单击“>>”按钮，此选项将出现在“任务地区2”下拉列表中；选择“任务地区 2”下拉列表中的选项，并单击“<<”按钮，此选项将出现在“任务地区 1”下拉列表中。程序运行结果如图2.9所示。

图2.9 在下拉列表中进行多选移除

技术要点

本实例主要应用JavaScript的while循环语句，判断如果select元素的selectedIndex属性值不为−1，则获取在下拉列表中的选中项的索引值和对应的文本，然后应用select元素对象的add()方法将此选项添加到另一个下拉列表中，并应用 select元素对象的 remove()方法移除当前下拉列表中的此选项。

实现过程

（1）在页面中分别添加两个下拉列表和普通按钮，在按钮的 onClick 事件中调用自定义的JavaScript脚本函数，代码如下。

<selectname="sel_place1" size="6"multiple class="wenbenkuang" id="sel_place1" style="width:100px ">

</select>

<inputname="sure1" type="button" id="sure1"onClick="allsel(document.form1.sel_place2,document.form1.sel_place1);"value="<<">

<inputname="sure2" type="button" id="sure2"onClick="allsel(document.form1.sel_place1,document.form1.sel_place2);"value=">>">

<selectname="sel_place2" size="6"multiple class="wenbenkuang" id="sel_place2" style="width:100px ">

</select>

（2）自定义的JavaScript函数的关键代码如下。

function allsel(n1,n2)

{

while(n1.selectedIndex!=-1)

{

var indx=n1.selectedIndex;

var t=n1.options[indx].text;

n2.options.add(new Option(t));

n1.remove(indx);

}

</script>

举一反三

根据本实例，读者可以：

开发员工管理系统中的员工管理权限页面；

开发电子商务网站中的商品销售渠道页面；

编写物流信息网中的货物运输方式页面。

实例064 将数组中的数据添加到下拉菜单中

本实例是一个提高效率、人性化的程序

实例位置：光盘\mingrisoft\02\064

实例说明

在开发动态网站时，可以将一些固定不变的数据存储在数组中，然后将数组中的数据显示到下拉菜单中以供用户选择，这样可以加快程序运行速度，方便用户浏览网页。运行本实例，单击下拉菜单的控制按钮，将显示出该下拉菜单中的全部选项。程序运行结果如图2.10所示。

图2.10 将数组中的数据添加到下拉菜单中

技术要点

本实例主要应用JavaScript的构造函数Array()和构造函数Option()。下面分别进行介绍。

（1）使用构造函数Array()和运算符new可以创建Array数组对象，并且可以使用多种方式创建数组，详细内容请参见实例012。

（2）使用构造函数Option()可以动态地创建Option对象，语法如下。

new Option(text,value,defaultSelected,selected)

参数说明如下。

● text：表示一个字符串，指定Option 对象的text 属性。

● value：表示一个字符串，指定Option 对象的value 属性。

● defaultSelected：为布尔值，指定Option 对象的defaultSelected 属性。

● selected：为布尔值，指定Option 对象的selected 属性。

实现过程

（1）在<script>…</script>标记之间，首先定义一个数组，并为数组赋值，然后自定义一个JavaScript函数，将数组中的数据添加到表单的下拉菜单中，其关键代码如下。

var counts;

counts=0;

arr=newArray("JavaScript与ASP","JavaScript与JSP","JavaScript与ASP.NET","JavaScript与PHP");

counts=arr.length;

functionMyselect(){

var i;

for (i=0;i< counts; i++)　{

document.form1.sel.options[i]=newOption(arr[i],i);

}

</script>>

（2）在<select>标记的onFocus事件中调用自定义的JavaScript函数Myselect()，代码如下。

举一反三

根据本实例，读者可以：

开发企业进销存管理系统中的商品分类信息页面；

开发客户关系管理系统中的客户管理页面。

实例065 应用下拉菜单选择所要联机的网站

本实例是一个应用广泛的程序

实例位置：光盘\mingrisoft\02\065

实例说明

在进行网站程序设计时，大多数网站都设有友情链接这一模块，通常情况下，链接的网站全部显示在页面中，浏览者可通过单击网站名称或地址的超级链接进入所要访问的网站。有时为了节约页面也可以通过下拉菜单的方法来实现该功能。运行本实例，当用户选择下拉菜单中所要联机的网站后（如图 2.11 所示），单击“GO！”按钮可以立即链接到指定的网站。此实例还附加是否以“新窗口访问”选项，浏览者可根据需要确定是否选择。

图2.11 应用下拉菜单选择所要联机的网站

技术要点

本实例将下拉菜单中各选项的 value 属性设置为对应联机网站的网址，并在自定义的 JavaScript函数goURL()中获取用户选择的下拉列表选项值，然后使用window对象的location属性指定链接的URL地址。

实现过程

（1）自定义一个JavaScript函数，该函数首先判断用户是否选择在“新窗口访问”，如果勾选此项，则使用 window 对象的 open()方法打开一个新窗口浏览页面，否则在本窗口中打开新页面，其关键代码如下。

<!--

function goURL(){

var thebox=document.form1

if(thebox.fig.checked){

if(!window.newwindow){

newwindow=window.open("")

newwindow.location=

thebox.example.options[thebox.example.selectedIndex].value

}

else

window.location=

thebox.example.options[thebox.example.selectedIndex].value

}

//-->

</script>

（2）在<input>标记的onClick事件中调用自定义JavaScript函数goURL()，代码如下。

<span class="style1">新窗口访问</span><br>

<selectname="example"onchange="">

</select>

<inputname="button" type="button"onclick="goURL()"value="Go!">

</form>

举一反三

根据本实例，读者可以：

在动态网站中应用本实例实现网站导航；

开发图书管理系统中按图书分类搜索图书的页面。

实例066 多级级联菜单

本实例是一个提高工作效率的程序

实例位置：光盘\mingrisoft\02\066

实例说明

在实际应用中，经常将事物进行分类，分类可以有二级或者多级。在设计页面时，可以使用多个下拉菜单分别显示不同级别的分类信息，即实现多级级联菜单。运行本实例，当选择商品的“第一级分类”下拉菜单时，商品的“第二级分类”下拉菜单的内容会随即发生变化。程序运行结果如图2.12所示。

图2.12 多级级联菜单

技术要点

本实例首先在<script>标记中定义两个数组，分别用于记录商品一级分类和二级分类的信息，然后自定义一个 JavaScript 函数，该函数的功能是当触发商品“第一级分类”下拉菜单中的 onChange 事件时，先清空商品的“第二级分类”下拉菜单中的选项内容，然后再将对应信息装载到商品的“第二级分类”下拉菜单中。

实现过程

实现多级级联菜单的关键代码如下。

var arr2=newArray(4);

arr2["数码设备"]= newArray("数码相机","打印机");

arr2["家用电器"]= newArray("电视机","电冰箱");

arr2["礼品工艺"]= newArray("鲜花","彩带");

function removeinfo(classMenu){//将下拉框各选项清空

for (var i=0; i< classMenu.options.length; i++){

classMenu.options[i]=null;

}

function changeMenu(classList,classMenu){

removeinfo(classMenu)

for (var i=0; i< classList.length; i++){

classMenu[i]=newOption(classList[i],classList[i]);

}

</script>

</select>

</select>

举一反三

根据本实例，读者可以：

开发中介信息网站的房屋求购页面；

开发简历信息网中的个人简历添加页面。

实例067 可以输入文字的下拉菜单

本实例是一个技巧性较强的程序

实例位置：光盘\mingrisoft\02\067

实例说明

网页中下拉菜单的选项是固定的，这样就存在一些弊端，如果用户想选择的项目不在下拉菜单的所列选项中，该怎么办呢？如果能在下拉菜单中输入文字，这个问题就解决了。运行本实例，在“等级名称”下拉菜单中，只包含了“新进成员”、“游侠”、“斑竹”3 个选项，如果要添加的用户是上面3个选项以外的等级，就可以在下拉菜单中直接输入等级名称。程序运行结果如图2.13所示。

图2.13 可以输入文字的下拉菜单

技术要点

由于下拉菜单的选项是固定的，所以要实现在下拉菜单中输入文字，首先需要捕获用户的键盘事件，然后根据键盘输入的数据动态添加下拉菜单的选项，同时还需要判断用户按下的是退格键还是空格键，如果是退格键，则需要从已经添加的文字中删除一个文字，如果是空格键，则需要在已经添加的文字后面添加一个空格字符。

本实例主要应用JavaScript来设置元素的innerText属性，应用String对象的fromCharCode()方法以及select 元素对象option 数组的remove( )方法。下面分别进行介绍。

● innerText 属性：用于修改起始标记与结束标记之间的文本。

● fromCharCode 方法：返回指定数值对应的字符，即将数值转换为字符。

● remove 方法：删除option 数组中对应的选项。

实现过程

（1）在页面中添加“等级名称”下拉菜单，其中包括“新进成员”、“游侠”、“斑竹”3 个选项，代码如下。

<selectname="sel_grand" id="sel_grand"onkeypress="add_opt(3)"onkeyup="edit_opt(3)">

</select>

（2）在<select>标记的onkeypress事件中调用自定义的JavaScript函数add_opt(opt)，用于在下拉菜单中添加新的选项，并设置该选项为选中状态，代码如下。

function add_opt(opt){

//opt表示现有可选项的数目

form1.sel_grand.options[opt]=newOption(ok=(form1.sel_grand.options[opt])?

form1.sel_grand.options[opt].innerText+String.fromCharCode(event.keyCode):

String.fromCharCode(event.keyCode),ok)

form1.sel_grand.selectedIndex=opt;

}

</script>

（3）在<select>标记的onkeyup事件中调用自定义的JavaScript函数edit_opt(opt)，用于处理当用户按下退格键时，将已经写到下拉菜单中的文字删除，当用户按下空格键时，在下拉菜单中添加一个空格符号，代码如下。

function edit_opt(opt){

//opt表示现有可选项的数目

if(form1.sel_grand.options[opt]){

if(event.keyCode==8){

var str=form1.sel_grand.options[opt].innerText;

var len=str.length;

form1.sel_grand.options[opt].innerText=str.substring(0,len-1);

if(form1.sel_grand.options[opt].innerText==""){

form1.sel_grand.remove(opt);

form1.bsel_grandranch.selectedIndex=1;

};

}

if(event.keyCode==32){

form1.sel_grand.options[opt].innerText+=" ";

}

</script>

举一反三

根据本实例，读者可以：

开发企业进销存管理系统中的商品添加页面；

编写动态网站中的在线信息收集页面。

实例068 根据下拉菜单的值显示不同控件

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\068

实例说明

在开发Web应用程序时，经常涉及到多条件查询的问题。为了方便用户，可以根据用户在下拉菜单中选择的条件，显示不同的控件。运行本实例，在“统计类型”下拉菜单中选择“按月统计”时，在下方将显示关于月份的复选框，如图2.14所示。在选择“按年统计”时，在下方则显示关于年份的单选框，如图2.15所示。

图2.14 选择“按月统计”

图2.15 选择“按年统计”

技术要点

本实例主要通过JavaScript的document对象设置表格元素的display属性，来实现控件的隐藏或者显示。当display属性值为none时，表示元素隐藏，display属性值为block时，表示元素显示。

实现过程

（1）根据下拉菜单的值显示不同控件的自定义JavaScript脚本函数，代码如下。

function changeMenu(Menutext){

if(Menutext == "按月统计"){

document.all.NumID.style.display="block";

document.all.DateID.style.display="none";

}

if(Menutext == "按年统计"){

document.all.DateID.style.display="block";

document.all.NumID.style.display="none";

}

</script>

（2）在<select>标记的 onChange 事件中调用 JavaScript脚本函数 changeMenu(Menutext)，并设置控件在默认状态下是不可见的，代码如下。

<option selected>选择统计类型</option>

</select>

…略

…略

举一反三

根据本实例，读者可以：

开发校友录网站中的班级查看页面；

开发企业门户网站中的站内信息添加页面。

实例069 分级下拉列表

本实例是一个方便用户浏览和操作的程序

实例位置：光盘\mingrisoft\02\069

实例说明

在制作网页时，如果信息分类的内容很多，可以在下拉列表中将其分级显示，使用户更明楚所查看的选项。运行本实例，可以看到下拉列表中的选项是分级显示的。程序运行结果如图2.16所示。

图2.16 分级下拉列表

技术要点

本实例主要应用了<optgroup>标记，并设置其label属性。<optgroup>标记主要用于对select元素中的选项进行逻辑分组，在<optgroup>标记中指定的文本是非可选项，一般通过替换文本与可选项区分开。

注意：<optgroup>标记与</optgroup>应成对使用。

实现过程

实现分级下拉列表的关键代码如下。

<selectname="book_class" id="book_class">

<option>JavaScript程序设计</option>

</optgroup>

</optgroup>

</select>

举一反三

根据本实例，读者可以：

在省份城市下拉列表中应用该方法。

2.3 单选按钮组

单选按钮组是由一组单选按钮组成的，并且在一个单选按钮组中，每次只能有一个单选按钮被选中。单选按钮组也是HTML页面中常用的表单元素之一。下面通过几个具体实例介绍单选按钮组的应用。

实例070 不提交表单获取单选按钮的值

本实例是一个获取控件值的程序

实例位置：光盘\mingrisoft\02\070

实例说明

在编写信息添加模块时，一般都需要对用户输入信息的合法性进行判断。判断用户输入信息的合法性有两种实现方法：一种是在提交表单以前，应用 JavaScript实现；另一种是在表单提交以后通过 VBScript 实现。通常情况下采用前者。在判断用户输入的证件号码是否正确时，需要根据前面选择的证件类型进行判断，因为不同的证件其号码位数是不同的，例如，身份证一般为 15位或 18位，而学生证一般为 8位或 12位。运行程序，当用户选择证件类型为“学生证”后，在“证件号码”文本框中输入学生证号码，当光标移出该文本框时，程序将判断用户输入的学生证号码是否正确，如果不正确将给予提示，如图2.17所示。

图2.17 不提交表单获取单选按钮的值

本实例主要通过一组单选按钮组成的单选按钮组实现，单选按钮组每次只能有一个单选按钮被选中。单选按钮的属性和事件如表2.3所示。

技术要点

表2.3 单选按钮的属性及事件

实现过程

实现不提交表单获取单选按钮的值的关键代码如下。

function getVal(){

varCardTypeValue;

for (i=0;i<form1.CardType.length;i++){

if (form1.CardType[i].checked){

CardTypeValue=form1.CardType[i].value;

break;　//使用该语句可以减少不必要的循环次数

}

if(CardTypeValue=="身份证"){

if(form1.pcard.value.length!=15&& form1.pcard.value.length!=18){

alert("你输入的证件号码有误！");form1.CardType.focus();return;

}

}else{

if(CardTypeValue=="学生证"){

if(form1.pcard.value.length!=8&& form1.pcard.value.length!=12){

alert("你输入的证件号码有误！");form1.CardType.focus();return;

}

</script>

<inputname="pcard" type="text" id="Tel"onBlur="getVal()">

举一反三

根据本实例，读者可以：

开发信息网站中的招聘/求职信息添加页面；

开发手机销售网站中的购买订单页面。

实例071 选中单选按钮后显示其他表单元素

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\071

实例说明

在设计网站新闻信息添加页面时，根据选择的信息类型的不同，需要显示不同的表单元素。运行本实例，选中“站内公告”单选按钮时，其下方显示“信息主题”文本框和“信息内容”编辑框，如图2.18所示。选中“商业资讯”单选按钮时，其下方将增添一个“图片名称”文本框，如图2.19所示。

图2.18 选中“站内公告”单选按钮

图2.19 选中“商业资讯”单选按钮

技术要点

本实例主要应用JavaScript来设置表格的display样式，以实现表格的显示和隐藏。通过设置表格的id属性，可实现对表格的整体控制。通过将表格的display样式设置为“none”，可以控制表格的隐藏；将表格的display样式设置为“block”，可以显示表格。

实现过程

（1）设置表格id属性值，并设置其在默认状态下是不可见的。

（2）在选中“站内公告”单选按钮时，触发其onClick事件，使“图片名称”文本框不可见。

（3）在选择“商业资讯”单选按钮时，触发其onClick事件，使“图片名称”文本框可见。

举一反三

根据本实例，读者可以：

开发动态网站管理员级别设置页面；

● 开发中介信息网站中的多条件信息搜索页面。

实例072 通过单选按钮控制其他表单元素是否可用

本实例是一个人性化的程序

实例位置：光盘\mingrisoft\02\072

实例说明

在开发动态网站时，根据用户选择的选项不同，可以设置表单中的元素是否可用，以保证提交信息的准确性。运行本实例，选中“普通主题”单选按钮时，用户可以使用“主题分类”下拉列表，如图 2.20 所示。选中“版面公告”单选按钮时，“主题分类”下拉列表呈现灰色状态，即在发表版面公告时不允许选择主题分类，如图2.21所示。

图2.20 选中“普通主题”单选按钮

图2.21 选中“版面公告”单选按钮

技术要点

本实例主要应用JavaScript来设置下拉列表的disabled属性。当元素的disabled属性为true时表示该元素不可用，控件元素呈现灰色状态。

实现过程

（1）设置下拉列表的id属性，并设置下拉列表在默认情况下是可用的。

</select>

（2）当选中“普通主题”单选按钮时，触发其onClick事件，刷新本页面。

（3）当选中“版面公告”单选按钮时，触发其onClick事件，设置下拉列表的disabled属性值为true。

举一反三

根据本实例，读者可以：

开发企业员工信息管理系统中的员工职称信息页面；

开发物业管理系统中的管理员权限页面。

2.4 复选框

在设计网页时，根据用户需求，可以使用复选框为用户提供多个选项，这样用户针对某些问题时可以选择一个以上的选项。复选框显示一个带有标识的小方格，当用户单击时，在其中会显示一个选择标志，或者将已有标志取消。本节将介绍复选框的应用。

实例073 不提交表单获取复选框的值

本实例是一个获取控件值的程序

实例位置：光盘\mingrisoft\02\073

实例说明

在制作网页时，在不提交表单的情况下也可以获取复选框的值。运行本实例，选择复选框后，在“处理信息显示”文本框内单击鼠标使文本框获得焦点，将即时显示用户选中的复选框值。程序运行结果如图2.22所示。

图2.22 不提交表单获取复选框的值

技术要点

本实例主要应用JavaScript的for循环语句来判断复选框的checked属性值，如果checked属性值为true（即说明复选框已被选中），则记录复选框值，并将所有选中的复选框值赋给“处理信息显示”文本框。

实现过程

（1）自定义一个JavaScript函数，该函数使用for循环语句，将选中的复选框值赋给变量，并将变量值赋给文本框，其关键代码如下。

function Mycheck(){

var str="";

for (var i=0; i < document.form1.chk_type.length; i++){

if (document.form1.chk_type[i].checked){

str+=document.form1.chk_type[i].value;

}

document.form1.txt_info.value=str;

}

</script>

（2）在<input>标记的onFocus事件中调用JavaScript脚本函数Mycheck()，代码如下。

举一反三

根据本实例，读者可以：

开发办公自动化管理系统中的管理员信息添加页面；

开发在线投票页面。

实例074 控制复选框的全选或反选

本实例是一个应用较为广泛的程序

实例位置：光盘\mingrisoft\02\074

实例说明

在查看数据信息时，经常需要对多条数据进行操作。例如，删除数据时，通过控制复选框的全选或反选，可以批量删除数据等。运行本实例，选中“[全选/反选]”复选框，表单中所有的复选框都将处于选中状态，如图2.23所示。

图2.23 控制复选框的全选或反选

技术要点

本实例应用的自定义JavaScript函数首先判断表单中包含复选框的数量，如果数量大于0，则使用for循环语句设置所有复选框的checked属性值为true，如果“[全选/反选]”复选框处于未选中状态，则设置所有复选框的checked属性值为false。

实现过程

控制复选框的全选或反选的关键代码如下。

function CheckAll(elementsA,elementsB)

{

var len = elementsA;

if(len.length > 0)

{

for(i=0;i<len.length;i++)

{

elementsA[i].checked = true;

}

if(elementsB.checked ==false)

{

for(j=0;j<len.length;j++)

{

elementsA[j].checked = false;

}

</script>

举一反三

根据本实例，读者可以：

开发新闻信息网站中的信息查看页面；

开发博客网站中的文章评论查看页面。

实例075 只有一个复选框时控制复选框的全选或反选

本实例是一个提高操作技能的程序

实例位置：光盘\mingrisoft\02\075

实例说明

在网页中，如果显示的信息数量只有一条，即只有一个需要控制的复选框时，使用上一实例的 JavaScript 函数控制复选框的全选或反选就会出现错误。本实例将实现只有一个复选框时控制复选框的全选或反选的功能。程序运行结果如图2.24所示。

图2.24 只有一个复选框时控制复选框的全选或反选

技术要点

本实例主要通过 JavaScript的 if条件判断语句确定复选框的数量是否大于 0，如果数值不大于0，说明需要控制的复选框只有一个（即返回的length属性值为null），则可以直接设置复选框的checked属性值为true或者false。

实现过程

实现只有一个复选框时控制复选框的全选或反选的关键代码如下。

function CheckAll(elementsA,elementsB)

{

var len = elementsA;

if(len.length > 0) {}

else

{

len.checked = true;

if(elementsB.checked == false)

{

len.checked = false;

}

</script>

举一反三

根据本实例，读者可以：

开发网络考试系统中的试题查看页面；

开发在线美食网站后台管理系统中的美食查看页面。

2.5 密码域

在开发动态网站时，网站前台用户的注册页面、登录页面或者网站后台管理员登录页面都要用到密码域。在页面中不仅可以获取密码域的值，还可以对密码域进行设置使其内容更安全。本节将介绍密码域的应用。

实例076 让您的密码域更安全

本实例是一个提高安全性的程序

实例位置：光盘\mingrisoft\02\076

实例说明

对于网络应用程序或网站来说，安全最为重要。其中，密码域的安全也非常重要。虽然在密码域中已经将所输入的字符以掩码形式显示了，但是它并没有实现真正保密，因为用户可以通过复制该密码域中的内容，并将复制的密码粘贴到其他文档中，查看密码的“真实面目”。为实现密码的真正安全，可以将密码域的复制功能屏蔽，同时改变密码域的掩码符号。运行本实例，输入密码并选中所输入的密码，再单击鼠标右键时，可以发现原来的复制菜单项变为灰色即为不可用状态，并且复制快捷键“Ctrl+C”也不可用了。程序运行结果如图2.25所示。

图2.25 让您的密码域更安全

技术要点

本实例主要通过控制密码域的 oncopy、oncut、onpaste 事件来实现密码域的内容禁止复制的功能，并通过改变其style样式属性来实现改变密码域中掩码的样式。

注意：在修改掩码的样式时一定要选择Windows系统自带的字体样式，如果设置的字体样式不存在，密码将会以原形显示。

实现过程

（1）在页面中添加密码域，代码如下。

（2）添加代码，禁止用户复制、剪切和粘贴密码，代码如下：

（3）改变密码域的掩码样式，将其“font-family”设置为“Wingdings”，最终代码如下。

举一反三

根据本实例，读者可以：

开发电子商务网站中的用户登录页面；

开发客户管理系统的管理员登录页面；

开发在线论坛的用户登录页面。

实例077 不提交表单自动检测密码域是否相同

本实例是一个提高安全性的程序

实例位置：光盘\mingrisoft\02\077

实例说明

在制作用户注册信息页面时，要求用户输入确认密码，以确定用户输入密码是否准确。运行本实例，如果用户在“确认密码”域输入的信息与“密码”域输入的信息不同，将弹出提示框，要求用户再次确认输入的密码。程序运行结果如图2.26所示。

图2.26 不提交表单自动检测密码域是否相同

技术要点

本实例主要通过JavaScript的if条件语句判断两次输入的密码是否相同，如果不同，则调用alert( )方法弹出一个警告提示框。

实现过程

实现不提交表单自动检测密码域是否相同的关键代码如下。

举一反三

根据本实例，读者可以：

开发餐饮网站中的会员注册页面；

开发汽车网站中的VIP会员注册页面。

2.6 表单应用

表单是实现动态网页的一种主要的外在形式，使用表单可以收集客户端提交的有关信息。表单是实现网站互动功能的重要组成部分。下面通过几个具体的实例介绍表单的应用。

实例078 通过JavaScript控制表单的提交与重置

本实例是一个方便、实用的程序

实例位置：光盘\mingrisoft\02\078

实例说明

用户填写表单时，可以单击“提交”按钮提交表单，也可以直接按回车键提交表单，同时还可以单击“重置”按钮将所填内容清空。为了防止用户因疏忽而按错键，可以使用 JavaScript 来控制表单的提交与重置。程序运行结果如图2.27所示。

图2.27 通过JavaScript控制表单的提交与重置

技术要点

本实例主要通过JavaScript来调用表单的submit()提交方法和 reset()重置方法。页面中的按钮为普通按钮，即<input>标记的类型为button。

实现过程

实现通过JavaScript脚本控制表单的提交与重置的关键代码如下。

举一反三

根据本实例，读者可以：

开发宽带点播网站中的音频和影视文件上传页面；

开发供求信息网站中的信息添加页面。

实例079 带记忆功能的表单

本实例是一个提高操作效率、人性化的程序

实例位置：光盘\mingrisoft\02\079

实例说明

在一般情况下，用户提交表单后，将会跳转到另一个页面，同时表单中的内容也会清空。而有时为了简化操作步骤，需要保留历史信息，即当用户再返回原来页面时，还可以看到刚才所填写的信息。运行本实例，当用户刷新或者单击“确定”按钮提交表单后再退回到原来页面时，“计量单位”和“供应商”文本框中的内容将保持不变。程序运行结果如图2.28所示。

图2.28 带记忆功能的表单

技术要点

本实例主要通过在CSS样式定义中，设置behavior确定对象的行为，并设置<meta>元信息标记中的name属性和content属性来实现保留历史信息的功能。<meta>标记用来在HTML文件中模拟HTTP协议的响应头报文，是实现元数据的主要标记，可以用于鉴别作者、标注内容提要和关键字、设定页面字符集、刷新页面等。在HTML文档头部可以包括任意数量的<meta>标记。

实现过程

实现带记忆功能的表单的关键代码如下。

<html>

<head>

<title>带记忆功能的表单</title>

.saveHistory{

behavior:url(#default#savehistory);

}

</style>

</head>

</body>

</html>

举一反三

根据本实例，读者可以：

开发网上书店系统中的图书添加页面；

开发简历管理系统中的简历录入页面。

实例080 防止表单重复提交

本实例是一个提高操作安全性的程序

实例位置：光盘\mingrisoft\02\080

实例说明

用户在提交表单时，如果单击提交按钮后，表单没有立即提交，用户则会多次单击提交按钮，即可能会多次提交表单内容，这样会造成意想不到的后果，使应用程序无法运行。运行本实例，当用户单击“确定”按钮后，提交表单的同时该按钮将被禁用，防止表单重复提交。程序运行结果如图2.29所示。

图2.29 防止表单重复提交

技术要点

本实例首先设置<input>标记的 disabled 属性值，然后再调用表单的 submit()方法。页面中的按钮为普通按钮，即<input>标记的类型为button。

实现过程

防止表单重复提交的关键代码如下。

举一反三

根据本实例，读者可以：

开发电子商务网站中的商品入库信息页面；

开发客户关系管理系统中的客户签订合同页面。

实例081 自动提交表单

本实例是一个提高操作效率、人性化的程序

实例位置：光盘\mingrisoft\02\081

实例说明

根据实际需要，有时需要设置自动提交表单。例如，网络系统中的考试页面，当考生填写表单的时间到达考试时限时，程序将自动提交表单，表示考试结束。运行本实例，用户单击“开始考试”超级链接时，表示考试开始，当剩余时间为0时，表单将自动提交。程序运行结果如图2.30所示。

图2.30 自动提交表单

技术要点

本实例主要应用JavaScript语言window对象的setTimeout()方法。SetTimeout()方法的作用是根据设定的时间间隔执行一次指定的表达式，语法如下。

setTimeout（表达式,延时时间[,参数]）

延时时间是以毫秒为单位的（即1000ms=1s）。

通过循环调用 setTimeout( )方法，可以实现多次执行指定程序，从而判断用户用时是否已经达到规定的时限，如果达到规定的时限，则调用表单的submit()方法提交表单内容。

实现过程

实现自动提交表单的关键代码如下。

<ahref="#"onClick="Time_limit()">开始考试</a>

剩余时间:<font color="#FF0000" id="showtime"></font> 秒

<inputname="sec_nums" type="hidden" id="sec_nums">

</form>

var sec=5;

functionTime_limit(){

document.all.show.style.display="block";

document.all.hidden.style.display="none";

thistime=document.form1.sec_nums.value;

document.all.showtime.innerHTML=thistime;

if (thistime<=0){

document.form1.submit();

}

document.form1.sec_nums.value=thistime-1;

var timer=window.setTimeout("Time_limit()",1000);

}

document.all.form1.sec_nums.value=sec;

</script>

</html>

举一反三

根据本实例，读者可以：

开发电子商务网站中的订单提交页面；

编写游戏网站中的在线问答页面。

实例082 通过for循环获取表单元素的中文名称

本实例是一个提高基础技能的程序

实例位置：光盘\mingrisoft\02\082

实例说明

当页面中包含很多表单元素时，可以使用JavaScript脚本在for循环语句内获取表单元素的中文名称，并验证表单控件元素是否为空值。运行本实例，当用户提交表单时，如果表单中控件元素值为空字符串，则会弹出警告提示框。程序运行结果如图2.31所示。

图2.31 通过for循环获取表单元素的中文名称

技术要点

本实例主要通过JavaScript 的document 对象来获取表单控件元素数组elements[ ]的值，并应用for循环语句以及if条件语句来判断各表单控件元素的值是否为空，如果为空将弹出带中文提示信息的对话框。

实现过程

（1）在页面中添加表单，并设置文本框对应的name属性值和title属性值，代码如下。

<tr align="left" bgcolor="#FFFFFF"><td height="22" align="left">加盟商应收退款是否对账:</td>

<tdheight="22"><inputname="txt_fig" type="radio"value="1" checked>是

</form>

（2）自定义的JavaScript函数Mycheck(form)的关键代码如下。

functionMycheck(form){

for(i=0;i<form.length;i++){

if(form.elements[i].value==""){

alert(form.elements[i].title+"不能为空!");return false;}

}

</script>

举一反三

根据本实例，读者可以：

开发物流信息网站中的货物详细信息页面；

开发游戏网站中的软件下载页面。

实例083 可以提交到不同处理页的表单

本实例是一个提高操作效率的程序

实例位置：光盘\mingrisoft\02\083

实例说明

在实际应用中，经常需要根据用户填写内容的不同，将表单提交到不同的处理页。运行本实例，根据在“提交页面”文本框中输入的页面名称，将表单提交到相应的处理页。程序运行结果如图2.32所示。

图2.32 可以提交到不同处理页的表单

技术要点

本实例主要通过JavaScript来设置表单的action属性（确定提交到的处理页面），然后调用表单的submit()方法（表示执行提交表单的命令）。

实现过程

实现可以提交到不同处理页的表单的关键代码如下。

functionMycheck(){

var txt=document.form1.txt_action.value;

document.form1.action=txt;

document.form1.submit();

}

</script>

举一反三

根据本实例，读者可以：

开发根据文件类别上传文件的页面；

开发在线论坛中的用户等级设置页面。

本周热推：

破译Web UI：网页UI设计规范、流程与实战案例 Dreamweaver CS6网页设计入门、进阶与提高网页设计：从界面布局到视觉表现（视频版）淘宝店铺页面设计与装修实战教程 Vue.js核心技术解析与uni-app跨平台实战开发

第2章 表单及表单元素

2.1 文本框/编辑框/隐藏域组件

实例055 获取文本框/编辑框/隐藏域的值

实例056 自动计算金额

实例057 设置文本框的只读属性

实例058 限制多行文本域输入的字符个数

实例059 自动选择文本框/编辑框中的文字

实例060 按下回车键时自动切换焦点

2.2 下拉列表/菜单

实例061 获取下拉列表/菜单的值

实例062 遍历多选择下拉列表

实例063 在下拉列表中进行多选移除

实例064 将数组中的数据添加到下拉菜单中

实例065 应用下拉菜单选择所要联机的网站

实例066 多级级联菜单

实例067 可以输入文字的下拉菜单

实例068 根据下拉菜单的值显示不同控件

实例069 分级下拉列表

2.3 单选按钮组

实例070 不提交表单获取单选按钮的值

实例071 选中单选按钮后显示其他表单元素

实例072 通过单选按钮控制其他表单元素是否可用

2.4 复选框

实例073 不提交表单获取复选框的值

实例074 控制复选框的全选或反选

实例075 只有一个复选框时控制复选框的全选或反选

2.5 密码域

实例076 让您的密码域更安全

实例077 不提交表单自动检测密码域是否相同

2.6 表单应用

实例078 通过JavaScript控制表单的提交与重置

实例079 带记忆功能的表单

实例080 防止表单重复提交

实例081 自动提交表单

实例082 通过for循环获取表单元素的中文名称

实例083 可以提交到不同处理页的表单

第2章表单及表单元素