1。フォームの紹介
フォーム<form>は、Webページで最もインタラクティブなフォームの1つです。ドロップダウンリストボックス、ラジオボタン、チェックボックス、テキストボックスなど、さまざまな形式でユーザーデータを受信します。この記事では、主に一般的に使用されるプロパティとメソッドをフォームで紹介します。
JavaScriptは、効果的な検証のためのフォームデータを取得する、フィールドを自動的に割り当ててフィールドを自動的に割り当て、フォームイベントを処理するなど、フォームを操作するのに非常に便利です。
この時点で、各フォームはオブジェクト、つまりフォームオブジェクトに解析されます。これらのオブジェクトは、document.formsコレクションを介して参照できます。たとえば、form1のnama属性を持つフォームを使用できます
次のようにコードをコピーします：document.forms ["form1"]
それだけでなく、ドキュメント内のフォームのインデックスを介してフォームオブジェクトを参照することもできます。例えば
次のようにコードをコピーします：document.forms [1]
参照ドキュメントの2番目のフォームオブジェクトを表します
以下は、複数のフォーム要素を含むフォーム要素で、各要素には要素にバインドされたラベルタグがあるため、テキストをクリックすると、それを設定してテーブルに選択して、ユーザーエクスペリエンスを改善できます。
コードコピーは次のとおりです。
<form method = "post" name = "myform1" action = "addinfo.aspx">
<p> <label for = "name">名前を入力してください：</label> <br> <入力型= "text" name = "name" id = "name"> </p>
<p> <label for = "passwd">パスワードを入力してください：</label> <br> <入力型= "password" name = "passwd" id = "passwd"> </p>
<p> <ラベル= "color">お気に入りの色を選択してください：</label> <br>
<name = "color" id = "color">を選択します
<オプション値= "red"> red </option>
<オプション値= "green"> green </option>
<オプション値= "blue"> blue </option>
<オプション値= "Yellow"> Yellow </option>
<オプション値= "cyan"> qing </option>
<オプション値= "purple"> purple </option>
</select> </p>
<p>性別を選択してください：<br>
<入力タイプ= "Radio" name = "sex" id = "MALE" value = "MALE"> <ラベル= "MALE">男性</label> <br>
<入力タイプ= "Radio" name = "sex" id = "female" value = "female"> <label for = "女性">女性</label> </p>
<p>何をしたいですか：<br>
<入力タイプ= "チェックボックス" name = "bobby" id = "book" value = "book"> <label = "book"> reading </label>
<入力タイプ= "チェックボックス" name = "bobby" id = "net" value = "net"> <label for = "net">インターネット</label>
<入力タイプ= "チェックボックス" name = "趣味" id = "sleep" value = "sleep"> <label = "sleep"> sleep </label> </p>
<p> <label for = "comments">メッセージを残したい：</label> <br> <textarea name = "comments" comments "cols =" 30 "rows =" 4 "> </textarea> </p>
<p> <入力タイプ= "submit" name = "btnsubmit" id = "btnsubmit" value = "submit">
<入力型= "reset" name = "btnreset" id = "btnreset" value = "reset"> </p>
</form>
通常、各フォーム要素には名前とID属性が必要であり、名前はサーバーに引き渡すために使用され、IDはバインディングと関数フィルタリングに使用されます。
2。フォームの要素にアクセスします
テキストボックス、ラジオボタン、ドロップダウンボタン、ドロップダウンリストボックス、またはその他のコンテンツなど、フォームの要素は、フォームエレメントコレクションに含まれています。コレクション内の要素の位置または要素の名前属性を使用して、要素への参照を取得できます。
コードコピーは次のとおりです。
var oform = document.forms ["form1"] // formを取得します
var etextform = oform.elements [0]; //最初の要素を取得します
var etextpasswd = oform.elements ["passwd"] //名前属性passwdで要素を取得する
最も効果的で直感的な方法を引用してください：
コードを次のようにコピーします：var ethtcomments = oform.elements.comments; //名前属性のコメントで要素を取得します
3。パブリックプロパティと方法
形式のすべての要素（非表示要素を除く）には、いくつかの共通の特性と方法があります。一般的に使用されるリストを次に示します
コードコピーは次のとおりです。
var oform = document.forms ["form1"]; //フォームを取得します
var imagestcomments = oform.elements.comments; //名前属性のコメントで要素を取得します
アラート（oform.type）; //要素タイプを表示します
var etextpasswd = oform.elements ["passwd"]; //名前属性passwdで要素を取得します
foxtpasswd.focus（）; //特定の要素に焦点を当てます
4。フォームの提出
フォームの提出は、ボタン機能を備えたボタンまたは写真を介して完成します
コードコピーは次のとおりです。
<入力型= "submit" name = "btnsubmit" id = "btnsubmit" value = "submit">
<入力型= "image" name = "picsubmit" id = "picssubmit" src = "submit.jpg">
ユーザーがボタンの1つの入力またはクリックを押すと、追加のコードなしでフォームを送信できます。フォームのアクション属性を使用して、送信するかどうかを検出できます。
コードコードを次のようにコピーします
ネットワークの速度が遅すぎるため、ユーザーは送信プロセス中に送信ボタンを繰り返しクリックする場合があります。これはサーバーの大きな負担であり、無効な属性を使用することで禁止できます。例えば：
次のようにコードをコピーします