概要
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・アクセシビリティ・データ連携すべてに影響する。
だからこそ、「なんとなく」ではなく、意図を持って正しく選ぶことが求められる。
本当に優れたインターフェースは、目に見えない部分での配慮が支えている。