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

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

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

disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。

構文

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

resetObject.disabled = true | false
  • true … リセットボタンを無効にします
  • false … リセットボタンを有効にします（デフォルト値）

サンプルコード

それでは、Input reset の disabled プロパティを使った具体的な例を見てみましょう。

<!DOCTYPE html>
<html>
<body>
<h1>Input reset disabled プロパティ</h1>
<form style="border:solid 2px green;padding:2px">
ユーザー名： <input type="text" id="USR"> <br>
所在地： <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>
<p>下の DISABLE ボタンをクリックすると、リセットボタンが無効になります</p>
<button type="button" onclick="disableReset()">DISABLE</button>
<p id="Sample"></p>
<script>
    function disableReset() {
        document.getElementById("RESET1").disabled=true;
        document.getElementById("Sample").innerHTML = "リセットボタンは無効になりました";
    }
</script>
</body>
</html>

出力結果

このコードを実行すると、以下のような画面が表示されます。

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

DISABLE ボタンをクリックすると、次のように変化します。

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

コードの解説

このサンプルでは、以下のような処理を行っています。

1. フォームとリセットボタンの作成

まず、type="reset"、id="RESET1" を持つ <input> 要素を作成しています。このボタンをクリックすると、フォーム内の入力データが初期状態に戻ります。フォームには2つのテキストフィールドが含まれており、インラインスタイルによって緑色の枠線と余白が設定されています。

<form style="border:solid 2px green;padding:2px">
ユーザー名： <input type="text" id="USR"> <br>
所在地： <input type="text" id="Age"> <br><br>
<input type="reset" id="RESET1">
</form>

2. DISABLE ボタンの作成

次に、ユーザーがクリックすると disableReset() 関数を実行する DISABLE ボタンを作成しました。

<button type="button" onclick="disableReset()">DISABLE</button>

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

disableReset() 関数は、getElementById() メソッドを使って type="reset" の input 要素を取得し、その disabled プロパティを true に設定します。これにより、リセットボタンはクリック不可の状態となり、ユーザーは操作できなくなります。見た目もグレーアウトした状態へと変化します。同時に、id="Sample" の段落にメッセージを表示させています。

function disableReset() {
    document.getElementById("RESET1").disabled=true;
    document.getElementById("Sample").innerHTML = "リセットボタンは無効になりました";
}

まとめ

  • disabled プロパティを使うと、リセットボタンの有効／無効を動的に切り替えられます
  • true で無効化、false で有効化（デフォルト値）です
  • 無効化されたボタンはグレーアウトして表示され、クリックできなくなります
  • JavaScript から状態の設定と取得の両方が可能です
  1. HTML DOMのInput Submit disabledプロパティとは?使い方とサンプルコードを解説

    HTML DOMのInput Submit disabledプロパティとは HTML DOMのInput Submit disabledプロパティは、フォーム内の送信ボタン(submitボタン)を無効化するかどうかを設定・取得するために使用されるプロパティです。 このプロパティはブール値(true/false)を受け取ります。 true … 送信ボタンを無効化する false … 送信ボタンを有効化する(デフォルト値) 無効化(disabled)されたボタンは自動的にグレーアウトして表示され、ユーザーがクリックすることはできません。二重送信の防止や、入力内容が未完了の場合に送信操作を制限し

  2. HTML DOM Input Reset autofocusプロパティの使い方を徹底解説

    HTML DOM の Input Reset autofocus プロパティは、HTML <input> 要素の autofocus 属性に関連付けられたプロパティです。このプロパティを使うことで、ページが読み込まれたときにリセットボタンへ自動的にフォーカスを当てるかどうかを、設定または取得できます。構文autofocus プロパティの構文は以下の通りです。autofocus プロパティを設定する場合：resetObject.autofocus = true|falsetrue を指定するとリセットボタンがフォーカスを受け取り、false を指定した場合はフォーカスされません。デフ