DOM の基礎チュートリアル: DOM を使用してフォームを制御する_基礎知識

1. フォームの紹介

フォーム は、Web ページ上で最もインタラクティブなフォームの 1 つであり、ドロップダウン リスト ボックス、チェック ボックス、テキスト ボックスなどのさまざまなフォームを通じてユーザー データを受け取ります。この記事では主にフォームを紹介します。使用された属性とメソッド
効果的な検証のためのフォームデータの取得、フォームフィールドへの値の自動代入、フォームイベントの処理など、JavaScriptでフォームを簡単に操作できます。
このとき、各フォームはオブジェクト、つまりフォーム オブジェクトに解析されます。これらのオブジェクトは document.forms コレクションを通じて参照できます。たとえば、form1 の nama 属性を持つフォームは

を使用できます。

コードをコピー コードは次のとおりです:

document.forms["form1"]

それだけでなく、ドキュメント内のインデックスを通じてフォーム オブジェクトを参照することもできます。たとえば

コードをコピー コードは次のとおりです:

document.forms[1]

は、参照ドキュメント

の 2 番目のフォーム オブジェクトを表します。

以下は複数のフォーム要素を含むフォームです。各要素にはラベル タグがあり、テキストをクリックすることでフォームを設定および選択できるため、ユーザー エクスペリエンスが向上します。

コードをコピーします コードは次のとおりです:

名前を入力してください:

パスワードを入力してください:

好きな色を選択してください:


红
Green
blue
黄
青
purple

性別を選択してください:

男性

何をするのが好きですか:

読書
オンライン
sleep

メッセージを残したい:

通常、各フォーム要素には name 属性と id 属性が必要です。name はサーバーに渡すために使用され、id はバインドと関数のフィルタリングに使用されます。

2.

の形式で要素にアクセスします。

フォーム内の要素は、テキスト ボックス、ラジオ ボタン、ドロップダウン ボタン、ドロップダウン リスト ボックス、その他のコンテンツに関わらず、フォームの要素コレクションに含まれます。要素の位置を使用できます。コレクションまたは要素の name 属性を使用して、この要素への参照を取得します。

コードをコピーします コードは次のとおりです:

var oForm = document.forms["form1"]//フォームを取得します
var otextForm = oForm.elements[0] //最初の要素を取得します
; var otextPasswd = oForm.elements["passwd"] //name属性がpasswdである要素を取得

最も効果的で直感的な方法を使用して引用します:

コードをコピー コードは次のとおりです。

var otextcomments = oForm.elements.comments;コメント要素としての name 属性

3. パブリック プロパティとメソッド

フォーム内のすべての要素 (非表示要素を除く) には、いくつかの共通の属性とメソッドがあります。よく使用されるものをいくつか紹介します

コードをコピーします コードは次のとおりです:

var oForm = document.forms["form1"] //フォームを取得します
var otextcomments = oForm.elements.comments //name 属性が comments である要素を取得します
alert(oForm.type) //要素の種類を表示
var otextPasswd = oForm.elements["passwd"] //name 属性が passwd
である要素を取得します。 otextPasswd.focus() // 特定の要素に焦点を当てる

4. フォームの送信

フォームへの送信は、ボタンまたはボタン機能を備えた画像を通じて完了します

コードをコピーします コードは次のとおりです:

ユーザーが Enter キーを押すか、いずれかのボタンをクリックすると、追加のコードなしでフォームの送信を完了できます。送信するかどうかはフォームのaction属性で確認できます。

コードをコピー コードは次のとおりです:

フォームの送信プロセス中に、ネットワーク速度が遅いためにユーザーが送信ボタンを繰り返しクリックする可能性がありますが、これはサーバーに多大な負担を与えます。この動作は、disabled 属性を使用することで禁止できます。例:

コードをコピー コードは次のとおりです: