JavaScriptオブジェクト

1. フォーム オブジェクトとは何ですか?

フォーム (

) は Web ページの基本要素です。フォーム オブジェクトの主な機能は、ページ上のフォームに直接アクセスすることです。フォーム オブジェクトを使用すると、サーバーの介入を必要とせずにユーザーと対話し、Web ページの動作を動的に変更できます。 Web ページのフォームの場合、通常、ドキュメント オブジェクトのフォーム配列を使用してさまざまなフォームに簡単にアクセスできます。たとえば、HTML ファイルのフラグメントは次のとおりです。

ドキュメント オブジェクトの Forms 配列には 2 つの要素があります。forms[0 ] は、3 つの基本要素を持つ最初のフォームにアクセスします。および Forms[1 ] は、要素が 2 つだけあるフォーム form2 に対応します。

forms 配列を使用してフォーム オブジェクトにアクセスするだけでなく、フォームの名前を使用して直接アクセスすることもできます。たとえば、上の例では、document.form1 と document.form2 を使用して 2 つのフォームにそれぞれアクセスすることもできます。

2. フォームオブジェクトのメソッド

フォームオブジェクトの submit() メソッドは、フォーム情報を送信するために使用されます。たとえば、ページ上で form1 という名前のフォームを送信するには、次のステートメントを使用できます:

document.form1.submit();

3. フォーム オブジェクトのプロパティ

属性の説明

フォームの名前

アクション フォーム送信後に実行されるプログラム

ターゲット

どのウィンドウ(_blank,_parent,_self,_top)またはどのフレーム(フレーム名)にデータを表示するかを指定

エンコーディング デフォルトはtext/html

メソッド " Get" または " Post"

要素

配列

読み取り専用、フォーム内のすべてのオブジェクトのインデックス、0,1,…

document.formname.elements によってフォームにオブジェクトがいくつあるかを知ることができます。 length

ここで、Elements 属性は、ページ上のフォーム内のコントロールに要素が対応する配列です。要素に加えて、フォームの他のいくつかの属性は、HTML 構文の

マークの属性に対応します。

4. フォーム オブジェクトの使用例

次の例でフォーム オブジェクトを使用する場合、効果とコードは次のとおりです。

<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>

注: [送信] ボタンをクリックすると、フォーム送信時。イベント。 onsubmit イベント ハンドラーが false を返した場合、フォーム データは送信されません。ただし、フォーム オブジェクトの submit() メソッドを直接使用すると、データは直接送信されます。

* フォームの基本要素

フォームの基本コントロールは、ボタン、ラジオ ボタン、チェック ボタン、送信ボタン、リセット ボタン、テキスト ボックスで構成されます。 JavaScript でこれらのコントロールにアクセスするには、次の 2 つのメソッドを使用できます:

Form.Element name 例: document.form1.check

Form.elements[subscript] 例: document.form1.elements[2]

フォーム内の基本的な各コントロールを以下に紹介します。

1. Text オブジェクト

Text オブジェクトは、ページ内のテキスト入力ボックス コントロールに対応します。

属性 accessKey テキストフィールドにアクセスするためのショートカットキーを設定または返します。

Alt + accessKey を使用して、指定したショートカット キーを持つ要素にフォーカスを移動します。

alt ブラウザーがテキスト フィールドをサポートしていない場合に表示される代替テキストを設定または返します。

defaultValue テキストフィールドのデフォルト値を設定または返します。

disabled テキストフィールドを無効にするかどうかを設定または返します。

id テキストフィールドのIDを設定または返します。

maxLength テキストフィールドの最大文字数を設定または返します。

name テキストフィールドの名前を設定または返します。

readOnly テキストフィールドを読み取り専用にするかどうかを設定または返します。

size テキストフィールドのサイズを設定または返します。

tabIndex は、テキストフィールドのタブキー制御順序を設定または返します。

type テキストフィールドのフォーム要素のタイプを返します。

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() は、チェックボックス内のマウスクリックをシミュレートします。

focus() はチェックボックスにフォーカスを与えます。

メインイベント onclick

6. Radio オブジェクト

Radio オブジェクトは、Web ページのラジオ コントロールに対応します。 Web ページ内に同じ名前の複数のラジオ コントロールがある場合、各ラジオ コントロールがラジオ オブジェクトとなる

ラジオ オブジェクトの配列が形成されます。

オプションの説明

オプションの説明

…………

属性 accessKey ラジオボタンにアクセスするためのショートカット キーを設定または返します。

alt ラジオボタンがサポートされていない場合に表示される代替テキストを設定または返します。

checked ラジオボタンのステータスを設定または返します。

defaultChecked ラジオ ボタンのデフォルトの状態を返します。

disabled ラジオボタンが無効かどうかを設定または返します。

id ラジオボタンの ID を設定または返します。

name ラジオボタンの名前を設定または返します。

tabIndex は、ラジオ ボタンのタブ キー制御順序を設定または返します。

value ラジオボタンの value 属性の値を設定または返します。

メソッドblur()はラジオボタンからフォーカスを削除します。

click() は、ラジオ ボタンのマウス クリックをシミュレートします。

focus() はラジオボタンにフォーカスを与えます。

メインイベント onclick

7. 隠しオブジェクト

隠しオブジェクトは、Web ページの隠しドメインに対応します。

属性 alt 非表示の入力フィールドがサポートされていない場合に表示される代替テキストを設定または返します。

id 非表示ドメインの ID を設定または返します。

name 非表示ドメインの名前を設定または返します。

value は、隠しフィールドの value 属性の値を設定または返します。

8. Submit オブジェクト

submit オブジェクトは、Web ページの送信ボタンに対応します。

属性 accessKey 送信ボタンにアクセスするためのショートカット キーを設定または返します。

alt ブラウザが送信ボタンをサポートしていない場合に表示される代替テキストを設定または返します。

disabled 送信ボタンを無効にするかどうかを設定または返します。

id 送信ボタンの ID を設定または返します。

name 送信ボタンの名前を設定または返します。

tabIndex は、送信ボタンのタブキー制御順序を設定または返します。

value 送信ボタンに表示されるテキストを設定または返します。

メソッドblur()は、送信ボタンからフォーカスを削除します。

click() は、送信ボタンのマウスクリックをシミュレートします。

focus() は送信ボタンにフォーカスを与えます。

メインイベント onclick

9. パスワード オブジェクト

パスワード オブジェクトは、Web ページのパスワード入力ボックスに対応します。

属性 accessKey パスワードフィールドにアクセスするためのショートカットキーを設定または返します。

alt パスワードフィールドがサポートされていない場合に表示される代替テキストを設定または返します。

defaultValue パスワードフィールドのデフォルト値を設定または返します。

disabled パスワードフィールドを無効にするかどうかを設定または返します。

id パスワードフィールドの ID を設定または返します。

maxLength パスワードフィールドの最大文字数を設定または返します。

name パスワードフィールドの名前を設定または返します。

readOnly パスワードフィールドを読み取り専用にするかどうかを設定または返します。

size パスワードフィールドの長さを設定または返します。

tabIndex は、パスワード フィールドのタブ キー制御順序を設定または返します。

value パスワードフィールドの value 属性の値を設定または返します。

メソッド Blur() パスワードフィールドからフォーカスを削除します。

click() はパスワードフィールドにフォーカスを与えます。

focus() パスワードフィールドのテキストを選択します。

主なイベント onfocus、onblur、onselect、onchange

*History オブジェクト

History オブジェクトには、ユーザーが (ブラウザ ウィンドウで) 訪問した URL が含まれます。

History オブジェクトは window オブジェクトの一部であり、window.history プロパティを通じてアクセスできます。

履歴オブジェクトのプロパティ

プロパティの説明

length は、ブラウザ履歴リスト内の URL の数を返します。

History オブジェクトのメソッド

メソッドの説明

back() 履歴リスト内の前の URL を読み込みます。

forward() は、履歴リストの次の URL を読み込みます。

go(number|URL) は、履歴リスト内の特定のページを読み込みます。

-1 は前のページを意味します