JavaScript DOM学習 第5章 Forms入門_基礎知識

各フォームの検出項目が異なるため、汎用コードを与えることはできません。この章で紹介した要素を使用して独自の検出関数を構築する必要があります。次のページに例を示しますので、ご参照ください。

この章では、まず JavaScript を使用してフォームを検出する場合の制限について説明し、次に送信時ハンドラーについて説明し、次にフォーム自体のメソッドとプロパティについて説明します。最後はフォーム要素にアクセスする方法です。

フォーム使用時のエラーと解決策を紹介する Jeff Howden による記事もこちらにあります。 フォームと JavaScript の調和
制限事項
まず、ユーザーがフォームを送信したときに JavaScript 検出コードが何を行うかを理解する必要があります。
1 , JavaScript がフォームを検出すると、次のようになります。コードにエラーが見つかった場合、送信は一時停止され、ユーザーには正しいデータを入力するよう警告が表示されます。
2. エラーがない場合、または JavaScript がオフになっている場合、フォームのコンテンツはサーバーに送信されます。
3. サーバー側スクリプトがエラーを検出すると、エラー情報が返されます。この場合、ユーザーは再度送信する前にフォームに戻ってデータを入力する必要があります。
4. エラーが発生しない場合、サーバーは必要な作業を完了し、感謝のメッセージを表示します。
ご覧のとおり、データは送信プロセス中に 2 回チェックされます。1 回目は JavaScript によって、もう 1 回目はサーバーによってチェックされます。サーバー側の検出は常に可能であり、信頼性が高くなります。 JavaScript の検出は、ユーザーが JavaScript 機能をオンにした場合にのみ役立ちます。サーバーは常に信頼性が高く、ユーザーが使用するブラウザとは関係がないのに、なぜ JavaScript の検出が必要なのでしょうか。
JavaScript 検出は、サーバーに送信される前にデータを検出できるため、サーバー側の検出を効果的に補完します。これにより、ユーザは、戻るボタンを使用してフォームの内容を戻って修正する必要がなくなり、また、間違った内容を見つけるのも非常に面倒になります。したがって、JavaScript の検出は、サーバー側の検出よりもユーザー エクスペリエンスに役立ちます。
つまり、JavaScript は完全な検出メカニズムではありませんが、サーバー側の補足と使いやすさとしては依然として良い選択です。したがって、ユーザー エクスペリエンスの要件を満たすだけでなく、プログラムのセキュリティも確保できる、これら 2 つの検出メカニズムを使用することをお勧めします。
onsubmit
JavaScript を使用してフォームを検出する場合、最初に行う必要があるのは、onsubmit のイベント ハンドラーを作成することです。このプログラムは、ユーザーがフォームを送信すると実行されます。このプログラムは、特定のフィールドに値が入力されているかどうか、それらのチェックボックスの少なくとも 1 つが選択されているかどうか、またはその他チェックする必要があるものをチェックします。
コードは次のとおりです:

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

checkscript() は、このプログラムの名前です。このコードは true または false を返す必要があります。 false が返された場合、フォームは送信されず、true または false が返されたかどうかに関係なく、コードの実行が停止します。
生成されたコードは次のとおりです:

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

function checkscript( ) {
if (値が何かである/何かではない) {
// 何かが間違っています
alter('問題のユーザーに警告')
return false; 🎜>}
else（別の値は何かではない）{
ここでは、すべてが大丈夫です🎜>}


もちろん、多数のフォーム項目または多数のラジオ ボタン ボックスを検出する必要がある場合、このコードは非常に複雑に記述することができます。基本的な考え方は次のとおりです。フォーム内のチェックが必要なすべての要素を繰り返し処理し、エラーが見つかった場合は false を返し、コードの実行が停止し、フォームは送信されません。
エラーを見つけた場合は、ユーザーに警告する必要があります。アラート ボックスを使用することもできますが、現在のほとんどの方法では、エラー メッセージを生成し、それをエラー エントリに追加します。
最後にのみ、すべての要素をチェックしてエラーが見つからなかった場合は true を返し、フォームが送信されます。
フォームのメソッドとプロパティ
JavaScript には、フォームを処理するためのいくつかの組み込みメソッドとプロパティもあります。そのうち 3 つはより重要です:
submit() メソッドを使用してフォームを送信できます。ページ上の最初のフォームを送信するには、次のように記述します:

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

document.forms[ 0].submit()
ユーザーが JavaScript を使用してフォームを送信すると、フォームのイベント ハンドラーが機能しないことに注意してください。
フォームをリセットするには、次のことができます:
[code] document.forms[0].reset()
テストせずに、このメソッドを使用すると、フォームのイベント ハンドラーがリセットされると仮定します。実行されません。
最後に、フォームの ACTION 項目を変更できます:
[code] document.forms[0].action = 'the_other_script.pl';
これは、フォームを他のユーザーに送信する必要がある場合に使用されます。この方法は非常に便利です。
フォーム要素へのアクセス
フォーム有効性検出では、ユーザーが入力した内容を知るためにフォーム要素へのアクセスが必要です。したがって、最初にレベル 0 DOM に基づいてフォームにアクセスする必要があります。一般的には次のように記述されます:
[code] document.forms[number].elements[number]
ページが読み込まれると、JavaScript はページ上のすべてのフォームを保存するためのフォーム配列を生成します。したがって、最初のフォームは Forms[0]、2 番目のフォームは Forms[1] というようになります。
JavaScript は、フォーム内の各要素も配列に保存します。最初の要素は elements[0] で、2 番目の要素は elements[1] です。すべての input、select、および textarea は 1 つの要素です。
場合によっては、フォームと要素の名前を使用した方がよい場合があります。 HTML では、次のような各要素に名前を付ける必要があります。
[code] 3 5
[code] document.personal.name 2 document.personal.address 3 document.personal.city
name を使用する利点は、ページ上のすべての要素の順序を乱すことができることです。コードは引き続き実行できますが、配列が使用されている場合は実行できません。たとえば、上の例では都市入力ボックスは document.forms[0].elements[2] ですが、最初に入力すると document.forms[0].element[0] になります。コードを変更します。
値の検出
もちろん、最も重要なことは、ユーザーが入力した値、または選択したチェック ボックスを検出することです。場合によっては、フォームに他の情報も入力したいことがあります。
次の小さなコード スニペットは、フォーム内の要素にアクセスするのに役立ちます。これは、ユーザー入力を user_input 変数に保存するだけです。その後、有効性を確認できます。
テキスト、テキストエリア、隠しフィールド
は非常に単純です:
[code] user_input = document.forms[0].text.value

ここで、text はテキスト ボックス、テキストエリア、または非表示です。フィールド名。 value 属性はこれらの要素のテキストを与え、user_input に保存されます。
直接書くこともできます:

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

ドキュメント。 forms[0].text.value = '新しい値';

ボックスを選択
これも非常に簡単です:

🎜> コードは次のとおりです: user_input = document.forms[0].select.value;

選択した項目を変更するには、selectedIndex を変更する必要があります。例:

コードをコピー コードは次のとおりです: document.forms[0].select .selectedIndex = 2;
3 番目のオプションが選択されました。
古いブラウザ
古いブラウザでは、選択ボックスに value 属性がありません。

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

var selectBox = document.forms[0].select;
user_input = selectBox.options[selectBox.selectedIndex].value

最初に検索 ユーザーが選択した項目が表示されます。 document.forms[0].select.selectedIndex は、選択された項目の番号を示します。 JavaScript は、すべての選択ボックスを含むオプション配列を作成しました。したがって、この配列を通じてユーザーが何を選択したかを知ることができ、それを user_input に保存できます。
チェックボックス
チェックボックスは少し異なります。その値はすでにわかっていますが、ユーザーがそれを選択したかどうかを知る必要があります。チェックされた属性がそれを教えてくれます。 true と false の 2 つの値があります。
次に:

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

if (document .forms[0 ].checkbox.checked) {
user_input = document.forms[0].checkbox.name
}

checkbox はチェックボックスの名前です。チェックボックスが選択されている場合、名前 (またはオプションで値) を取得し、それを user_input に渡します。
チェックボックスを選択すると、次のことができます:

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

document.forms[ 0 ].checkbox.checked = true

ラジオ ボックス
残念ながら、どのラジオ ボックスがチェックされているかを一度に確認することはできません。トラバース後には、checked 属性が true であるアイテムのみを見つけることができます。

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

for (i=0;iif (document.forms[0].radios[i].checked) {
user_input = document.forms[0].radios[i]. value;
}
}

radios は、このラジオ ボタンのグループの名前です。
document.forms[0].radios はすべてのラジオ ボタン ボックスを含む配列であり、ループによって、checked 属性が true かどうかがチェックされることに注意してください。その場合は、user_input を渡します。
document.forms[0].radios.length は、すべてのラジオ ボタン ボックスの数を返します。
ラジオ ボタンが選択されている場合、チェックされた値を true に設定できます:

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

document.forms[0].radios[i].checked = true;

翻訳アドレス: http://www.quirksmode.org/js/forms.html
転載 以下の情報をお守りください
著者: Beiyu (tw:@rehawk)