javascript object

1. What is a form object?

Form (

) is a basic element in a Web page. The main function of the form object is to directly access the form on the page. Using form objects, you can interact with users; you can dynamically change the behavior of Web pages without the need for server intervention. For web page forms, it is usually easy to access different forms using the forms array of the document object. For example, a fragment of an HTML file is as follows:

The forms array of the document object has two elements: forms[0 ] gives access to the first form, which has three basic elements: and forms[1] corresponds to form form2, which has only two elements.

In addition to accessing the form object using the forms array, you can also access it directly using the name of the form. For example, in the above example, you can also use document.form1 and document.form2 to access the two forms respectively.

2. Methods of form objects

The submit() method of form objects is used to submit form information. For example, to submit a form named form1 on the page, you can use the following statement:

document.form1.submit();

3. Properties of the form object

Attribute description

Name Name of the form

action Program executed after submitting the form

target

Specify which window (_blank,_parent,_self,_top) or which frame (frame name) the data is displayed in

encoding Default is text/html

method "Get" or " Post”

elements

Array

Read-only, the index of all objects in the form, 0,1,…

You can know how many objects the form has by document.formname.elements.length

Here the elements attribute is a An array whose elements correspond to controls within the form on the page. In addition to elements, several other attributes of the form correspond to the attributes of the

mark in HTML syntax.

4. Examples of using form objects

If you use the form object in the following example, the effect and code are as follows:

<script> <p>function display(){ <p>var str; <p>// 使用表单名称访问表单对象的属性 <p>str="name="+document.form1.name+"\r"; <p>str=str+"action="+document.form1.action+"\r"; <p>str=str+"method="+document.form1.method+"\r"; <p>//访问表单对象的elements数组 <p>str=str+"elements:"+"\r"; <p>for(var i=0;i<document.form1.elements.length;i++){ <p>str=str+ " "+document.form1.elements[i].type <p>+"\t"+document.form1.elements[i].name <p>+"\t"+document.form1.elements[i].value+"\r"; <p>} <p>window.alert(str); <p>return false; <p>} <p>function submitform(){ <p>//使用表单数组+下标访问表单对象 <p>document.forms[0].submit(); <p>} <p></script>

Note: Clicking the "Submit" button will trigger the form. onsubmit event. If the onsubmit event handler returns false, the form data will not be submitted. But if you directly use the submit() method of the form object, the data will be submitted directly.

* Basic elements in forms

Basic controls in forms consist of buttons, radio buttons, check buttons, submit buttons, reset buttons and text boxes. To access these controls in JavaScript, you can use the following two methods:

Form.Element name For example: document.form1.check

Form.elements[subscript] For example: document.form1.elements[2]

Each basic control in the form is introduced below.

1. Text object

The text object corresponds to the text input box control in the page.

Attribute accessKey Sets or returns the shortcut key for accessing the text field.

Use Alt + accessKey to give focus to the element with the specified shortcut key

alt Sets or returns the alternative text that is displayed when the browser does not support text fields.

defaultValue Sets or returns the default value of the text field.

disabled Sets or returns whether the text field should be disabled.

id Sets or returns the id of the text field.

maxLength Sets or returns the maximum number of characters in the text field.

name Sets or returns the name of the text field.

readOnly Sets or returns whether the text field should be read-only.

size Sets or returns the size of the text field.

tabIndex sets or returns the tab key control order of the text field.

type Returns the form element type of the text field.

value 设置或返回文本域的 value 属性的值。  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字，选取文本域中的内容。  

focus() 在文本域上设置焦点。  

主要事件onfocus，onblur，onselect，onchange  

text对象使用示例如下：  

  

  

  

<script> </script>

document.form1.text1.value="this is a javascirpt";  

document.form1.text1.select();  

alert(document.form1.text1.value);  

document.text1.blur();  

  

2、textarea对象  

textarea对象对应于页面中的textarea输入控件。  

默认文本  

属性name textarea输入框控件名称  

value textarea输入框控件中当前的文本  

defaultvalue textarea输入框控件的默认文本  

方法blur( ) 将当前焦点移到后台  

select( ) 加亮文字  

主要事件onfocus，onblur，onselect，onchange  

3、select对象  

select对象对应于网页中的下拉列表框。  

  

选项描述  

选项描述  

…………  

  

属性disabled 设置或返回是否应禁用下拉列表  

id 设置或返回下拉列表的 id。  

length 返回下拉列表中的选项数目。  

multiple 设置或返回是否选择多个项目。  

name 设置或返回下拉列表的名称。  

options  

数组  

返回包含下拉列表中的所有选项(option对象)的一个数组。  

其中option对象包括如下属性：  

text 该选项显示的文字  

value 该选项的value值  

selected 指明该选项是否别选中  

selectedIndex 当前选中项的下标  

size 设置或返回下拉列表中的可见行数。  

方法options.add() 向下拉列表添加一个选项。  

blur() 从下拉列表移开焦点。  

focus() 在下拉列表上设置焦点。  

remove() 从下拉列表中删除一个选项。  

主要事件onfocus，onblur，onchange  

4、button对象  

button对象对应于网页中的按钮控件。  

  

属性accessKey 设置或返回访问按钮的快捷键。  

alt 设置或返回当浏览器无法显示按钮时供显示的替代文本。  

disabled 设置或返回是否禁用按钮。  

id 设置或返回按钮的 id。  

name 设置或返回按钮的名称。  

tabIndex 设置或返回按钮的 tab 键控制次序。  

value 设置或返回在按钮上显示的文本。  

方法blur() 把焦点从元素上移开。  

click() 在该按钮上模拟一次鼠标单击。  

focus() 为该按钮赋予焦点。  

主要事件onclick  

5、checkbox对象  

checkbox对象对应于网页中的复选框。  

选项说明  

属性accessKey 设置或返回访问 checkbox 的快捷键。  

alt 设置或返回不支持 checkbox 时显示的替代文本。  

checked 设置或返回 checkbox 是否应被选中。  

defaultChecked 返回 checked 属性的默认值。  

disabled 设置或返回 checkbox 是否应被禁用。  

id 设置或返回 checkbox 的 id。  

name 设置或返回 checkbox 的名称。  

tabIndex 设置或返回 checkbox 的 tab 键控制次序。  

value 设置或返回 checkbox 的 value 属性的值  

方法blur() 从 checkbox 上移开焦点  

click() simulates a mouse click in the checkbox.

focus() gives focus to checkbox.

Main event onclick

6. Radio object

The radio object corresponds to the radio control in the web page. When there are multiple radio controls with the same name in the web page, an array of

radio objects is formed, in which each radio control is a radio object.

Option Description

Option Description

…………

Attribute accessKey Sets or returns the shortcut key for accessing the radio button.

alt Sets or returns the alternative text displayed when the radio button is not supported.

checked Sets or returns the status of the radio button.

defaultChecked Returns the default state of the radio button.

disabled Sets or returns whether the radio button is disabled.

id Sets or returns the id of the radio button.

name Sets or returns the name of the radio button.

tabIndex sets or returns the tab key control order of radio buttons.

value Sets or returns the value of the radio button’s value attribute.

Method blur() removes focus from radio button.

click() simulates a mouse click on a radio button.

focus() gives focus to the radio button.

Main event onclick

7. hidden object

The hidden object corresponds to the hidden domain in the web page.

Attribute alt Sets or returns the alternative text displayed when hidden input fields are not supported.

id Sets or returns the id of the hidden domain.

name Sets or returns the name of the hidden domain.

value sets or returns the value of the value attribute of the hidden field.

8. Submit object

The submit object corresponds to the submit button in the web page.

Attribute accessKey Sets or returns the shortcut key to access the submit button.

alt Sets or returns the alternative text to be displayed when the browser does not support the submit button.

disabled Sets or returns whether the submit button should be disabled.

id Sets or returns the id of the submit button.

name Sets or returns the name of the submit button.

tabIndex sets or returns the tab key control order of the submit button.

value Sets or returns the text displayed on the submit button.

Method blur() removes focus from the submit button.

click() simulates a mouse click on the submit button.

focus() gives focus to the submit button.

Main event onclick

9. Password object

The password object corresponds to the password input box in the web page.

Attribute accessKey Sets or returns the shortcut key for accessing the password field.

alt Sets or returns the alternative text displayed when the password field is not supported.

defaultValue Sets or returns the default value of the password field.

disabled Sets or returns whether the password field should be disabled.

id Sets or returns the id of the password field.

maxLength Sets or returns the maximum number of characters in the password field.

name Sets or returns the name of the password field.

readOnly Sets or returns whether the password field should be read-only.

size Sets or returns the length of the password field.

tabIndex sets or returns the tab key control order of the password field.

value Sets or returns the value of the value attribute of the password field.

Method blur() Removes focus from the password field.

click() gives focus to the password field.

focus() Select the text in the password field.

Main events onfocus, onblur, onselect, onchange

*History object

The History object contains the URLs visited by the user (in the browser window).

The History object is part of the window object and can be accessed through the window.history property.

History Object Properties

Property Description

length returns the number of URLs in the browser history list.

History Object Method

Method Description

back() Loads the previous URL in the history list.

forward() loads the next URL in the history list.

go(number|URL) loads a specific page in the history list.

-1 means the previous page