Written by Kasumi

【簡単】HTMLのformでリセットボタンを入れる方法

HTMLのformタグでお問い合わせフォームを作成している。

入力内容をリセットするボタンを導入したい。

本記事ではこのような悩みを解決します。

実装サンプル

See the Pen
Untitled
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

テキストボックスに内容を入れてリセットボタンを押すと入力された内容が削除されます。

導入方法は以下の通りです。

inputのtype属性でresetを入れる

<input type="reset">

リセットボタンの導入は至ってシンプル。

inputタグを入れてtype属性の値にresetを指定するだけでOK。

以上でリセットボタンの導入が完了です。

まとめ

JavaScript、jQueryなどは使わずHTMLのみで実装できます。

ぜひ参考にしてみてください。

以上で解説を終わります。

目次

関連記事

HTMLCSS プログラミング

【簡単CSS】横幅100%コンテンツを幅指定された中央寄せコンテンツの起点に合わせて左揃えにする方法

2022.04.08
523
プログラミング

Webテキストの日本語に含まれる役物を半角にする方法

2020.06.03
571
WordPress プログラミング

【Contact Form 7】Form data to kintoneでkintone側に二重送信されるのを防ぐ【確認画面が原因】

2022.03.17
549
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
679