HTML disabled属性とreadonly属性の違いを徹底解説！フォーム送信可否の判断を初心者向けに理解しよう

HTML disabled属性とreadonly属性の違い｜送信可否の判断

先生と生徒の会話形式で理解しよう

生徒

「HTMLのdisabled属性とreadonly属性って、どちらも入力できなくなるんですよね？何が違うんですか？」

先生

「どちらも入力制御をするHTMLフォーム属性ですが、フォーム送信できるかどうかが大きな違いです。」

生徒

「送信できるかどうかが違うんですか？」

先生

「はい。Webフォーム設計ではとても重要なポイントです。HTMLフォーム属性の基本から順番に見ていきましょう。」

1. HTML disabled属性とは何か

HTMLのdisabled属性とは、フォーム部品を無効化するためのHTMLフォーム属性です。無効化とは、その入力欄を使用できない状態にするという意味です。ボタンやテキストボックスにdisabledを指定すると、ユーザーはクリックや入力ができなくなります。

さらに重要なのは、disabled属性が付いているフォーム部品はフォーム送信時にデータが送信されないという点です。これはHTMLフォーム設計やWebアプリケーション開発において非常に重要なポイントです。

たとえば、注文フォームでまだ選択できない項目を一時的に無効化する場合などに使われます。ユーザーに操作させないだけでなく、サーバーにも値を送らないという特徴があります。


<form>
    <label>ユーザー名</label>
    <input type="text" value="山田太郎" disabled>
    <button type="submit">送信</button>
</form>

ブラウザ表示

この例では、ユーザー名は表示されていますが編集できません。そしてフォーム送信してもこの値は送信されません。

2. HTML readonly属性とは何か

readonly属性は、入力はできないが値は送信されるというHTML属性です。見た目は入力欄ですが、ユーザーは中身を書き換えることができません。

これは、ユーザーに確認させるための情報を表示する場合に便利です。たとえば会員番号や自動計算された金額など、変更はさせたくないがサーバーには送信したい場合に使います。


<form>
    <label>会員番号</label>
    <input type="text" value="A12345" readonly>
    <button type="submit">送信</button>
</form>

ブラウザ表示

readonlyは主にinputタグやtextareaタグに使用されます。disabledとの最大の違いは、フォーム送信時にデータが含まれるかどうかです。

3. disabledとreadonlyの決定的な違い

HTML disabled属性とreadonly属性の違いを分かりやすく説明します。

disabledは完全に無効化します。操作もできず、データも送信されません。

readonlyは編集だけ禁止します。値は保持され、フォーム送信されます。

これを日常生活に例えると、disabledは鍵がかかった引き出しです。中身を見ることはできても触ることも渡すこともできません。readonlyは透明なケースに入った書類のようなものです。触って変更はできませんが、内容は確認でき、提出はできます。

Web制作やHTML入門の段階でこの違いを理解しておくことは、正しいフォーム設計や入力制御の基本になります。

4. 実際のフォーム送信データの違い

フォーム送信可否の違いをより具体的に理解するために、name属性を付けた例を見てみましょう。name属性とは、送信されるデータの名前を指定するHTML属性です。


<form>
    <label>商品名</label>
    <input type="text" name="product" value="パソコン" readonly>

    <label>割引コード</label>
    <input type="text" name="discount" value="SALE2024" disabled>

    <button type="submit">送信</button>
</form>

ブラウザ表示

この場合、送信されるのはproductの値だけです。discountはdisabledが付いているため送信されません。HTMLフォームの送信仕様として明確に決まっています。

Webアプリケーション開発やバックエンド処理では、この違いを知らないとデータが受け取れない原因になります。

5. どんな場面で使い分けるのか

HTMLフォーム設計では、用途に応じてdisabled属性とreadonly属性を使い分けます。

disabledを使う場面は、まだ選択できない項目や条件未達成時のボタン制御などです。たとえばチェックボックスに同意するまで送信ボタンを無効にする設計です。


<form>
    <input type="checkbox" id="agree">
    <label for="agree">利用規約に同意する</label>

    <button type="submit" disabled>送信する</button>
</form>

ブラウザ表示

一方、readonlyは計算結果表示や登録済み情報の表示などに使われます。ユーザー体験を損なわず、データの整合性を保つための重要なHTML属性です。

6. 対応しているタグの違い

disabled属性はinputタグ、textareaタグ、selectタグ、buttonタグなど多くのフォーム部品に対応しています。

readonly属性は主にinputタグとtextareaタグに対応しています。selectタグには基本的に使えません。

この仕様もHTML標準で決まっています。Web標準を理解することは、正しいマークアップやSEO対策にもつながります。検索エンジンは正しく構造化されたHTMLを評価します。

7. SEOとフォーム属性の関係

HTML disabled属性とreadonly属性は直接SEO順位を上げる要素ではありません。しかし、正しいフォーム設計はユーザー体験を向上させます。

ユーザー体験とは、Webサイトを訪れた人が使いやすいと感じることです。入力ミスが減り、ストレスが少ないフォームは滞在時間を伸ばします。結果として検索エンジン評価にも良い影響を与えます。

HTML初心者の段階からフォーム送信可否の判断を正しく理解しておくことで、実務でも役立つWeb制作スキルが身につきます。disabledとreadonlyの違いを理解することは、HTMLフォーム属性の基礎であり、入力制御の第一歩です。

まとめ

今回はHTML disabled属性とreadonly属性の違いについて、フォーム送信可否という重要な観点から詳しく理解してきました。HTMLフォーム属性の中でもdisabledとreadonlyは非常に混同されやすい属性ですが、その役割と仕様は明確に異なります。disabled属性はフォーム部品を完全に無効化し、ユーザー操作を禁止するだけでなく、フォーム送信時にデータを送信しないという特徴があります。一方でreadonly属性は編集を禁止するだけで、値は保持されフォーム送信時にデータとして送信されます。

HTML入門段階では見た目が似ているため同じように感じますが、Webフォーム設計やWebアプリケーション開発では大きな違いになります。特にname属性と組み合わせたときのフォーム送信データの扱いは、バックエンド処理やデータベース登録にも影響します。フォーム送信可否の判断を正しく理解することは、HTMLフォーム作成の基礎であり、入力制御設計の土台になります。

disabled属性はボタン制御や条件未達成時の無効化、選択不可項目の表示などに適しています。たとえば利用規約に同意するまで送信ボタンを無効にする設計は、実務でもよく使われます。readonly属性は会員番号や注文番号、自動計算された合計金額など、ユーザーに変更させたくないが送信は必要なデータに使用します。

また、対応タグの違いも重要です。disabled属性はinputタグ、textareaタグ、selectタグ、buttonタグなど幅広く使用できますが、readonly属性は主にinputタグとtextareaタグに限定されます。selectタグには基本的にreadonlyは使えません。このHTML仕様の理解は、正しいマークアップやWeb標準に沿ったコーディングにもつながります。

さらに、ユーザー体験の観点でもdisabledとreadonlyの使い分けは重要です。入力できない理由が明確であること、誤送信を防ぐこと、不要なデータを送信しないことは、使いやすいフォーム設計の基本です。結果として離脱率の低下や滞在時間の向上にもつながります。

送信可否を確認するサンプルプログラム


<form>
    <div class="mb-3">
        <label class="form-label">商品名</label>
        <input type="text" class="form-control" name="product" value="ノートパソコン" readonly>
    </div>

    <div class="mb-3">
        <label class="form-label">割引コード</label>
        <input type="text" class="form-control" name="discount" value="SPRINGSALE" disabled>
    </div>

    <div class="mb-3">
        <label class="form-label">会員番号</label>
        <input type="text" class="form-control" name="member" value="M0001" readonly>
    </div>

    <button type="submit" class="btn btn-primary">送信する</button>
</form>

ブラウザ表示

このHTMLフォームではproductとmemberはreadonly属性が付いているためフォーム送信時にデータが送信されます。一方でdiscountはdisabled属性が付いているため送信されません。HTMLフォーム送信仕様を理解していないと、サーバー側で値が受け取れない原因になります。

先生と生徒の振り返り会話

生徒

disabled属性は入力できないだけでなく送信もされないんですね。

先生

その通りです。フォーム送信可否が最大の違いです。HTMLフォーム設計では非常に重要です。

生徒

readonly属性は編集禁止だけでデータは送信されるんですね。

先生

はい。会員番号や注文番号のように変更させたくない値に適しています。

生徒