formのtype=”reset”の挙動について

input type=”reset”を使うことがあまりなかったので知らなかったのですが、リセットの挙動がイメージと違うことがあったのでメモ。

サンプルコード

まずはリセットボタン付きのフォームを作ってみます。

<form action="./" method="post">
	<dl class="form_item">
		<dt class="form_key">お名前</dt>
		<dd class="form_value">
			<input type="text" />
		</dd>
	</dl>

〜 中略 〜

	<dl class="form_item">
		<dt class="form_key">メッセージ</dt>
		<dd class="form_value">
			<textarea></textarea>
		</dd>
	</dl>
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>

フォームを適当に入力してからリセットボタンを押すと、入力した値がリセットできました。
リセットボタンのデモページ

次にフォームに初期値がある場合です。

<form action="./" method="post">
	<dl class="form_item">
		<dt class="form_key">お名前</dt>
		<dd class="form_value">
			<input type="text" value="田中" />
		</dd>
	</dl>

〜 中略 〜

	<dl class="form_item">
		<dt class="form_key">メッセージ</dt>
		<dd class="form_value">
			<textarea>メッセージ本文です。</textarea>
		</dd>
	</dl>
	<input type="submit" value="送信">
	<input type="reset" value="リセット">
</form>

フォームの初期値を適当に変更してからリセットボタンを押すと、イメージだと各値が空にリセットされると思っていたのですが、初期値に戻るようでした。
初期値がある場合のリセットボタンのデモページ

値を空にしたい場合、JavaScriptで値を空にするなどの実装が必要なようです。