12表单对象

表单对象

---

表单对象(Form)

提供一个让客户端输入文字或进行选择的功能，例如：单选按钮、复选框、选择列表等。由<FORM>标记组构成，JavaScript自动建立一个表单对象，并将用户端的信息送至服务器进行处理。表单对象是文件对象的子对象，同时，它也包含许多子对象。

1.表单对象的使用格式

       document.forms[索引值].属性      document.forms[索引值].方法（参数群）      

或

       document.表单名称.属性

       document.表单名称.方法（参数群）

2.常用属性

Name：表单名，相当于<FORM>标记的name属性

Action：相当于<FORM>标记的ACTION属性。

Method：输入窗体的数据传送到服务器上的方式,即(FORM)标记中的METHOD属性。

Elements：表单中的所有控件，以数组索引值表示

Length：表单中的控件的个数。

Checkbox：复选框，(该属性本身也是一个对象)。

Hidden：<INPUT TYPE=”HIDDEN”>隐藏对象。

Button：<INPUT TYPE=”BUTTON”>按钮，(该属性本身也是一个对象)。

Radio：单选按钮，(该属性本身也是一个对象)。

Reset：复位按钮，(该属性自身也是一个对象)。

Submit：提交按钮，(该属性本身也是一个对象)。

Text：单行文本，(该属性本身也是一个对象)。

Textarea:多行文本，(该属性本身也是一个对象)。

Select:<SELECT>选择框，(该属性本身也是一个对象)。

3.常用方法

Submit() 提交表单(与Submit按钮的作用相同)。

reset()   重写表单(与使用reset按钮的作用相同)

5.1.13单行文本对象

      当JavaScript读到<INPUT>标记中的type属性值为text时，自动建立一个文本按钮对象，并将该对象放到表单对象的elements数组当中，让程序员可以通过一定的方法来控制这一对象。

 

1.使用文本对象的格式

document.forms[索引值].elements[索引值].属性

document.forms[索引值].elements[索引值].方法(参数群)      

或

document.表单名称.文本对象名称.属性

document. 表单名称.文本对象名称.方法（参数群）

2.常用属性

defaultValue  text对象的缺省值(VALUE属性初值)

name        text对象的名字(NAME属性)

value        text的当前值(VALUE属性值)。

form         text所在的表单。

3.常用方法

blur（）    把焦点从文本框移开。

focus（）   把焦点移到文本框。

select（）   将该对象设置成选取状态。

4.事件

onBlur、onChange、onFocus、onSelect、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove

5.举例

<TITLE>单行文本范例</TITLE>

<FORM name=form1>

    姓名：<INPUT TYPE="text" NAME="name1">

   <INPUT TYPE="button" VALUE="请单击"

   onClick=alert(form1.name1.value + "，谢谢你！") >

</FORM>                                                

5.1.14密码对象

当JavaScript读到<INPUT>标记中的type属性值为password时，自动建立一个密码对象，并将该对象放到表单对象的elements数组当中，让程序员可以通过一定的方法来控制这一对象。

  其引用方法与单行文本相同。

5.1.15按钮对象

      当JavaScript读到<INPUT>标记中的type属性值为button时，自动建立一个按钮对象，并将该对象放到表单对象的elements数组当中。

 

1.使用按钮对象的格式

document.forms[索引值].elements[索引值].属性

document.forms[索引值].elements[索引值].方法(参数群)

或

document.表单名称.按钮对象名称.属性

document. 表单名称. 按钮对象名称.方法（参数群）

2.常用属性

name        按钮对象的名字(NAME属性)

value        按钮上显示的值。

form        按钮所在的表单。

3.常用方法

blur（）    把焦点从该对象上移开。

focus（）   把焦点移到该对象上。

click（）   再该对象上单击鼠标左键。

4.事件

onBlur、onFocus、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove

5.1.16提交按钮对象

        当JavaScript读到<INPUT>标记中的type属性值为submit时，自动建立一个提交按钮对象，并将该对象放到表单对象的elements数组当中。

       其用法语按钮对象相同。

5.1.17重置按钮对象

当JavaScript读到<INPUT>标记中的type属性值为reset时，自动建立一个重置按钮对象，并将该对象放到表单对象的elements数组当中。

       其用法语按钮对象相同。

例1：用户登录界面

例2：输入信用卡号

例3：输入四位密码

5.1.18多行文当

JavaScript读到<TEXTAREA>标记时，自动建立一个文本区域对象，并将该对象放到表单对象的elements数组当中。

 

1.使用文本对象的格式

document.forms[索引值].elements[索引值].属性

document.forms[索引值].elements[索引值].方法(参数群)      

或

document.表单名称.文本区域对象名称.属性

document. 表单名称.文本区域对象名称.方法(参数群)本对象

2.属性

defaultValue  该对象的缺省值(VALUE属性初值)。

name        该对象的名字(NAME属性)

value        该对象的当前值(VALUE属性值)。

form         该对象所在的表单。

3.方法

blur（）    把焦点从文本框移开。

focus（）   把焦点移到文本框。

select（）   将该对象设置成选取状态。

4.事件

onBlur、onChange、onFocus、onSelect、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove

<Script>

   document.title = "多行文本对象示例";

   function isTooLong(elm){

      if (elm.length > 50) {

         alert("留言内容太长，请修改后再发送....");

         return false;

      }

      else

      {

         meswin=open("","","300,300");

         meswin.document.write(elm);

      }

   }

</script>

<FORM onSubmit="return isTooLong(this.msg.value)">

<TEXTAREA NAME="msg" COLS="30" ROWS="5"

   onFocus="this.value=''">

欢迎留言，不过请长话短说....</textarea><BR>

<INPUT TYPE="submit" VALUE="留言完毕">

</FORM> 

5.1.19单选按钮对象

    当JavaScript读到<INPUT>标记中的type属性值为radio时，自动建立一个单选按钮对象，并将该对象放到表单对象的elements数组当中。

 

1.使用按钮对象的格式

document.forms[索引值].elements[索引值].属性

document.forms[索引值].elements[索引值].方法(参数群)

或

document.表单名称.单选按钮对象名称.属性

document. 表单名称. 单选按钮对象名称.方法（参数群）

    2.属性

checked   设置该对象的选取状态，为一个布尔变量

defaultChecked  对应该对象的默认选取状态，为一个布尔变量。

name        按钮对象的名字(NAME属性)

value        按钮的VALUE属性值。

form         按钮所在的表单。

3.方法

blur（）    把焦点从该对象上移开。

focus（）   把焦点移到该对象上。

click（）   在该对象上单击鼠标左键。

      4.事件

onBlur、onFocus、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove

        5.举例

 

例1：判断用户身份

 

例2：在线考试

5.1.20复选框对象

          当JavaScript读到<INPUT>标记中的type属性值为checkbox时，自动建立一个复选框对象，并将该对象放到表单对象的elements数组当中。

 

1.使用复选框对象的格式

document.forms[索引值].elements[索引值].属性

document.forms[索引值].elements[索引值].方法(参数群)      

或

document.表单名称.复选框对象名称.属性

document. 表单名称. 复选框对象名称.方法(参数群)

          2.属性

checked 设置该对象的选取状态，为一个布尔变量。

defaultChecked  对应该对象的默认选取状态，为一个布尔变量。

name        按钮对象的名字(NAME属性)

value        按钮的VALUE属性值。

form         按钮所在的表单。

3.方法

blur（）    把焦点从该对象上移开。

focus（）   把焦点移到该对象上。

click（）   再该对象上单击鼠标左键。

4.事件

onBlur、onFocus、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove

   5.举例：选择颜色

<Script>

   function count() {

      var checkCount=0;

      var num = document.form1.elements.length;

      for (var i=0; i<num; i++) {

         if (document.form1.elements[i].checked)

            checkCount++;

      }

      alert ("你喜欢 "+ checkCount + "种颜色。")

   }

</Script>

<FORM NAME=form1>

请选择你喜欢的颜色：<BR>

<INPUT TYPE="checkbox" NAME="red">红色

<INPUT TYPE="checkbox" NAME="green">绿色

<INPUT TYPE="checkbox" NAME="blue">蓝色<BR>

<INPUT TYPE="button" VALUE="请单击" onClick=count()>

</FORM>                                                               

5.1.21选择对象

               当JavaScript读到<SELECT>标记时，自动建立一个选择对象，并将该对象放到表单对象的elements数组当中。

 

1.使用选择对象的格式

document.forms[索引值].elements[索引值].属性

document.forms[索引值].elements[索引值].方法(参数群)      

或

document.表单名称.选择对象名称.属性

document. 表单名称. 选择对象名称.方法(参数群)

 2.属性

form   该对象所在的表单。

length  代表列表中选项(Option)的数目。

name   该对象的名字(NAME属性)

options  对应HTML语法中的<OPTION>标记。

selectedIndex  代表所选择项目的索引值（选到第一项，返回0）。

3.方法

blur（）    把焦点从该对象上移开。

focus（）   把焦点移到该对象上。

   4.事件

onBlur、onFocus、onClick、onDblClick、onKeyDown、onKeyPress、onKeyUp、onMouseOver、onMouseUp、onMouseOut、onMouseDown、onMouseMove

选项对象

1.建立选项对象的格式

new Option([文字[,值[ , defaultSelected [ , selected ] ] ] ] )

 

其中：“文字”，代表显示在列表中的文字字符串。

        “值”，相当于value属性。也就是选中后，传到服务器上的值。

        “defaultSelected”，指定默认选中该选项。

          “selected”，指定选中该选项。

2.属性

defaultSelected  指定该选项为默认选择状态。

index    所有选项所构成的数组索引值。

length    Select.options数组的元素个数(选项的数目)

selected   判断该选项是否被选中。

text     该选项所显示的文字。

value    选中后，传到服务器上的值。

转载于:https://www.cnblogs.com/Aha-Best/p/10944850.html