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

HTML DOM入力ボタンのnameプロパティとは?取得・変更方法を実例付きで解説

HTML DOMのnameプロパティを使用すると、HTML内のinputボタンのname属性の値を取得したり、後から変更したりすることができます。name属性はフォーム送信時にデータの識別に使われる重要な属性であり、JavaScriptから動的に操作できることで、より柔軟なフォーム処理が可能になります。

構文

nameプロパティの基本的な構文は以下の通りです。

1. name属性の値を取得する場合

object.name

2. name属性の値を変更する場合

object.name = "text"

ここで「text」には、inputボタンに設定したい新しい名前(文字列)を指定します。

サンプルコード

それでは、nameプロパティの実際の使用例を見てみましょう。以下の例では、ボタンをクリックすると現在のname属性の値を表示した後、新しい値に変更しています。

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM name Property</title>
<style>
   body{
      text-align:center;
   }
   .btn{
      display:block;
      margin:1rem auto;
      background-color:#db133a;
      color:#fff;
      border:1px solid #db133a;
      padding:0.5rem;
      border-radius:50px;
      width:80%;
   }
   .show-name{
      font-weight:bold;
      font-size:1.4rem;
      color:#ffc107;
   }
</style>
</head>
<body>
<h1>name Property Example</h1>
<input type="submit" onclick="setName()" class="btn" value="Click me to change my Name attribute value" name="Red_Button">
<div class="show-name"></div>
<script>
   function setName() {
      var btn= document.querySelector(".btn");
      document.querySelector(".show-name").innerHTML ="Previous Name = " + btn.name;
      document.querySelector(".btn").name = "Round_Red_Button";
   }
</script>
</body>
</html>

実行結果

このコードをブラウザで実行すると、次のように表示されます。

HTML DOM入力ボタンのnameプロパティとは?取得・変更方法を実例付きで解説

「要素を検証(Inspect Element)」でHTMLを確認すると、inputボタンのname属性が初期状態では「Red_Button」に設定されていることが分かります。

HTML DOM入力ボタンのnameプロパティとは?取得・変更方法を実例付きで解説

次に、画面上の「Click me to change my Name attribute value」ボタンをクリックしてみましょう。スクリプトが実行され、まず変更前のname属性の値が画面に表示され、その後name属性が「Round_Red_Button」に書き換えられます。

HTML DOM入力ボタンのnameプロパティとは?取得・変更方法を実例付きで解説

再度「要素を検証」で確認すると、name属性の値が正しく更新されていることが確認できます。

HTML DOM入力ボタンのnameプロパティとは?取得・変更方法を実例付きで解説

ポイントまとめ

・nameプロパティは常に文字列としてname属性の値を返します。
・name属性の値を変更しても、ボタンの表示内容(value属性)には影響しません。
・フォーム送信時には、変更後のname属性がサーバーへのデータ送信に反映されます。


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

    HTML DOMのInput Search nameプロパティは、検索フィールド（<input type=search>）のname属性を設定または取得するために使用されるプロパティです。name属性は、フォームデータがサーバーへ送信された後に、そのデータを識別する役割を果たします。また、JavaScriptからもname属性を利用してフォーム要素を参照し、後から動的に操作することが可能です。 nameプロパティでできること nameプロパティを活用することで、次のようなことが実現できます。 フォーム送信時に、サーバー側でどの入力欄のデータかを識別できる JavaScriptから

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

    HTML DOM の Input Submit name プロパティは、送信ボタン（submit ボタン）の name 属性を設定または取得するために使用されます。name 属性は、フォームデータがサーバーへ送信された後に、そのデータを識別するための重要な役割を果たします。構文（Syntax）name プロパティを設定する場合の構文は以下のとおりです。submitObject.name = nameここで指定する name は、送信ボタンに付ける名前です。既存の name 属性値を取得したい場合は、submitObject.name をそのまま参照することで現在の値を文字列として返します。サン