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

HTML DOM Input Submit の name プロパティとは？使い方とサンプルコードを解説

HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。

構文（Syntax）

name プロパティを設定する場合の構文は以下のとおりです。

submitObject.name = name

ここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。

サンプルコード

次に、Submit の name プロパティを使用した具体的な例を見てみましょう。この例では、ボタンをクリックすると送信ボタンの name 属性が動的に変更されます。

<!DOCTYPE html>
<html>
<body>
<h1>Input submit name Property</h1>
<form style="border:solid 2px green;padding:2px">
UserName: <input type="text" id="USR"> <br>
Location: <input type="text" id="Loc"> <br><br>
<input type="submit" id="SUBMIT1" name="BTN1">
</form>
<p>下のボタンをクリックすると、上の送信ボタンの名前が変更されます</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
    function changeName() {
        document.getElementById("SUBMIT1").name = "SUB_BTN";
        document.getElementById("Sample").innerHTML = "Submit Button name is now SUB_BTN";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、緑色の枠で囲まれたフォームと「CHANGE NAME」ボタンが表示されます。初期状態では、送信ボタンの name 属性には「BTN1」が設定されています。

「CHANGE NAME」ボタンをクリックすると、JavaScript の changeName() 関数が実行され、送信ボタンの name 属性が「SUB_BTN」に変更されます。同時に、画面上には「Submit Button name is now SUB_BTN」というメッセージが表示され、変更が完了したことが確認できます。

ポイントまとめ

  • name プロパティは送信ボタンの name 属性の取得・設定の両方に対応しています。
  • name 属性の値は、フォーム送信時にサーバー側でデータを識別するキーとして利用されます。
  • JavaScript から動的に変更できるため、状況に応じて送信内容を切り替えたい場合などに活用できます。
  1. HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

    HTML DOM の input submit value プロパティは、type=submit を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。 送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。 構文 value プロパティを設定する場合の基本的な

  2. HTML DOM Input Submit typeプロパティとは？構文とサンプルコードで解説

    HTML DOMのInput Submit typeプロパティは、type=submitが設定されたinput要素に関連付けられたプロパティです。このプロパティは、送信ボタン（submit）型のinput要素に対して常に文字列「submit」を返します。フォームの送信ボタンがどの種類の入力要素なのかをJavaScriptから動的に確認したい場合に役立ちます。構文（シンタックス）Submit typeプロパティの基本的な構文は以下の通りです。submitObject.type対象となるinput要素のオブジェクトに対して.typeを指定するだけで、その要素のtype属性値を文字列として取得できま