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

HTML DOM フォームの name プロパティの使い方を徹底解説

HTML DOM のフォーム（Form）オブジェクトが持つ name プロパティは、form 要素の name 属性と連動しています。このプロパティを使うことで、フォームの名前（name 属性の値）を取得したり、新しい値を設定したりすることができます。つまり、JavaScript から動的にフォームに名前を付けたり、既存の名前を変更したりできるのです。

構文

name プロパティの基本的な使い方は以下の通りです。

フォーム名を設定する場合

formObject.name = name

ここで指定する name には、フォームに付けたい名前を文字列で記述します。

サンプルコード

それでは、Form の name プロパティを使った具体的な例を見てみましょう。ボタンをクリックすると、フォームの名前が「FORM_1」から「FORM_2」に変更されるデモです。

<!DOCTYPE html>
<html>
<head>
<style>
    form {
        border:2px solid blue;
        margin:2px;
        padding:4px;
    }
</style>
<script>
    function ChangeName() {
        document.getElementById("FORM1").name="FORM_2";
        document.getElementById("Sample").innerHTML = "フォーム名は FORM_1 から FORM_2 に変更されました";
    }
</script>
</head>
<body>
<h1>Form name プロパティの例</h1>
<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>年齢 <input type="text" name="Age"></label> <br><br>
<input type="submit" value="送信">
</form>
<p>下のボタンをクリックすると、上のフォームの名前が変わります</p>
<button onclick="ChangeName()">名前を変更</button>
<p id="Sample"></p>
</body>
</html>

実行結果

このコードを実行すると、青い枠線で囲まれたフォームと「名前を変更」ボタンが表示されます。

HTML DOM フォームの name プロパティの使い方を徹底解説

「名前を変更」ボタンをクリックすると、次のようにフォーム名の変更結果が画面に表示されます。

HTML DOM フォームの name プロパティの使い方を徹底解説

コードの解説

それでは、上記のサンプルコードがどのように動作しているのか、順を追って説明します。

1. フォームの作成

まず、id="FORM1"、method="post"、action="/sample_page.php" を持ち、name 属性の値が「FORM_1」に設定されたフォームを作成しています。このフォームには、テキスト入力フィールドが2つと、データをサーバーへ送信するための送信ボタンが含まれています。

<form id="FORM1" method="post" action="/sample_page.php" name="FORM_1">
<label>ユーザー名 <input type="text" name="usrN"></label> <br><br>
<label>年齢 <input type="text" name="Age"></label> <br><br>
<input type="submit" value="送信">
</form>

2. ボタンの設置

次に、「名前を変更」というボタンを作成しています。ユーザーがこのボタンをクリックすると、ChangeName() 関数が実行される仕組みです。

<button onclick="ChangeName()">名前を変更</button>

3. ChangeName() 関数の処理内容

ChangeName() 関数では、document オブジェクトの getElementById() メソッドを使って form 要素を取得し、その name 属性の値を「FORM_2」に書き換えています。さらに、id が「Sample」の段落要素に対して innerHTML プロパティを使うことで、変更が完了したことを示すメッセージを画面に表示しています。

function ChangeName() {
    document.getElementById("FORM1").name="FORM_2";
    document.getElementById("Sample").innerHTML = "フォーム名は FORM_1 から FORM_2 に変更されました";
}

まとめ

HTML DOM の Form name プロパティを活用すれば、JavaScript からフォームの name 属性値を自由に読み書きできます。フォームを識別する必要がある場面や、動的にフォームの属性を操作したい場合に役立つので、ぜひ覚えておきましょう。

  1. HTML DOMのnameプロパティとは？構文と使い方を実例で解説

    HTML DOMのnameプロパティとはHTML DOMのnameプロパティは、要素が持つ属性の名前（属性名）に対応する文字列を返すプロパティです。JavaScriptを使って要素の属性情報を動的に取得したい場合に活用できます。構文nameプロパティの基本的な構文は以下のとおりです。【文字列値を返す場合】elementAttribute.name対象となる属性ノードに対して「.name」を記述するだけで、その属性名を文字列として取得できます。HTML DOM nameプロパティの使用例ここでは、img要素の属性名を取得して画面に表示するサンプルコードを紹介します。「Get Answer」ボタン

  2. HTML DOM Object の form プロパティとは？使い方とサンプルコードを解説

    HTML DOM Object の form プロパティとはHTML DOM の form プロパティは、<object> 要素が配置されている親フォーム（enclosing form）への参照を返すプロパティです。このプロパティを使うことで、JavaScript からオブジェクト要素がどのフォームに属しているかを動的に取得できます。構文form オブジェクトへの参照を取得する場合、以下のように記述します。ObjectElement.form戻り値として、該当する <object> 要素を囲んでいるフォームオブジェクトが返されます。もし <object> 要