以下のエディターは、JavaScript ベースのフォーム スクリプトを提供します (詳細な説明)。編集者はこれがとても良いと思ったので、参考として共有します。編集者をフォローして一緒に見てみましょう
フォームとは？
フォームには 3 つの基本コンポーネントがあります: フォーム タグ: これには、フォーム データの処理に使用される CGI プログラムの URL と、データをサーバーに送信するためのメソッドが含まれます。 フォームフィールド: テキストボックス、パスワードボックス、隠しフィールド、複数行テキストボックス、チェックボックス、ラジオボタンボックス、ドロップダウン選択ボックス、ファイルアップロードボックスなどが含まれます。 フォーム ボタン: 送信ボタン、リセット ボタン、および一般ボタンが含まれます。フォーム ボタンは、サーバー上の CGI スクリプトにデータを転送したり、入力をキャンセルしたりするために使用することもできます。
JavaScript とフォームの関係: JS の最初の適用は、フォーム処理の責任をサーバーと共有し、サーバーへの依存を解消することでした。Web と JavaScript は大きく進歩しましたが、Web フォームはまだ用途に使用されていません。多くの一般的なタスクを提供するため、多くの開発者はフォームを検証するときに JavaScript を使用するだけでなく、一部の標準フォーム コントロールのデフォルトの動作を強化することもできます。
1.フォームの基礎知識
HTMLではフォームはformタグで構成されており、HTMLFormElement型はHTMLElement型を継承するため、デフォルトは同じです。他の Element 要素と同様の属性があり、独自のプロパティとメソッドもあります。
acceptCharset: HTML の accept-charset 機能に相当する文字セット。
action: リクエストされた URL を受け入れます。HTML の action 属性に相当します。
要素: フォーム内のすべてのコントロールのコレクション (HTMLCollection)。
enctype: 要求されたエンコーディング タイプ。HTML の enctype 機能に相当します。
length: フォーム内のコントロールの数。
method: 送信される HTTP リクエストのタイプ。通常は、HTML のメソッド属性に相当する「get」または「post」です。
name: フォームの名前。HTML の name 属性に相当します。
reset(): すべてのフォームフィールドをデフォルト値にリセットします。
submit(): フォームを送信します。
target: HTML の target 属性に相当する、リクエストの送信と応答の受信に使用されるウィンドウの名前。
フォーム要素を取得するメソッドは次のとおりです: var form=document.getElementById('form1'); //id によってフォーム要素を取得します
var firstForm=document.forms[0]; //document.forms を使用します。ページ内のフォーム要素、インデックス値 '0' を通じて最初のフォーム要素を取得します
var form2=document.forms['form2']; // document.forms を通じてページ内のすべてのフォーム要素を取得します、特定のフォーム要素を取得しますform 要素を名前、値で指定します。
フォームを送信します:
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif"> ログイン後にコピー
この方法でフォームを送信すると、ブラウザーはリクエストをサーバーに送信する前に submit イベントをトリガーします。これにより、フォーム データを検証し、それを使用してフォームの送信を許可するかどうかを決定する機会が得られます。このイベントのデフォルトの動作をブロックすると、フォームの送信をキャンセルできます
JS では、プログラムで submit() メソッドを呼び出してフォームを送信することもできます:
var form = document.getElementById("myForm");
//提交表单
form.submit(); ログイン後にコピー
フォームの送信をブロックする (デフォルトのイベントをブロックする):
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
}); ログイン後にコピー
フォームデータが無効でサーバーに送信できない場合にこの手法を使用できます
フォームをリセットします:
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button> ログイン後にコピー
フォームをリセットすると、すべてのフォームフィールドが元の値に復元されますページがロードされたばかりのときの値
JS メソッドを使用してフォームをリセットします:
var form = document.getElementById("myForm");
//重置表单
form.reset(); ログイン後にコピー
フォームのリセットを防ぐデフォルトのアクション:
var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止表单重置
EventUtil.preventDefault(event);
}); ログイン後にコピー
フォームフィールド:
各フォームには Element 属性があります。これは、フォーム内のすべてのプロパティです。フォーム要素 (フィールド) のコレクションです。このコレクションは順序付きリストであり、要素コレクション内での各フォーム フィールドの出現順序は、位置と名前の値によってアクセスできます。共通のフォーム フィールドには、input、select、および fieldset が含まれます。 フォーム内のフォーム フィールドを取得するには:
var form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length; ログイン後にコピー
共通のフォーム フィールド属性:
disabled: 現在のフィールドが無効かどうかを示すブール値。
form: 現在のフィールドが読み取り専用で属するフォームへのポインター。
name: 現在のフィールドの名前。
readOnly: 現在のフィールドが読み取り専用かどうかを示すブール値。
tabIndex: 現在のフィールドの切り替え (タブ) 番号を示します。
type: 現在のフィールドのタイプ (「チェックボックス」、「ラジオ」など)。
value: サーバーに送信される現在のフィールドの値。ファイル フィールドの場合、この属性は読み取り専用であり、form 属性を除く他の属性は JavaScript を通じて動的に変更できます。
フォームフィールドの属性を動的に変更できるということは、いつでも、どのような方法でもフォームを動的に操作できることを意味します。
用户可能会重复单击表单的提交按钮。在涉及信用卡消费时，这就是个问题：因为会导致费用翻番。
为此，最常见的解决方案，就是在第一次单击后就禁用提交按钮。只要侦听 submit 事件，并在该事件发生时禁用提交按钮即可 ：
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
}); ログイン後にコピー
除了
之外，所有表单字段都有 type 属性。对于
共有的表单字段方法 ：
每个表单字段都有两个方法： focus()和 blur()。使用 focus()方法，可以将用户的注意力吸引到页面中的某个部位。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。
EventUtil.addHandler(window, "load", function(event){ /*给window绑定一个监听事件，放页面加载完成，光标自动对准在指定的表单字段*/
document.forms[0].elements[0].focus();
}); ログイン後にコピー
HTML5 为表单字段新增了一个 autofocus 属性。在支持这个属性的浏览器中，只要设置这个属性，不用 JavaScript 就能自动把焦点移动到相应字段。
例如：
与 focus()方法相对的是 blur()方法，它的作用是从元素中移走焦点:
document.forms[0].elements[0].blur();
change事件：对于
