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

HTMLで要素や要素グループを無効化する方法【disabled属性の使い方】

HTMLではdisabled属性を指定することで、ボタンや入力欄などの要素を無効化できます。disabled属性が付いた要素はクリックや入力ができなくなり、多くのブラウザではグレー表示されるため、ユーザーにも「操作できない状態」であることが視覚的に伝わります。

disabled属性を指定できる主な要素

disabled属性は、以下のようなフォーム関連の要素に対して使用できます。

  • <button> … ボタン
  • <input> … テキスト入力欄・チェックボックス・ラジオボタンなど
  • <select> … セレクトボックス
  • <textarea> … 複数行テキスト入力欄

要素のグループをまとめて無効化するには

個々の要素だけでなく、<fieldset>要素にdisabled属性を指定すれば、グループ内のすべてのフォーム部品を一括して無効化できます。関連する入力項目をまとめて操作不可にしたい場合に便利です。

サンプルコード

次の例では、3つのチェックボックスは通常どおり操作できますが、送信ボタンだけがdisabled属性によって無効になっています。

<!DOCTYPE html>
<html>
    <body>
        <p>好きなスポーツは何ですか？</p>
        <form action="" method="get">
            <input type="checkbox" name="sports" value="football" checked> サッカー<br>
            <input type="checkbox" name="sports" value="cricket" checked> クリケット<br>
            <input type="checkbox" name="sports" value="hockey"> ホッケー<br>
            <input type="submit" value="送信" disabled>
        </form>
    </body>
</html>

このように、無効化したい要素にdisabledを追加するだけで簡単に実装できます。また、JavaScriptで動的に切り替えたい場合は、「element.disabled = true / false」という形でプロパティを操作する方法も一般的です。条件に応じてフォームの送信を制御したい場面などで活用してください。

  1. HTMLで要素の幅を設定する方法【width属性の使い方を解説】

    HTMLでは、width属性を使用することで要素の幅を設定できます。この属性は、<canvas>、<embed>、<img>、<input>、<video> などの要素と組み合わせて利用可能です。 width属性の基本的な使い方 width属性には、ピクセル単位の数値を指定します。例えば「width=300」と記述すると、要素の幅は300ピクセルに設定されます。高さを指定したい場合は、height属性を併用します。 width属性が使える主な要素 <img> … 画像の表示幅を指定 <video> … 動

  2. HTMLで要素のタイプを設定するには？type属性の使い方を解説

    HTMLでは、type属性を使用することで要素のタイプを設定できます。ここでは、ユーザーからの入力を受け取るための<input>タグについて解説します。type属性は、テキスト入力（text）、チェックボックス（checkbox）、ラジオボタン（radio）など、さまざまなフォーム要素と組み合わせて使用されます。type属性で指定できる主な値text：1行のテキスト入力欄password：入力内容が隠されるパスワード欄checkbox：複数選択可能なチェックボックスradio：択一選択のラジオボタンsubmit：フォーム送信ボタンサンプルコード以下のコードを実行して、type属性の