“input”要素~“max”属性

“max”属性について

“max”属性は“input”要素で表される入力欄に入力可能な最大値を指定する属性です。

“max”属性は“type”属性に以下の値が指定されている場合に使用できます。

• “date”
• “month”
• “week”
• “time”
• “datetime-local”
• “number”
• “range”

“max”属性と“min”属性の組み合わせで入力可能な値の範囲を指定することができます。“max”属性の値は“min”属性の値よりも大きい必要がありますが、“type”属性の値が“time”である場合に限り“min”属性よりも小さい値を指定して真夜中を跨いだ範囲を指定することができます。

“type”属性の値が“range”の場合、“max”属性を省略した場合の既定値は“100”です。“type”属性が他の値である場合は入力できる最大値は入力値がとりうる最大の値、もしくは無制限です。

ユーザーが入力した入力値が“max”属性で指定した最大値よりも大きい場合はブラウザによる妥当性のチェックによりフォームが送信できなくなります。ブラウザによってはユーザーが入力欄に指定した最大値を超える入力値を入力できないようにします。

“max”属性の値は入力欄が送信できる入力値の書式を満たす必要があります。値が不正な場合は“max”属性は無視されます。

指定できる値

“type”属性	“max”属性
値	値	説明
date	日付	機械可読な形式の日付(“YYYY-MM-DD”)
month	月	機械可読な形式の月(“YYYY-MM”)>
week	週	機械可読な形式の週(“yyyy-Www”)
time	時刻	機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
datetime-local	日時	機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
number	数値	入力可能な最大値
range

サンプルコード

<dl>

<dt>営業時間</dt>
<dd>午前10時~午後5時</dd>
<dt>席数</dt>
<dd>5席</dd>

</dl>

...

<form method="post" action="sample-inputtag12.php" target="_blank">

<fieldset>

<p><label>ご来店希望時間：<input type="time" name="time" min="10:00" max="17:00"></label></p>
<p><label>ご来店される人数：<input type="number" name="number" min="1" max="5"></label></p>
<p><label>このくらい鮪が好き：<input type="range" name="percent" min="0" max="100"></label></p>

</fieldset>
<p><button type="submit">送信する</button></p>

</form>

営業時間

午前10時~午後5時

席数

5席

...

ご来店希望時間：

ご来店される人数：

このくらい鮪が好き：

送信する

＊送信すると入力内容が表示されます。