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】簡単にアニメーションを実装! Animate.cssの使い方

更新日:2019.11.28
805
HTMLCSS

HTMLで前のページ・次のページへ戻るリンクボタンを実装する方法

2022.06.30
11318
HTMLCSS

【CSS】要素を囲ってるタグの存在を消す方法

2023.04.19
1272
プログラミング

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

2021.01.05
5540