“input”要素~“value”属性

“value”属性について

“value”属性は“input”要素で表される入力欄がフォームで送信する値の初期値を指定する属性です。

ウェブページを読み込んだ時に“value”属性の値が入力欄に記入された状態で表示されます。ユーザーが入力値を編集しなかった場合はvalue”属性の値がそのまま“name”属性の値とともに送信されます。

“type”属性の値によっては“value”属性に指定できる値の書式に制約があります。

テキスト形式の入力欄(“type="text"”や“type="tel"”など)の場合、ユーザーが入力値を編集する場合に初期値を削除しなければならないため、入力のヒントなどのフォームで送信しなくてよいテキストを入力欄に含ませる場合は“placeholder”属性を使用するべきです。

チェックボックス(“type="checkbox"”)とラジオボタン(“type="radio"”)は選択された“input”要素のvalue”属性の値がそのまま“name”属性の値とともに送信されます。チェックボックスとラジオボタンの“value”属性を省略している場合の既定値は“on”です。

送信ボタン(“type="submit"”)とリセットボタン(“type="reset"”)、汎用的なボタン(“type="button"”)はvalue”属性の値がボタンのラベルとして表示されます。送信ボタンとリセットボタンはvalue”属性を省略した場合もブラウザのデフォルトのラベルがつけられます。汎用的なボタンは“value”属性が必須属性です。

“type”属性の値が“file”、“image”である場合は“value”属性を指定してはいけません。

指定できる値

“type”属性	“value”属性
値	説明	値	説明
hidden	フォームで送信する値の初期値	テキスト	フォームで送信する値の初期値
text
search
tel
url		URL	妥当な形式のURL
email		メールアドレス	妥当な形式のメールアドレス
password		テキスト	フォームで送信する値の初期値
date		日付	機械可読な形式の日付(“YYYY-MM-DD”)
month		月	機械可読な形式の月(“YYYY-MM”)
week		週	機械可読な形式の週(“yyyy-Www”)
time		時刻	機械可読な形式の時刻(“hh:mm”もしくはhh:mm:ss”)
datetime-local		日時	機械可読な形式の日時(“yyyy-MM-ddThh:mm”)
number		数値	数値
range
color		色	16進数カラーコード(“#rrggbb”)
checkbox	フォームで送信される値	文字列	フォームで送信される値
radio
submit	ボタンに表示されるラベル、フォームで送信される値	テキスト	ボタンに表示されるラベル、フォームで送信される値
reset	ボタンに表示されるラベル	テキスト	ボタンに表示されるラベル
button

サンプルコード

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

<fieldset>

<p><label>好きな動物は？：<input type="text" name="animal" value="猫"></label></p>
<fieldset>

<legend>どのくらい好き？</legend>
<p>

<label><input type="radio" name="like" value="level1">好き</label>
<label><input type="radio" name="like" value="level2">とても好き</label>
<label><input type="radio" name="like" value="level3">愛している</label>

</p>

</fieldset>
<p><input type="button" value="クリックしてください" onclick="alert('meow')"></p>

</fieldset>
<p>

<input type="submit" value="送信する">
<input type="reset" value="入力内容をリセット">

</p>

</form>

好きな動物は？：

どのくらい好き？

好き とても好き 愛している

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