value属性

input要素のvalue属性は、input要素の値を指定する属性。テキスト入力欄などにおいては初期入力値、チェックボックスやラジオボタンにおいては選択した時にだけ送信する値、送信ボタンなどにおいてはボタン名を表す。

ブラウザ対応

構文

<input value="値">

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

text search tel url email password date time number range color checkbox radio file submit image reset button hidden

サンプルコード

１行テキスト入力欄

<input value="値">

<input type="text" value="値">

value属性値は、初期入力値となる。

日付入力欄

<input type="date" value="2014-05-15">

value属性値は、初期入力値となる。

日付入力欄のvalue属性値は、YYYY-MM-DDの形式で入力する。

YYYY-MM-DD

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

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

時間入力欄

<input type="time" value="12:34:56">

value属性値は、初期入力値となる。

時間入力欄のvalue属性値は、hh:mm:ssの形式で入力する。

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秒）。

カラー入力欄

<input type="color" value="#ff0000">

value属性値は、初期入力値となる。

チェックボックス

<label>
	チェックボックス：
	<input type="checkbox" value="値">
</label>

value属性値は、そのチェックボックスを選択した時にだけ送信する値。

ラジオボタン

<label>
	ラジオボタンＡ：
	<input type="radio" name="sample" value="値Ａ">
</label>
<br>
<label>
	ラジオボタンＢ：
	<input type="radio" name="sample" value="値Ｂ">
</label>

value属性値は、そのラジオボタンを選択した時にだけ送信する値。

送信ボタン

<input type="submit" value="送信">

value属性値は、送信ボタン名となる。

リセットボタン

<input type="reset" value="リセット">

value属性値は、リセットボタン名となる。

サンプル

HTMLソースコード

<form action="sample-input-value.php" method="post" target="_blank">
	<p>
		<label>
			１行テキスト入力欄：
			<input type="text" name="sampleText" value="サンプル">
		</label>
	</p>
	<p>
		<label>
			日付入力欄：
			<input type="date" name="sampleDate" value="2014-05-15">
		</label>
	</p>
	<p>
		<label>
			時間入力欄：
			<input type="time" name="sampleTime" value="12:34">
		</label>
	</p>
	<p>
		<label>
			数値入力欄：
			<input type="number" name="sampleNumber" value="50">
		</label>
	</p>
	<p>
		<label>
			レンジ入力欄：
			<input type="range" name="sampleRange" value="50">
		</label>
	</p>
	<p>
		<label>
			カラー入力欄：
			<input type="color" name="sampleColor" value="#ff0000">
		</label>
	</p>
	<p>
		<label>
			チェックボックス：
			<input type="checkbox" name="sampleCheckbox" value="チェックボックスの値" checked>
		</label>
	</p>
	<p>
		<label>
			ラジオボタンＡ：
			<input type="radio" name="sampleRadio" value="ラジオボタンＡ" checked>
		</label>
		<br>
		<label>
			ラジオボタンＢ：
			<input type="radio" name="sampleRadio" value="ラジオボタンＢ">
		</label>
	</p>
	<p>
		<input type="hidden" name="sampleHidden" value="隠しデータ">
		<input type="submit" value="送信ボタン">
		<input type="reset" value="リセットボタン">
	</p>
</form>

実際の表示