HTMLで非活性にする方法10選！簡単に実装できるサンプルコード付き

はじめに
○非活性とは？
○方法1：inputタグのdisabled属性
○方法2：buttonタグのdisabled属性
- ○方法3：selectタグのdisabled属性
○方法4：textareaタグのdisabled属性
○方法5：fieldsetタグでまとめて非活性にする
○方法6：JavaScriptを使った非活性の実装
○方法7：CSSで見た目を非活性にする
○方法8：非活性化した要素の値を送信する方法
○方法9：非活性化の注意点
○方法10：カスタマイズのアイデア
まとめ

はじめに

この記事を読めばHTMLで非活性にする方法が身につく

あなたもWebページを作成する際に、特定の条件下でフォーム要素を操作できないようにしたいと思ったことはありませんか？

そんな時に役立つのが、HTMLで非活性にする方法です。

この記事では、初心者でも簡単に非活性にできる方法や対処法、注意点、カスタマイズ方法を、豊富なサンプルコードと共に解説していきます。

○非活性とは？

非活性（英: disabled）とは、フォーム要素が操作できなくなる状態のことを指します。

具体的には、テキストボックスやボタンがクリックできなくなったり、ドロップダウンリストが選択できなくなったりすることです。

これにより、特定の条件下でユーザーが誤操作を防ぐことができます。

○方法1：inputタグのdisabled属性

inputタグにdisabled属性を付けることで、その要素を非活性にすることができます。

下記のサンプルコードでは、テキストボックスが非活性になっています。

<input type="text" disabled>

○方法2：buttonタグのdisabled属性

buttonタグにもdisabled属性を付けることで、その要素を非活性にすることができます。

下記のサンプルコードでは、ボタンが非活性になっています。

<button disabled>クリックできないボタン</button>

○方法3：selectタグのdisabled属性

selectタグにdisabled属性を付けることで、その要素を非活性にすることができます。

下記のサンプルコードでは、ドロップダウンリストが非活性になっています。

<select disabled>
  <option>選択肢1</option>
  <option>選択肢2</option>
</select>

○方法4：textareaタグのdisabled属性

textareaタグにdisabled属性を付けることで、その要素を非活性にすることができます。

下記のサンプルコードでは、テキストエリアが非活性になっています。

<textarea disabled></textarea>

○方法5：fieldsetタグでまとめて非活性にする

fieldsetタグを使うことで、複数のフォーム要素をまとめて非活性にすることができます。

下記のサンプルコードでは、テキストボックスとボタンがまとめて非活性になっています。

<fieldset disabled>
  <input type="text">
  <button>クリックできないボタン</button>
</fieldset>

○方法6：JavaScriptを使った非活性の実装

JavaScriptを使って、動的にフォーム要素を非活性にすることもできます。

下記のサンプルコードでは、チェックボックスをオンにすると、テキストボックスが非活性になります。

<input type="checkbox" id="disableCheckbox">
<input type="text" id="textInput">

<script>
  document.getElementById('disableCheckbox').addEventListener('change', function() {
    var textInput = document.getElementById('textInput');
    textInput.disabled = this.checked;
  });
</script>

○方法7：CSSで見た目を非活性にする

CSSを使って、非活性な見た目にすることもできます。

ただし、これは見た目だけの変更で、実際の操作は制限されません。

下記のサンプルコードでは、ボタンの見た目を非活性にしています。

<button class="disabled-look">見た目だけ非活性なボタン</button>

<style>
  .disabled-look {
    background-color: #ccc;
    cursor: not-allowed;
    opacity: 0.6;
  }
</style>

○方法8：非活性化した要素の値を送信する方法

通常、非活性化したフォーム要素の値は送信されません。

しかし、隠しフォーム要素（inputタグのtype属性を”hidden”にしたもの）を使って、非活性化した要素の値を送信することができます。

下記のサンプルコードでは、非活性化したテキストボックスの値が隠しフォーム要素を使って送信されます。

<form method="POST">
  <input type="text" id="textInput" disabled value="非活性な値">
  <input type="hidden" id="hiddenInput" name="hiddenValue">
  <button type="submit">送信</button>
</form>

<script>
  document.getElementById('hiddenInput').value = document.getElementById('textInput').value;
</script>