【簡単】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のみで実装できます。

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

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

Ads

関連記事

WordPress プログラミング

【ワードプレス】親子カテゴリ・親子ターム順にリンクリストを自動で表示する方法

更新日:2022.05.31
246
WordPress プログラミング

【ACFプラグイン】Advanced Custom Fieldsの使い方・出力方法を紹介

2022.03.20
55
プログラミング

【簡単】ベーシック認証が設定されてるサイトのログパス解除URLを発行し、共有する方法

2022.02.01
11
JavaScript プログラミング

iframeで埋め込みしたユーチューブをiframe外で停止させる方法。

更新日:2021.01.02
344