JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでフォームの名前（name）とターゲット（target）を取得する方法

HTMLフォームには通常、名前（name）とターゲット（target）が設定されています。特にフォームのバリデーション（入力値チェック）を行う場合、名前が設定されていないと処理が非常に難しくなります。JavaScriptでは、フォーム要素のnameプロパティとtargetプロパティを使うことで、これらの値をそれぞれ簡単に取得できます。以下では、それぞれの取得方法を詳しく解説します。

フォームの名前（name）を取得する

サンプルコード

次の例では、document.getElementById()で取得したフォーム要素に対してnameプロパティを参照し、フォームの名前を取得しています。この名前は、フォームのバリデーション処理などに活用できます。

<html>
<body>
   <form id="form1" name="form" action="/action_page.php"></form>
<p id="name"></p>
<script>
   var nm = document.getElementById("form1").name;
   document.getElementById("name").innerHTML = nm;
</script>
</body>
</html>

実行結果

form

このように、フォームに設定されたname="form"の値がそのまま画面に出力されます。

フォームのターゲット（target）を取得する

サンプルコード

次の例では、同じくフォーム要素のtargetプロパティを参照して、フォームのターゲットを取得しています。target属性は、フォーム送信後の結果をどこに表示するかを指定するためのものです。

<html>
<body>
   <form id="form1" target="_self" action="/action_page.php"></form>
<p id="target"></p>
<script>
   var tar = document.getElementById("form1").target;
   document.getElementById("target").innerHTML = tar;
</script>
</body>
</html>

実行結果

_self

補足：target属性に指定できる主な値

  • _self：現在のフレーム（ウィンドウ）に表示（デフォルト値）
  • _blank：新しいウィンドウまたはタブに表示
  • _parent：親フレームに表示
  • _top：フレームを解除して全体ウィンドウに表示

なお、nameやtargetはHTMLFormElementの標準プロパティなので、querySelector()やformsコレクションで取得したフォーム要素に対しても同様にアクセス可能です。用途に応じて使い分けるとよいでしょう。

  1. JavaScriptでフォームのaction属性とmethod属性を取得する方法

    ```html HTMLフォームにおけるaction属性とmethod属性は、フォームに自動的に組み込まれるものではなく、開発者が明示的に指定する必要があります。JavaScriptでは、form.actionとform.methodというプロパティを使用することで、フォームのaction属性とmethod属性の値をそれぞれ簡単に取得できます。まず基本をおさらいしましょう。・action属性：フォーム送信時のデータの送信先URLを指定します。・method属性：データの送信方式（GETまたはPOST）を指定します。それでは、それぞれの具体的な取得方法を見ていきましょう。Action属性の取得方

  2. JavaScriptでフォームのaccept-charset属性とenctype属性を取得する方法

    JavaScriptでは、フォームのaccept-charset属性およびenctype属性の値を取得するために、それぞれ専用のDOMプロパティacceptCharsetとenctypeが用意されています。ここでは、それぞれの使い方について順番に解説していきます。 accept-charset属性の取得方法 accept-charset属性は、フォーム送信時にサーバー側が受け入れる文字エンコーディングを指定するための属性です。フォーム要素のacceptCharsetプロパティにアクセスすることで、設定されている値を簡単に取得できます。 サンプルコード 次の例では、フォームにあらかじめaccep