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でテキスト選択を不可・禁止にする方法

2023.01.26
1456
HTMLCSS jQuery

【簡単】モーダルウィンドウをCSS、jqueryで作る方法

更新日:2022.09.09
1317
プログラミング

埋め込み型のフォームメーラーで文字化けしてしまう場合の対処方法

2021.01.05
5462
WordPress プログラミング

Advanced Custom Fields Pro(ACFPRO)を使いオプションページを作成する方法

2022.04.22
3108