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

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

HTML DOMのInput Submit disabledプロパティとは

HTML DOMのInput Submit disabledプロパティは、フォーム内の送信ボタン(submitボタン)を無効化するかどうかを設定・取得するために使用されるプロパティです。

このプロパティはブール値(true/false)を受け取ります。

  • true … 送信ボタンを無効化する
  • false … 送信ボタンを有効化する(デフォルト値)

無効化(disabled)されたボタンは自動的にグレーアウトして表示され、ユーザーがクリックすることはできません。二重送信の防止や、入力内容が未完了の場合に送信操作を制限したい場合などに活用できます。

構文

disabledプロパティを設定する際の構文は以下の通りです。

submitObject.disabled = true|false

trueを指定すると送信ボタンが無効化され、falseを指定すると有効化されます。デフォルト値はfalseです。

サンプルコード

以下に、Input Submit disabledプロパティを使用した具体例を示します。「DISABLE」ボタンをクリックすると、フォーム内の送信ボタンが無効化されます。

<!DOCTYPE html>
<html>
<body>
<h1>Input submit disabled Property</h1>
<form action="/Sample_page.php" 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>下のDISABLEボタンをクリックすると、上記の送信ボタンが無効化されます</p>
<button type="button" onclick="disableSubmit()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableSubmit() {
        document.getElementById("SUBMIT1").disabled = true;
        document.getElementById("Sample").innerHTML = "The submit button is now disabled";
    }
</script>
</body>
</html>

コードの解説

  • 「DISABLE」ボタンがクリックされると、onclickイベントによってJavaScript関数disableSubmit()が呼び出されます。
  • 関数内では、document.getElementById()メソッドでIDが「SUBMIT1」の送信ボタン要素を取得し、そのdisabledプロパティをtrueに設定しています。
  • 同時に、IDが「Sample」の段落(<p>)に対象ボタンが無効化されたことを示すメッセージを出力しています。

実行結果

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

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

DISABLEボタンをクリックした後は、送信ボタンがグレーアウトして無効化され、メッセージが表示されます。

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

  1. HTML DOM 入力送信（submit）オブジェクトのプロパティ徹底解説

    HTML DOM の入力送信（Input Submit）オブジェクトは、type=submit が指定された <input> 要素に関連付けられたオブジェクトです。新しい送信ボタンは createElement() メソッドで動的に作成でき、すでにページ上に存在する送信ボタンには getElementById() メソッドを使ってアクセスできます。 Input Submit オブジェクトの主なプロパティ 入力送信オブジェクトには、以下のプロパティが用意されています。 プロパティ説明 autofocusページ読み込み時に、送信ボタンへ自動的にフォーカスを当てるかどうかを設

  2. HTML DOM Input リセットボタンの disabled プロパティの使い方を解説

    HTML DOM の Input Reset オブジェクトが持つ disabled プロパティは、フォーム内のリセットボタンを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されます。このプロパティはブール値（true / false）を受け取り、true を設定するとリセットボタンが無効になり、false であれば有効な状態を保ちます。デフォルト値は false です。disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。構文disabled