JavaScript フォームの基本を理解する_JavaScript のヒント

HTMLFormElement は HTMLElement を継承し、その固有のプロパティとメソッドは次のとおりです。

• acceptCharset: サーバーが処理できる文字セット。HTML
の accept-charset 機能に相当します。
• action: リクエストを受信する URL。HTML のアクション機能に相当します。
• 要素: フォーム内のすべてのコントロールのコレクション (HTMLCollection)
• enctype: 要求されたエンコードタイプ
• 長さ:
形式のコントロールの数
• メソッド: 送信される HTTP リクエストのタイプ。通常は get または post
• name: フォームの名前
• reset(): すべてのフォームフィールドをデフォルト値にリセットします
• submit(): フォームを送信
• ターゲット: リクエストの送信と応答の受信に使用されるウィンドウ名。
  

フォーム要素の参照を取得するには、getElementById を使用することも、document.forms 内の数値インデックスまたは名前値を使用することもできます。

1. フォームを送信します

フォームを送信するには 3 種類のボタンがあります:

<input type="submit" value="Submit Form">
<button type="submint">Submit Form</button>
<input type="image" src="">

上記のメソッドでフォームを送信すると、ブラウザー要求がサーバーに送信される前に送信イベントがトリガーされ、フォーム データが検証され、フォームの送信を許可するかどうかが確認されます。たとえば、次のコードはこれを防ぐことができます。フォームの送信:

var form = document.getElementById("myForm");
form.addEventListener("submit", function () {
  event.preventDefault();
});

さらに、JS スクリプトを通じて submit() メソッドを呼び出してフォームを送信することもできます。submit() を呼び出してフォームを送信しても、submit イベントはトリガーされません。

var form = document.getElementById("myForm");
form.submit();

初めてフォームを送信した後、長時間応答がない場合、ユーザーは焦って送信ボタンを何度もクリックすることが多くなり、フォームの送信を繰り返すことになります。そのため、送信ボタンを無効にする必要があります。または、フォームを初めて送信した後に onsubmit を使用すると、イベントによって以降の操作が妨げられます。

var submitBtn = document.getElementById("submitBtn");
submitBtn.onclick = function () {
  //处理表格和提交等等
  submitBtn.disabled = true;
};

2. フォームをリセットします

リセットフォームには入力またはボタンを使用する必要があります:

<input type="reset" value = "Reset Form">
<button type="reset">Reset Form</button>

ユーザーがリセット ボタンをクリックしてフォームをリセットすると、リセット イベントがトリガーされ、必要に応じてリセット操作をキャンセルできます。

var resetBtn = document.getElementById("resetBtn");
resetBtn.addEventListener("reset", function () {
  event.preventDefault();
});

さらに、js スクリプトを介してreset() メソッドを呼び出してフォームをリセットすることもできます。reset() メソッドを呼び出してフォームをリセットすると、reset イベントがトリガーされます。

var form = document.getElementById("myForm");
form.reset();

3. フォームフィールド

各フォームには、フォーム内のすべてのフォーム (フィールド) のコレクションである elements 属性があります。

var form = document.forms["myForm"];
var list = [];
//取得表单中第一个字段
var firstName = form.elements[0];
list.push(firstName.name);
//取得表单中名为lastName的字段
var lastName = form.elements["lastName"];
list.push(lastName.name);
// 取得表单中包含的字段的数量
var fieldCount = form.elements.length;
list.push(fieldCount);
console.log(list.toString()); //firstName,lastName,4

複数のフォーム コントロールが 1 つの名前 (ラジオ ボタン) を使用する場合、その名前にちなんで名付けられた NodeList が返されます。

<form id="myForm" name="myForm">
  <ul>
    <li><input type="radio" name="color" value="red">red</li>
    <li><input type="radio" name="color" value="yellow">yellow</li>
    <li><input type="radio" name="color" value="blue">blue</li>
  </ul>
  <button type="submint">Submit Form</button>
  <button type="reset">Reset Form</button>
</form>

名前はすべて色です。 elements["color"] にアクセスすると、NodeList が返されます:

var list = [];
var form = document.forms["myForm"];
var radios = form.elements["color"];
console.log(radios.length) //3

フォームフィールドの共通属性

• disabled: 現在のフィールドが無効かどうかを示すブール値
• form: 現在のフィールドが属するフォームへのポインター: 読み取り専用。 name: 現在のフィールドの名前
• readOnly: 現在のフィールドが読み取り専用かどうかを示すブール値。
• tabIndex: 現在のフィールドの切り替え (タブ) 番号を示します。
• type: 現在のフィールドのタイプ
• value: サーバーに送信された現在のフィールドの値。ファイル フィールドの場合、この属性は読み取り専用であり、コンピューター上のファイルのパスが含まれます。
submit イベントを通じてフォームを送信した後に送信ボタンを無効にすることはできますが、ブラウザごとに onclick に「時間差」があるため、onclick イベントは使用できません。
• 共有フォームフィールドメソッド
  

focus():

は、キーボード イベントに応答できるようにフィールドをアクティブ化します。

• blur(): はフォーカスを失い、 はほとんど使用されません。
• リスニング ページのロード イベントに focus() メソッドを追加できます。

  需要注意，第一个表单字段是input，如果其type特性为“hidden”，或者css属性的display和visibility属性隐藏了该字段，就会导致错误。

  在HTML5中，表单中新增加了autofocus属性，自动把焦点移动到相应字段。

  autofocus
  如：

  <input type="text" name="lastName" autofocus>
  

  或者检测是否设置了该属性，没有的话再调用focus()方法：

  window.addEventListener("load", function () {
    var form = document.forms["myForm"];
    if (form["lastName"].autofocus !== true) {
      form["lastName"].focus();
    };
  });
  

  共有的表单字段事件

  除了支持鼠标键盘更改和HTML事件之外，所有的表单字段都支持下列3个事件：

  blur： 当前字段失去焦点时触发；
  change：input元素和textarea元素，在它们失去焦点且value值改变时触发；select元素在其选项改变时触发（不失去焦点也会触发）；
  focus：当前字段获得焦点时触发；
  如：
  

  var form = document.forms["myForm"];
  var firstName = form.elements["firstName"];
  
  firstName.addEventListener("focus", handler);
  firstName.addEventListener("blur", handler);
  firstName.addEventListener("change", handler);
  
  function handler() {
    switch (event.type) {
      case "focus":
        if (firstName.style.backgroundColor !== "red") {
          firstName.style.backgroundColor = "yellow";
  
        };
        break;
      case "blur":
        if (event.target.value.length < 1) {
          firstName.style.backgroundColor = "red";
        } else {
          firstName.style.backgroundColor = "";
        };
        break;
      case "change":
        if (event.target.value.length < 1) {
          firstName.style.backgroundColor = "red";
        } else {
          firstName.style.backgroundColor = "";
        };
        break;
    }
  }
  

  以上就是本文的全部内容，希望对大家的学习有所帮助。