JavaScript程序设计：第8章 表单和表单元素

第八章表单和表单元素8.1form对象(P154)form对象概述form对象代表HTML文档中的表单，一个HTML文档可以包含多个表单，它们按照在文档中的出现顺序存储在document对象的froms[]属性数组中。form对象由HTML中的<form>标签所创建，其语法如下：<formname=“formName”//表单名称[target=“windowName”]//用于响应的窗口名称

[action=“URL”]//表单被提交目的地的URL[method=(GET|POST)]//提交表单的方法[enctype=“encoding”]//表单数据的编码方式[onReset=“handler”]//表单重置时调用的事件处理器[onSubmit=“handler”]//表单提交时调用的事件处理器>…………//表单中的其他元素</form>form对象form对象概述访问文档中某一个表单的方法主要分为两大类，一类是通过document对象的forms[]属性，一类是直接通过表单名称，例如：document.forms[index]document.forms[“formName”]document.forms.formNamedocument.formName

访问表单上其他元素的方法也分为两类，可以使用elements[]数组访问表单元素，也可以通过表单名称加元素名称的方式：formName.elements[index]formName.elements[“name”]formNform对象form对象的属性action：表示要提交的表单的URL。elements[]：其元素是出现在表单中的输入元素。elements.length：表示elements[]中的元素个数。encoding：指定了表单中数据的编码方式。length：等同于elements.length属性。method：指定了提交表单的方法，它的值为“get”或者“post”。target：指定了显示提交表单结果的窗口或者框架的名字。form对象的方法(见例8-2)reset()：将表单中所有输入元素都重新设定为它们的默认值。submit()：用于提交表单。form对象form元素的组成表8-1表单元素（P156）表单元素HTML标签说明button<imputtype=button>普通按钮checkbox<imputtype=checkbox>复选框fileUpload<imputtype=file>输入框，用于输入要上传得文件名hidden<imputtype=hidden>随表单提交的用户不可见的数据option<option>select对象中的一个项目password<imputtype=password>密码输入框，输入的内容不可见radio<imputtype=radio>单选框reset<imputtype=reset>重置表单的按钮select<select>只能选择一项的列表或者下拉菜单<selectmultiple>可以选择多项的列表submit<imputtype=submit>提交表单的按钮text<imputtype=text>单行的文本输入框textarea<textarea>多行的文本输入框例8-1form对象的应用先看ex8-1.htm注意在另一窗口中显示内容的做法。document.forms.length表示表单的数量

第1组6个表单元素的值：（见ex8-1-1.htm）

document.forms[j].elements[k].valueradio对象和checkbox对象的值为

document.forms[j].elements[k].checked8.2form元素中的按钮对象(P159)

button对象button对象是表单元素之一，代表HTML文档上某个表单内的按钮，它由标准的HTML标签<imput>创建，语法如下：<inputtype=“button”//此属性决定创建的输入对象为buttonname=“buttonName”//button对象的名称，用来引用这个对象value=“buttonValue”//显示在按钮上的文本[onClick=“handler”]//按钮被点击时调用的事件处理器[onBlur=“handler”]//按钮失去焦点时调用的事件处理器[onFocus=“handler”]//按钮获得焦点时调用的事件处理器>

form元素中的按钮对象button对象的属性type：表示表单元素的类型，对于button对象而言，其type属性的值必将是“button”。name：表示button对象的名称，用于唯一标识特定的按钮。value：该属性指定了显示在按钮上的文本。button对象的方法blur()：使特定的按钮失去焦点。focus()：使特定的按钮获得焦点。form元素中的按钮对象submit对象(P160)submit对象在HTML文档中也代表一个按钮，不过与button对象不同，submit对象是一种特殊的按钮,专门用于提交表单。点击submit按钮(单击事件)，会把含有该按钮的表单中的数据提交给由form对象的action属性指定的服务器上的程序处理。submit对象还会把服务器发送回来的HTML页面装载进来。submit对象也是由标准的HTML标签<input>创建，语法规则与创建button对象类似，唯一不同的是<input>标签中的type属性必须为“submit”。submit对象的属性与button对象类似submit对象的方法与button对象类似method=“get”method=“post”都是传递数据,就是传递的方法不同.get--信息传送方式,这种方式传递的数据量比较少,但是可以把传递的信息显示在网址上.post--信息传送方式,此方式传送的信息比较多,而且不会把传递的信息显示在网址上.form元素中的按钮对象reset对象(P160)reset对象代表HTML文档中一个特殊按钮,专门用于重置表单。点击reset按钮，将会使含有该按钮的表单中的所有表单元素重置为它们的默认值。如果表单元素没有设定默认值，那么点击reset按钮的效果就是清空用户在这些元素中设定的值。reset对象也是由标准的HTML标签<input>创建，语法规则与创建button对象类似，唯一不同的是<input>标签中的type属性必须为“reset”。reset对象的属性与button对象类似reset对象的方法与button对象类似例8-2按钮对象的应用8.3form元素中的文本对象(P164)text对象text对象是最基本的表单对象之一，代表HTML表单内的单行文本输入框，它由标准的HTML标签<input>创建，语法如下：<input type=“text”//此属性决定创建的是text对象name=“textName”//text对象的名称，用来引用这个对象value=“textValue”//显示在单行文本输入框中的内容[size=“textSize”]//单行文本输入框的宽度[maxlength=“textNumber”]//单行文本输入框中最多容纳的字符数[onFocus=“handler”]//单行文本框获得焦点时调用的事件处理器[onBlur=“handler”]//单行文本框失去焦点时调用的事件处理器[onChange=“handler”]//单行文本框内容改变时调用的事件处理器[onSelect=“handler”]//单行文本框内容选中时调用的事件处理器......//其他的事件处理器>form元素中的文本对象text对象的属性defaultValue：表示单行文本框中的默认值。name：表示text对象的名称，用于唯一标识特定的单行文本框。type：对于text对象而言，其type属性的值必将是“text”。value：表示单行文本框中的当前值。size：表示单行文本框的宽度，缺省状况的宽度可容纳20个字符。maxlength：表示单行文本框中可输入的最大字符数。text对象的方法blur()：该方法使特定的text对象失去焦点。focus()：该方法使特定的text对象获得焦点。select()：该方法可以选中某text对象中的所有内容。form元素中的文本对象textarea对象textarea对象也是代表HTML表单中的文本输入框，但是与text对象不同，textarea创建的是一个多行的、可滚动的编辑文本框。注意，它由标准的HTML标签<textarea>创建，而不是由<input>标签创建，语法如下：<textareaname=“Name”//textarea对象的名称，用来引用这个对象rows=rowNumber//一个整数表示该对象的高度cols=colNumber//一个整数表示该对象的宽度[wrap=off[virtual|physical]]//处理了多少个单词包[onFocus=“handler”]//单行文本框获得焦点时调用的事件处理器[onBlur=“handler”]//单行文本框失去焦点时调用的事件处理器[onChange=“handler”]//单行文本框内容改变时调用的事件处理器[onSelect=“handler”]//单行文本框内容选中时调用的事件处理器......//其他的事件处理器>......//显示在textarea中的初始文本</textarea>form元素中的文本对象textarea对象的属性defaultValue：表示textarea中的默认值，但它不是由<textarea>标签的value属性指定，而是由<textarea>和</textarea>标签之间的文本指定。name：表示textarea对象的名称，用于标识特定的textarea元素。type：对于textarea对象而言，其type属性的值必将是“textarea”。value：表示textarea元素中的当前值。cols：表示textarea元素的宽度，单位以字符数计算。rows：表示textarea元素的高度，单位以文本的行数计算。wrap：指定了要处理的一行有多长，off表示实际文本有多长，一行就有多长；virtual表示显示一行文本时应该有换行符，但是传递一行时没有换行符；physical表示无论显示一样文本还是传递一行文本，都应该有换行符。textarea对象的方法与text对象类似form元素中的文本对象password对象password对象代表专门用于输入敏感信息（例如用户密码）的文本框，在该元素中输入的字符都将以“●”或者“＊”的其他特殊符号统一代替。password对象由标准的HTML标签<imput>创建，语法如下：<input type=“password”//此属性决定创建的是password对象name=“psdName”//password对象的名称，用来引用这个对象value=“psdValue”//显示在password元素中的内容[size=“psdSize”]//password元素的宽度[maxlength=“psdNumber”]//password元素中最多容纳的字符数[onFocus=“handler”]//password元素获得焦点时调用的事件处理器[onBlur=“handler”]//password元素失去焦点时调用的事件处理器[onChange=“handler”]//password元素内容改变时调用的事件处理器[onSelect=“handler”]//password元素内容选中时调用的事件处理器......//其他的事件处理器>form元素中的文本对象password对象的属性defaultValue：表示password中的默认值。name：表示password对象名称，用于标识特定的password元素。type：对password对象而言，其type属性值必须是“password”。value：表示password元素中的当前值。size：表示password的宽度。maxlength：表示password中可输入的最大字符数。password对象的方法blur()：该方法使特定的password对象失去焦点。focus()：该方法使特定的password对象获得焦点。select()：该方法可以选中某password对象中的所有内容。例8-3文本对象的应用用户名称框在失去焦点时触发函数nameBlur()即onblur="nameBlur()"（查2样）用户密码框在失去焦点时触发函数pswBlur()即onblur="pswBlur()"（查2样）按“数据检测”按钮时触发函数dataCheck()即onClick="dataCheck()"（查4样）例8-3文本对象的应用(P169)<inputtype="text"name="userName"value="用户名称不能为空"size=35onFocus="this.select()"onblur="nameBlur()">this------document.baseInfo.userName

<textareaname="content"rows=5cols=34onFocus="this.select()">

这家伙没什么个性！

</textarea><br><br>this------document.baseInfo.content8.4select与option对象(P171)select对象select对象代表HTML表单中的选项列表，从而使得用户可以从列表中选择需要的内容，它由标准的HTML标签<select>创建，语法如下：<selectname=“Name”//select对象的名称，用来引用这个对象size=sizeNumber//一个整数表示该对象中可见的选项数[multiple]//是否允许同时选择多个选项[onFocus=“handler”]//select元素获得焦点时调用的事件处理器[onBlur=“handler”]//select元素失去焦点时调用的事件处理器[onChange=“handler”]//select元素内容改变时调用的事件处理器......//其他的事件处理器><optionvalue=“optionValueOne”[selected]>选项一<optionvalue=“optionValueTwo”[selected]>选项二.....//其他选项</select>select与option对象select对象的属性length：表示select元素中option对象的个数，即options[]数组的长度。multiple：表示是否可以在select元素中选择多项。name：表示select对象的名称，用于唯一标识特定的select元素。options：表示select元素中option对象的数组，数组中每一个元素对应于一个option对象。selectedIndex：表示select元素中被选中选项的下标。size：表示select元素可见的选项数。type：该属性表示select元素的类型，如果select元素可以多选，那么其type属性的值为“select-multiple”；如果select元素只能单选，那么其type属性的值为“select-one”。select对象的常用方法主要包括blur()和focus()两个方法。select与option对象option对象option对象代表select元素中的一个可供选择的选项，它由标准的HTML标签<option>创建，其语法规则如下：<select><optionvalue=“optionValueOne”//提交表单时返回的值[selected]>//该选项默认状态下是否被选中Text//该选项显示的文本内容[</option>]//该标签可以省略</select>option元素总是和select元素一起使用的，<option>标记嵌套在<select>标记中，一个<option>标记代表一个选项。选项的默认值由<option>和<option>标记之间的文字设定，选项默认状态下是否被选中由selected属性决定。select与option对象option对象的属性defaultSelected：表示在默认状态下，该选项是否被选中。index：表示该选项在select元素中的位置。selected：表示当前状态下，该选项是否被选中。text：表示该选项的文本文字，即出现在<option>标签后的文字。value：表示选项在被选中情况下，提交表单时传给服务器的值。获取select对象中被选中的选项“select-one”类型“select-one”类型的select元素只能有一个选项被选中，所以只要通过select对象的selectIndex属性得到被选中选项的下标，然后在option[]数组中查找该下标对应的数组元素即可：

form.select.options[form.select.selectedIndex]select与option对象的应用获取select对象中被选中的选项“select-multiple”类型“select-multiple”类型的select元素可以同时选中多个选项，使用for循环检查options[]数组中所有option对象的selected属性，从而提取选中的选项：var

selectedArray=newArray();var

selectedNumber=0;for(vari=0;i<document.formExample.selectExample.options.length;i++){

if(document.formExample.selectExample.options[i].selected){

selectedArray[selectedNumber]=

document.formExample.selectExample.options[i];

selectedNumber=selectedNumber+1;}}select与option对象的应用在select元素中增加一个选项构造函数Option()可以动态创建一个新的option对象，从而使得用户可以在程序运行过程中根据需要为select元素添加选项，其语法如下：document.form.select.options[index]=newOption(text,value)在select元素中删除一个选项如果要在程序运行过程中动态的删除一个option对象，从而减少select元素中的选项，只需要把select对象options[]数组中相应的元素设为null即可，其语法规则如下：document.form.select.options[index]=null8.5form元素中的选择按钮对象(P179)radio对象radio对象代表HTML表单中的单选按钮，具有相同name属性的单选按钮形成一个组，同一组中只能有一个单选按钮被选中，radio对象由标准的HTML标签<input>创建，语法如下：<inputtype=“radio”//此属性决定创建的输入对象为radioname=“radioName”//此属性代表该单选按钮所在组的名称value=“radioValue”//选中该单选按钮时的返回值[checked]//该单选按钮初始状态下是否被选中[onClick=“handler”]//按单选钮被点击时调用的事件处理器[onBlur=“handler”]//按单选钮失去焦点时调用的事件处理器[onFocus=“handler”]//按单选钮获得焦点时调用的事件处理器>由于同一组radio对象的name属性相同，所以无法依据name属性获取某一组中特定的radio对象，获取某一个特定radio对象的方法是：document.radioForm.radioGroup[i]form元素中的选择按钮对象radio对象的属性checked：表示单选按钮当前是否被选中。defaultChecked：表示单选按钮在默认状态下是否被选中。length：表示同一组中单选按钮的数量。name：表示单选按钮所在组的名称，一个表单上单选按钮组名称是唯一的。type：对于radio对象而言，其type属性的值必将是“radio”。value：表示表单被提交时，如果单选按钮被选中所返回的值。radio对象的方法blur()：该方法使特定的单选按钮失去焦点。focus()：该方法使特定的单选按钮获得焦点。form元素中的选择按钮对象checkbox对象checkbox对象代表HTML表单中的复选按钮，与radio对象类似，具有相同name属性的复选按钮形成一个组，但是与radio对象不同的是，同一组中的多个复选按钮可以同时被选中。其创建语法如下：<input type=“checkbox”//此属性决定创建的输入对象为checkname=“checkboxName”//此属性代表某一个复选按钮或者复选按钮组名称value=“checkboxValue”//选中该复选按钮时的返回值[checked]//该复选按钮初始状态下是否被选中[onClick=“handler”]//按复选钮被点击时调用的事件处理器[onBlur=“handler”]//按复选钮失去焦点时调用的事件处理器[onFocus=“handler”]//按复选钮获得焦点时调用的事件处理器>form元素中的选择按钮对象访问checkbox对象单独命名的checkbox对象对于那些名称不会重复的复选框，可以采取表单名称加元素名称的方式进行访问，语法如下：document.checkboxForm.checkboxNamecheckbox对象组如果将多个checkbox对象指定为相同的名称，它们组成一个checkbox对象组，此时应该采取与radio对象相同的方式访问特定的checkbox对象，语法如下：document.checkboxForm.checkboxGroup[i]form元素中的选择按钮对象checkbox对象的属性checked：表示复选按钮当前是否被选中。defaultChecked：表示复选按钮在默认状态下是否被选中。length：表示同一组中复选按钮的数量。name：表示复选按钮的名称，如果多个复选按钮拥有相同的名称，将形成一个复选按钮组。type：对于checkbox对象而言，其type属性值必须是“checkbox”。value：表示表单被提交时，如果复选按钮被选中所返回的值。checkbox对象的方法blur()：该方法使特定的复选按钮失去焦点。focus()：该方法使特定的复选按钮获得焦点。form元素中的其他对象fileUpload对象fileUpload对象代表HTML表单中用于文件上传的输入元素，包含一个文本框和一个用来浏览目录文件的按钮，其创建语法如下：<inputtype=“file”//此属性决定创建的输入对象为fileUploadname=“fileName”//此属性代表fileUpload对象的名称[onChange=“handler”]//输入值发生变化时调用的事件处理器[onBlur=“handler”]//失去焦点时调用的事件处理器[onFocus=“handler”]//获得焦点时调用的事件处理器>fileUpload对象的属性name：表示fileUpload对象的名称。type：对于fileUpload对象而言，其type属性的值必须是“file”。value：指定了用于输入fileUpload元素中的文件路径和名称。form元素中的其他对象hidden对象