ywork2020.com

Title

マックス属性とミニマム属性を使えば、最大値と最小値が指定できる

max属性とmin属性の概要

maxとmin属性は入力系の要素やグラフ系の要素の最大値と最小値を設定するための属性です。  max属性で最大値を指定し、min属性で最小値を指定します。

input要素などの入力要素で、この属性が送信制限の効果を発揮するのはinput要素がform要素に内包されている場合となります。

max属性とmin属性の実機サンプルとサンプルコード

実機サンプルとして2つの要素を紹介しています。その他の要素は次項の表を参考にしてください。

input要素 number型

初期値を指定範囲外の120に設定していますので、そのまま送信ボタンをクリックすると実際の動作が確認できます。 ブラウザによって挙動や表示は異なります。
        

<input type="number" min="0" max="100" value="120">

input要素 range型

input要素のrange型では指定範囲外の選択ができない仕様になります。


<input type="range" min="0" max="100" value="50">

この属性が使用できる要素

  • input要素
    • number型
    • range型
    • datetime型
    • date型
    • month型
    • week型
    • time型
    • datetime-local型
  • meter要素
  • progress要素

max属性とmin属性の類似属性

この属性は数値の入力補助と制限をする属性ですが、文字列数の補助と制限をする類似属性があります。 興味がある方は次のリンクを参照してください。
最大文字数の制限は、maxlength (マックスレン属性)
最小文字数の制限は、minlength (ミニレン属性)