概要

HTMLのフォーム設計において、「要素を使えなくする」あるいは「非表示にする」というニーズはよくある。
その際によく使われる属性が hidden と disabled。

見た目や動作が似ているため、混同しがちだが、この2つの役割と仕様は本質的に異なる。
特にバリデーション、アクセシビリティ、データ送信における挙動の違いを理解せずに使うと、意図しないバグやUI崩壊を引き起こす。

本記事では、両者の違いを明確にし、正しいユースケースとともに実践的に整理する。

対象環境

HTML5準拠ブラウザすべて（Chrome / Firefox / Edge / Safari）

`hidden` の意味と挙動

<input type="text" name="username" hidden>

特徴：

要素が完全に非表示になる（CSSの display: none と同様）
フォーム送信には含まれる
スクリーンリーダーでも読み取られない
JavaScriptで element.hidden = true/false という操作も可能

`disabled` の意味と挙動

<input type="text" name="username" disabled>

特徴：

要素は表示されるが入力不可になる（グレーアウトされる）
フォーム送信には含まれない
スクリーンリーダーでは読み取られる（ただし読み取り方法はブラウザ依存）
ユーザー操作が完全に無効化される

一覧比較表

属性	表示されるか	入力できるか	フォーム送信に含まれるか	スクリーンリーダー対応
`hidden`	❌ 非表示	❌ 不可	✅ 含まれる	❌ 読まれない
`disabled`	✅ 表示	❌ 不可	❌ 含まれない	✅ 読まれる（要注意）

使用例：`hidden` を使う場面

✅ JavaScriptで表示・非表示を切り替えたいとき

<div id="advanced-section" hidden>
  <input type="text" name="advancedOption">
</div>

<script>
  document.getElementById('advanced-section').hidden = false;
</script>

✅ サーバーに値を送りたいが、ユーザーに見せたくないとき

<input type="hidden" name="session_token" value="abc123">

使用例：`disabled` を使う場面

✅ 入力欄を一時的に操作不可にしたいとき

<input type="text" name="email" disabled>

✅ UIの状態に応じて有効化・無効化を切り替えたいとき

<select id="plan" onchange="toggleInput()">
  <option value="basic">Basic</option>
  <option value="pro">Pro</option>
</select>

<input type="text" id="coupon" placeholder="クーポンコード" disabled>

<script>
  function toggleInput() {
    const plan = document.getElementById('plan').value;
    const coupon = document.getElementById('coupon');
    coupon.disabled = (plan === 'basic');
  }
</script>

注意点

`disabled` 要素は JavaScript からも `.value` を取得できるが、送信されない

document.querySelector('#myInput').value // ← 取得可能

ただし、form.submit() を使っても値は送信されない。
これは仕様通りの挙動である。

補足：`readonly` との違い

<input type="text" value="固定値" readonly>

表示：✅
入力：❌
送信：✅

readonly は disabled との中間のような存在で、表示して送信もしたいが、編集はさせたくないという場面で使う。

結語

hidden, disabled, readonly──
これらは一見似ているが、それぞれに意味と目的が明確に違う。

HTMLの属性設計は、UIだけでなく、UX・アクセシビリティ・データ連携すべてに影響する。
だからこそ、「なんとなく」ではなく、意図を持って正しく選ぶことが求められる。

本当に優れたインターフェースは、目に見えない部分での配慮が支えている。