このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

input”要素~“max”属性HTML5で追加

記事Sep.18th, 2020
入力可能な最大値を指定する属性
この記事はHTML Living Standardに対応しています。
この記事はHTML Living Standardに対応しています。

max”属性について

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

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

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

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

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

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

指定できる値

type”属性 max”属性
説明
dateHTML5で追加 日付 機械可読な形式の日付(“YYYY-MM-DD”)
monthHTML5.1で追加 機械可読な形式の月(“YYYY-MM”)>
weekHTML5.1で追加 機械可読な形式の週(“yyyy-Www”)
timeHTML5で追加 時刻 機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
datetime-localHTML5.1で追加 日時 機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
numberHTML5で追加 数値 入力可能な最大値
rangeHTML5で追加

サンプルコード

<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席

...

*送信すると入力内容が表示されます。
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク