HTMLのmin属性とは？meter・inputタグで最小値を設定する方法を解説
HTMLのmin属性は、要素が取り得る値の「最小値（下限）」を指定するための属性です。主に<meter>要素と<input>要素で使用でき、ゲージ表示の基準値や、ユーザーが入力できる数値・日付の下限を定義する際に活用されます。
<meter>要素でのmin属性の使い方
まずは、<meter>要素におけるmin属性の使用例を見てみましょう。以下のコードでは、水質データ（不純物レベルとTDSレベル）をゲージ形式で視覚化しています。min="0"により、測定範囲の下限が0に設定されています。
<!DOCTYPE html> <html> <body> <h2>水質レベル</h2> <p>不純物レベル <meter min="0" low="50" high="95" max="100" value="85"></meter></p> <p>TDSレベル <meter min="0" low="20" high="80" max="100" value="60"</p> </body> </html>
出力結果
このコードを実行すると、min〜maxの範囲内で現在値を示すゲージが2本表示されます。
<input>要素でのmin属性の使い方
次に、<input>要素におけるmin属性の使用例です。以下のフォームでは、「報告日」のtype="date"入力フィールドに対してmin="2019-05-05"を指定することで、2019年5月5日より前の日付を選択できないようにしています。
<!DOCTYPE html> <html> <body> <h2>選手情報と報告日</h2> <form> <p>以下は報告日を含む詳細情報です：</p> <fieldset> <legend>新規情報：</legend> クリケット選手名：<input type="text"><br> ランク：<input type="number"><br> メールアドレス：<input type="email"><br> 報告日：<input type="date" name="reporting" min="2019-05-05"> </fieldset> </form> </body> </html>
出力結果
このコードを実行すると、選手情報を入力するフォームが表示されます。
ここで、min属性で指定した2019年5月5日より前の日付を入力してフォームを送信しようとすると、ブラウザのバリデーション機能が働き、次のようなエラーメッセージが表示されて送信がブロックされます。
min属性を使うメリットと注意点
- サーバー負荷の軽減： JavaScriptを書かなくても、ブラウザ標準のバリデーションで不正な値の送信を防げます。
- 対応する入力タイプ：
type="number"、type="date"、type="range"などで有効です。テキスト型には適用されません。 - max属性との併用： min属性とmax属性を組み合わせることで、入力可能な範囲を正確に制御できます。
-
HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法
HTMLのlist属性は、<input>要素に対して、あらかじめ定義された選択肢（候補）を含む<datalist>要素を関連付けるための属性です。この属性を使うことで、ユーザーがテキストを入力する際に候補が自動的に表示され、入力の手間を大幅に減らすことができます。例えば、フォームで「選択科目」を入力してもらう場合、あらかじめ用意した科目名のリストから選べるようにできるため、入力ミスの防止にも役立ちます。list属性の基本構文list属性の基本的な書き方は以下の通りです。<input list=テキスト>list属性には、関連付けたい<datalist&
-
HTMLのmaxlength属性とは？入力文字数を制限する方法を実例付きで解説
maxlength属性とは HTMLのmaxlength属性は、フォームのinput要素に入力できる最大文字数を定義する属性です。この属性を指定すると、ユーザーが設定した文字数を超えて入力できなくなるため、入力ミスや不正なデータの送信を防ぎ、データの整合性を保つことができます。 例えば、電話番号や郵便番号など「桁数が決まっている情報」の入力欄に活用すれば、ユーザーにとって分かりやすく、開発者にとっても扱いやすいフォームを作成できます。 基本構文 maxlength属性の基本的な記述方法は以下のとおりです。 <input maxlength="最大文字数"> 属