【JavaScript】[HTMLFormElement]フォームの扱い方

  • 投稿日
  • 更新日
  • 著者 tanatiyo
  • カテゴリー JavaScript

以下、自分で調べた作業用メモです。

HTMLFormElementの基本的な例

HTMLFormElementは、HTML文書内のフォーム要素（<form>要素）を表すDOMインターフェースです。このインターフェースは、フォーム要素にアクセスしてそのプロパティやメソッドを利用できるようにします。

以下は、HTMLFormElementの基本的な例です。

<form id="myForm">
  <!-- フォーム内の入力要素など -->
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button type="submit">Submit</button>
</form>

JavaScriptでこれにアクセスするとき、HTMLFormElementを使用してフォーム要素にアクセスできます。

const myForm = document.getElementById('myForm');
console.log(myForm instanceof HTMLFormElement); // true

しかし、Composition APIやTypeScriptを使用する場合、HTML要素に対する型情報が不足していることがあります。HTML要素には様々なプロパティやメソッドが存在し、これを型安全に扱うためには型定義が必要です。

Composition APIの場合、refやreactiveを使用して、フォーム要素の特定のプロパティをラップし、それに対して型を指定することができます。例えば、以下はComposition APIとTypeScriptを使用してフォーム要素を扱う例です。

import { ref, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const myForm = ref<HTMLFormElement | null>(null);

    const handleSubmit = () => {
      if (myForm.value) {
        // フォーム要素にアクセス
        console.log(myForm.value.username.value); // 例: ユーザー名の入力値
        console.log(myForm.value.password.value); // 例: パスワードの入力値
      }
    };

    return {
      myForm,
      handleSubmit,
    };
  },
});

上記の例では、refを使用してmyFormという変数を宣言し、その型をHTMLFormElement | nullとして指定しています。これにより、型安全にフォーム要素にアクセスできます。

型定義を行うことで、IDEが補完をサポートし、開発時に型の不整合を検知できるようになります。

HTMLFormElementのDOMインターフェースが提供されている主な理由

HTML文書において、<form>タグ内にある要素やコントロール（input、buttonなど）は、通常、その<form>要素のプロパティとしてアクセスすることが期待されています。これはHTML仕様に基づいており、HTMLFormElementのDOMインターフェースが提供されている主な理由の一つです。

HTMLFormElementは、フォームに関する様々なプロパティやメソッドを提供するDOMインターフェースであり、フォーム内の要素に対するアクセスや操作を容易にするために存在します。例えば、以下は一部のHTMLFormElementのプロパティです：

  • elements: フォーム内の全てのフォームコントロール（input、button、textareaなど）にアクセスするためのコレクション。
  • length: フォーム内のフォームコントロールの数。
  • submit(): フォームを送信するメソッド。

これらのプロパティやメソッドを使用することで、JavaScriptから簡単にフォーム内の要素にアクセスできます。

例えば、以下はフォーム内の全ての要素を取得する例です：

const myForm = document.getElementById('myForm');
const formElements = myForm.elements;

for (let i = 0; i < formElements.length; i++) {
  console.log(formElements[i].name); // 各要素の名前を出力
}

このように、HTMLFormElementを介してフォーム内の要素にアクセスすることで、フォームの制御やデータの取得が容易になります。HTMLの仕様がこれらの概念を提供していることで、フォームの操作がより効果的に行えるようになっています。

扱いたい要素はname属性で指定

myForm.value.usernameとmyForm.value.passwordの部分は、フォーム内の特定の入力要素にアクセスするためのもので、HTMLフォーム内にname属性が"username"と"password"として設定されたinput要素を仮定しています。

例えば、以下のようなHTMLフォームを考えてみましょう：

<form ref="myForm">
  <input type="text" name="username" />
  <input type="password" name="password" />
  <button @click="handleSubmit">Submit</button>
</form>

この場合、ref="myForm"によってmyFormがフォーム要素を参照しています。そして、handleSubmitメソッド内でmyForm.value.username.valueやmyForm.value.password.valueの部分は、それぞれname属性が"username"と"password"のinput要素にアクセスしています。

要素にアクセスするためには、その要素にref属性が設定されているか、またはdocument.getElementByIdなどを使用して要素を取得する方法があります。上記の例ではVueのrefを使用しています。

この記事を書いた人

tanatiyo

記事一覧