【HTML】disabled属性の基本的な使い方

2021年9月24日 2021年9月27日

こんにちは！CODE CLUB965のKです！

今回はHTMLにおけるdisabled属性の使い方について書こうと思います。

disabled属性とは？

早速ですがdisabled属性とは何でしょうか？
それは、対象の要素を非活性にする時に使用する属性のことです。

見かける場面は多いと思いますが、例えば何かしらのボタンで、表示はされているが押すことができない状態になっている（非活性になっている）時があると思います。

その時に使用しているのがこのdisabled属性です。

どのようなタグで使用されている？

disabled要素がよく利用されるHTML要素として、「input」タグや「button」タグがあります。

例えば、「input」タグで「type=”text”」にdisabled属性を付与すると、入力欄が非活性となり、入力ができない状態にできます。

「button」タグも同様に、ボタンが非活性となり、クリックできない状態にすることができます。

disabled属性の設定方法

disabled属性を設定する方法ですが、特に難しくありません。
HTMLタグに対して「disabled」を記述するだけで設定できます。

具体例を見てみましょう。
例えば以下のようなinputタグで記述された入力項目があったとします。

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
</head>
<body>
  <div>入力項目</div>
  <input type="text">
</body>
</html>

上記の場合、以下のように表示されます。

sample

入力項目

これにdisabled属性を付与する場合、以下のように記述します。

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>sample</title>
</head>
<body>
  <div>入力項目</div>
  <input type="text" disabled>
</body>
</html>

inputタグにdisabled属性を付与しているのが分かると思います。

付与することで表示は以下のようになります。

sample

入力項目

入力ができなくなっていると思います。

このように対象の要素を非活性にすることができます。
これはbuttonタグなどについても同じやり方です。