HTMLのリセット(reset)ボタンで検索条件をクリアのときに、すでにデータがあるとクリアされない

html で検索フォーム

HTMLのFormで検索フォームを作ると、検索条件のリセットが欲しくなる。

とくにテストしているとリセットボタンが欲しくなる。

フォームのリセット

フォームのリセット、とても簡単です。HTMLの遺物を使えばいいんです。

<form action=search method=get>
<input type=search name=user value='' >
<input type=submit value=search>
<input type=reset value=reset >
</form>

とても簡単です、ボタンを一つおけばいいのですから

<input type=reset value=reset >

問題点：リセットはクリアじゃない

WEB側のCGI*1でHTMLを生成するとき

サーバー側でHTMLレンダリングを行っていると

<input type=search name=user value='takuya' >

サーバー側から送られた状態にリセットされます。

リセットボタンは、ユーザーの入力による変更を破棄であり、フォームのクリアではない。

解決策

input[type=search] を使えばいい。検索フォームに input[type=text] は使わない

なぜか？input[type=search] はMDNに記載があるように、ブラウザ側でフォームの値を持ち回してくれる。なんちうHTML要素だ。

phpなどでecho が不要になるのである。

<input type=search name=user value='<?php echo $cond;?>' >

これを使っておけば、input[value]は常に空っぽの状態になる。

*1:あえてこういう古い言いまわしをている