HTMLのdisabled属性とは？使い方とサンプルコードをわかりやすく解説
HTMLのdisabled属性は、フォーム要素などを無効化（操作できない状態に）するために使用される属性です。この属性が設定された要素は、ユーザーがクリックや入力を行うことができなくなります。
disabled属性を使用できる要素
disabled属性は、以下のHTML要素に対して使用できます。
<button>、<textarea>、<optgroup>、<select>、<fieldset>、<input>、<option>
基本構文
disabled属性の基本的な記述方法は次のとおりです。
<element disabled>
属性値を指定する必要はなく、属性名だけを記述するだけでその要素は無効化されます。
<input>要素でのdisabled属性
<input>要素にdisabled属性を設定すると、その入力フィールドは無効化され、クリックや文字入力ができなくなります。また、無効化された入力要素の値は、フォーム送信時にもサーバーへ送信されない点に注意が必要です。
構文は以下のとおりです。
<input disabled>
実装例
ここでは、<input>要素のdisabled属性を使った具体的な例を見てみましょう。以下のコードでは、「Player（選手名）」の入力欄のみを無効化しています。
<!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>
出力結果
上記のコードを実行すると、次のようなフォームが表示されます。「選手名」の入力欄にはdisabled属性が設定されているため、グレー表示になり、クリックや編集ができない状態になっていることが確認できます。
まとめ
disabled属性を使えば、ボタンや入力フィールドなどを簡単に無効化できます。ユーザーに操作させたくない項目や、条件が満たされるまで入力を制限したい場合などに活用すると便利です。ただし、無効化された要素の値はフォーム送信時に送られないため、実装の際はその点を考慮して設計しましょう。
-
HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法
HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&
-
HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説
maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属