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

HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

HTML DOM の input submit value プロパティは、type="submit" を持つ input 要素の value 属性に関連付けられたプロパティです。このプロパティを使うことで、送信ボタンの value 属性の値を取得したり、新しい値を設定したりすることができます。

送信ボタンの value プロパティを変更すると、ボタンに表示されるテキストも変化します。通常、送信ボタンにはデフォルトで「Submit（送信）」というテキストが表示されますが、value プロパティを利用すれば、これを任意の文字列に自由に変更できます。

構文

value プロパティを設定する場合の基本的な構文は以下の通りです。

submitObject.value = text;

text には、送信ボタン上に表示させたいテキストを指定します。

サンプルコード

それでは、input submit value プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input submit Value 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">
</form>
<p>下のボタンをクリックすると、上の要素の値が変更されます</p>
<button onclick="changeValue()">CHANGE</button>
<p id="Sample"></p>
<script>
   function changeValue() {
      document.getElementById("SUBMIT1").value="Form_Submit";
      document.getElementById("Sample").innerHTML="送信ボタンの値が変更されました。ボタン自体の表示を確認してください";
   }
</script>
</body>
</html>

コードの解説

  • フォーム内にユーザー名と場所の入力欄、そして送信ボタン（id="SUBMIT1"）を配置しています。
  • 「CHANGE」ボタンをクリックすると changeValue() 関数が呼び出され、document.getElementById() を使って送信ボタンの value を「Form_Submit」に書き換えます。
  • 同時に、<p id="Sample"> の内容も更新して、変更が完了したことをユーザーに通知します。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

「CHANGE」ボタンをクリックすると、送信ボタンの表示テキストが「Submit」から「Form_Submit」へと変化します。

HTML DOMのInput Submit valueプロパティとは？構文と使い方を実例で解説

このように、JavaScript から value プロパティを操作することで、送信ボタンのラベルを動的に変更できます。状況に応じてボタンの表示を切り替えたい場合などに便利な機能です。

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

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

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

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