HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのinput要素におけるdisabled属性の使い方を解説

HTMLの<input>要素に設定できるdisabled属性は、入力欄を無効化（使用不可の状態）にするための属性です。disabled属性が付与された要素はクリックや入力ができなくなり、見た目もグレーアウトしてユーザーに「操作できない」ことが直感的に伝わります。また、無効化された入力欄の値は、フォーム送信時にサーバーへ送信されない点にも注意が必要です。

基本構文

disabled属性はブール型属性のため、値を指定せずに属性名だけを記述します。以下が基本的な構文です。

<input disabled>

それでは、実際に<input>要素へdisabled属性を実装した例を見てみましょう。

実装例

次のコードでは、「Player（選手名）」の入力欄のみをdisabled属性で無効化しています。他の3つのフィールドは通常どおり入力可能です。

<!DOCTYPE html>
<html>
<body>
<h2>詳細情報</h2>
<form>
<p>以下に新しい情報を入力してください...</p>
<fieldset>
<legend>新規情報：</legend>
選手名： <input type="text" disabled><br>
順位： <input type="number"><br>
メールアドレス： <input type="email"><br>
報告時刻： <input type="time">
</fieldset>
</form>
</body>
</html>

表示結果

上記コードをブラウザで表示すると、4つの入力欄のうち「選手名」のフィールドだけが無効化され、グレーアウトされた状態で表示されます。

コードの解説

この例では、以下の4つの入力フィールドを用意しています。

選手名： <input type="text" disabled><br>
順位： <input type="number"><br>
メールアドレス： <input type="email"><br>
報告時刻： <input type="time">

このうち、disabled属性を使って無効化しているのは次の1つだけです。

選手名： <input type="text" disabled>

disabled属性が設定された「選手名」フィールドには、テキストを入力することもクリックしてフォーカスすることもできません。一方、残りの3つのフィールドは通常どおり操作できます。

disabled属性を使う際のポイント

  • 無効化された入力欄の値はフォーム送信時に送信されません。値を保持しつつ編集だけ禁止したい場合は、readonly属性の利用を検討しましょう。
  • JavaScriptから動的に有効・無効を切り替えることも可能です（element.disabled = true / false）。
  • チェックボックスやラジオボタン、ボタンなど、他のフォーム部品にも同様に適用できます。
  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

    HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&

  2. HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説

    maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属