作成日:2018-01-12, 更新日:2018-02-15
基本
基本、下記のどちらかだと思う。
・resetボタンを使う
・jqueryで中身をクリアさせる
「resetボタン」は値をクリアさせるわけじゃないので、注意が必要。
jqueryを使わない方法として「type=text」じゃなく「type=search」を使う方法もある。
type=search
「type=search」にするとinputタグのテキストフィールド内に「×」マークが表示され、クリアさせることが可能。
ただ・・・ブラウザによって対応していない。
サンプル:formのinputのテキストフィールドのクリアボタン
Chrome系に対応させる場合は、下記をCSSに追加
input[type="search"] { -webkit-appearance: searchfield; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: searchfield-cancel-button; }