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

HTMLのinput要素min属性とは？最小値を設定する方法をサンプルコード付きで解説

min属性とは

<input>要素のmin属性は、入力フィールドに入力できる最小値を指定するための属性です。min属性とmax属性を組み合わせて使うことで、type="number"（数値）やtype="date"（日付）、type="datetime-local"、type="range"などの入力タイプに対して、許容される値の範囲（下限・上限）を設定できます。この属性はHTML5で新たに導入されました。

min属性は、主に以下のような入力タイプで利用できます。

  • type="number"：数値の最小値を指定
  • type="date"／"month"／"week"／"time"／"datetime-local"：日付・時刻の最小値を指定
  • type="range"：スライダーの最小値を指定

min属性の実装例

それでは、<input>要素のmin属性を使った具体例を見てみましょう。次の例では、IDの入力欄に対してmin属性を「1」に設定しているため、ユーザーは1未満の値を入力できません。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<h2>アカウントにログイン</h2>
<form action="" method="get">
   ID: <input type="number" name="id" min="1" max="10"><br>
   パスワード: <input type="password" name="pwd"><br>
   生年月日: <input type="date" name="dob" autofocus><br>
   <button type="submit" value="Submit">送信</button>
</form>
</body>
</html>

実行結果

HTMLのinput要素min属性とは？最小値を設定する方法をサンプルコード付きで解説

上記の例では、複数の入力フィールドと送信ボタンを備えたフォームを作成しています。

<form action="" method="get">
   ID: <input type="number" name="id" min="1" max="10"><br>
   パスワード: <input type="password" name="pwd"><br>
   生年月日: <input type="date" name="dob" autofocus><br>
   <button type="submit" value="Submit">送信</button>
</form>

ポイントとなるのは、IDの入力欄（type="number"）に設定されたmin属性です。最小値が「1」に指定されているため、ユーザーは1より小さい値を入力できません。

ID: <input type="number" name="id" min="1" max="10">

ブラウザによるバリデーション

min属性による制約チェックは、ブラウザの標準バリデーション機能によって自動的に行われます。範囲外の値を入力してフォームを送信しようとすると、「値は1以上でなければなりません」といったエラーメッセージが表示され、送信がブロックされます。ただし、クライアント側のチェックだけに頼らず、サーバー側でも入力値の検証を行うことで、より安全で堅牢なフォームを実装できます。

  1. HTMLのlist属性とは？datalistと組み合わせた入力候補の実装方法

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

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

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