max属性

input要素のmax属性は、入力できる最大値を指定する属性。HTML5にて新たに導入された属性である。

ブラウザ対応

構文

数値入力欄

<input type="number" max="数値">

max属性に指定した数値よりも大きい数値は入力できなくなる。10を指定すると、入力欄には10以下の数値しか入力できない。

レンジ入力欄

<input type="range" max="数値">

max属性に指定した数値は、レンジ入力欄の最大値となる。

日付入力欄

<input type="date" max="YYYY-MM-DD">

【注意】 input要素のtype属性にdateを指定する日付入力欄に対応していないブラウザもある。

YYYY-MM-DD

YYYYには年、MMには月、DDには日付を指定する。

例： 2015:12:31、1990:01:01。

指定した日付より後の日付は入力できなくなる。2015:12:31を指定すると、2016:01:01は入力できない。

時間入力欄

<input type="time" max="hh:mm:ss">

【注意】 input要素のtype属性にtimeを指定する時間入力欄に対応していないブラウザもある。

hh:mm:ss

hhには時間、mmには分、ssには秒を指定する。

ssの秒は省略できる。省略すると、00秒となる。

24時間表記で指定する。

例： 01:22:33（1時22分33秒）、12:34:56（12時34分56秒）、15:00（15時0分0秒）。

指定した時間より後の時間は入力できなくなる。12:34:56を指定すると、12:34:57は入力できない。

max属性に対応しているinput要素のタイプ（type属性値）

date time number range

サンプルコード

数値入力欄

<input type="number" max="10">

レンジ入力欄

<input type="range" max="10">

日付入力欄

<input type="date" max="2015-12-31">

時間入力欄

<input type="time" max="12:34">

サンプル

HTMLソースコード

<form action="sample-input-min-max.php" method="post" target="_blank">
	<p>
		<label>
			数値入力欄：
			<input type="number" name="sampleNumber" min="-10" max="10">
		</label>
	</p>
	<p>
		<label>
			レンジ入力欄：
			<input type="range" name="sampleRange" min="-10" max="10">
		</label>
	</p>
	<p>
		<label>
			日付入力欄：
			<input type="date" name="sampleDate" min="2010-01-01" max="2015-12-31">
		</label>
	</p>
	<p>
		<label>
			時間入力欄：
			<input type="time" name="sampleTime" min="02:00" max="13:32">
		</label>
	</p>
	<p>
		<input type="submit">
	</p>
</form>

実際の表示