フォームの reset とは何か
フォームの reset は「フォーム内のすべての入力を“初期状態（HTMLで指定された値・選択）”に戻す」操作です。ここが重要です：reset は“現在値”ではなく“初期値”へ戻す機能。初期値は HTML 上の value/checked/selected などで決まり、ユーザー入力や JavaScript で変更した値は reset で破棄されます。
何が初期値か（defaultValue / defaultChecked / selected の関係）
テキスト・数値など（value と defaultValue）
<input id="name" name="name" value="太郎">
<script>
console.log(name.defaultValue); // "太郎"（初期値）
console.log(name.value); // 現在値（入力やJSで変わる）
// form.reset() は value を defaultValue に戻す
</script>
ここが重要です：フォームを reset すると、各 input の value は defaultValue に戻ります。HTMLに value を書かなかった場合の defaultValue は空文字です。
チェックボックス・ラジオ（checked と defaultChecked）
<input id="agree" type="checkbox" checked>
<script>
console.log(agree.defaultChecked); // true（初期選択）
console.log(agree.checked); // 現在の選択
// reset は checked を defaultChecked に戻す（true に戻る）
</script>
ここが重要です：checked は“現在”、defaultChecked は“初期”。reset は現在の checked を初期の defaultChecked に戻します。
セレクト（selected と初期選択）
<select id="country">
<option value="">選択してください</option>
<option value="JP" selected>日本</option>
<option value="US">アメリカ</option>
</select>
<script>
// reset は最初に selected の付いた option（ここでは JP）へ戻す
</script>
ここが重要です：HTMLで selected が付いた option が“初期選択”。複数選択（multiple）の場合も、初期に selected が付いている option 群に戻ります。
基本の使い方（イベント・プログラムからの reset）
ボタンで reset する（HTMLの標準）
<form id="f">
<input name="name" value="太郎">
<button type="reset">元に戻す</button>
</form>
ここが重要です：type=”reset” のボタンは、そのフォームの入力を一括で初期値へ戻します。ブラウザ標準の動作なので最も簡単です。
JavaScript から reset する
<form id="f">
<input name="name" value="太郎">
</form>
<script>
f.reset(); // プログラムで一括リセット
</script>
ここが重要です：フォーム要素の reset() を呼ぶだけで、同じ効果が得られます。送信前に“初期状態へ戻す”などの用途に使えます。
reset イベントをフックして確認する
<form id="f">
<input name="name" value="太郎">
</form>
<script>
f.addEventListener("reset", (e) => {
// 確認ダイアログを出したい場合など
if (!confirm("入力を初期状態に戻します。よろしいですか？")) {
e.preventDefault(); // リセットをキャンセル
}
});
</script>
ここが重要です：reset はイベントとして発火します。preventDefault() で“やっぱりやめる”を実装できます。
各入力タイプの挙動（覚えておくべきポイント）
テキスト・number・email など
- 現在の value が、HTMLの初期 value（defaultValue）へ戻ります。
- placeholder はヒントであり、reset の対象ではありません。
checkbox・radio
- 現在の checked が、HTMLの defaultChecked（checked 属性の有無）へ戻ります。
- ラジオは“同じ name の中で初期に checked の付いたもの”へ戻ります。どれも付いていないなら未選択へ。
select（single/multiple）
- 現在の選択が、初期に selected の付いている option 群へ戻ります。
- disabled な option は選択対象外のままです。
textarea
- 現在の value が、開始タグと終了タグの間の初期テキスト（または value 属性）へ戻ります。
file
- 選択中のファイルはクリアされ、未選択状態へ戻ります（初期値は「なし」）。
ここが重要です：reset は“HTMLで定義された初期状態に忠実に戻す”。初期状態を明確にしておくほど、リセット後の姿が期待通りになります。
“部分だけ”リセットしたい場合（パターンと注意）
特定フィールドだけ初期値に戻す
<input id="age" type="number" value="20">
<script>
// フォーム全体でなく、個別に戻す
age.value = age.defaultValue; // 20 に戻る
</script>
ここが重要です：個別フィールドは defaultValue（checkbox/radioなら defaultChecked）を使って、ピンポイントで初期に戻せます。
あるフィールドは保持して、他をリセット
<form id="f">
<input id="keep" value="残す値">
<input id="clear" value="消す値">
</form>
<script>
const keepValue = keep.value; // 退避
f.reset(); // 一括リセット
keep.value = keepValue; // 必要な項目だけ復元
</script>
ここが重要です：一括 reset の前に必要な値を退避し、リセット後に復元すると「部分保持＋全体リセット」が簡単に作れます。
初期状態の設計（リセットで破綻しないHTMLのコツ）
HTML側で“初期値”を明示する
<input name="email" value="a@example.com"> <!-- 初期値 -->
<input name="agree" type="checkbox" checked> <!-- 初期選択 -->
<select name="country">
<option value="" disabled selected>選択してください</option>
<option value="JP">日本</option>
</select>
ここが重要です：初期値・初期選択をHTMLに明記すれば、reset の“戻り先”が明確になり、意図しない未選択や空文字を防げます。
JSで初期状態を後から作るなら default を更新する
<input id="name">
<script>
name.value = "太郎"; // 表示上の初期状態
name.defaultValue = "太郎"; // reset の戻り先も揃える
</script>
ここが重要です：JSで初期状態を作ったのに defaultValue を更新しないと、reset 時に空へ戻ってしまうことがあります。表示と default を一致させると安全です。
よくある落とし穴と回避策
初期値を書いていない項目は reset で空／未選択に戻り、想定外の状態になることがあります。HTMLで初期状態を明示するか、JSで defaultValue/defaultChecked を合わせて更新してください。フォームを部分的に reset したいのに form.reset() を使うと“全部”戻ってしまうので、個別に defaultValue/checked を使うパターンに切り替えます。非同期で選択肢を差し替えた select は、“差し替え後の初期選択”を selected で明示しないと reset で意図しない項目に戻ることがあります。file 入力は reset でクリアされるため、必要なら選び直しの導線（再選択ボタン）を用意しましょう。
まとめ
フォームの reset は「現在の入力」を「HTMLで定義された初期状態」に戻す機能です。value と defaultValue、checked と defaultChecked、selected（初期選択）を正しく理解すると、戻り先がぶれません。全体リセットは form.reset()、部分は defaultValue/checked を使って個別に戻す。JSで初期状態を後から設定するなら default 系も更新して、reset と整合を取る。これらを押さえれば、初心者でも“意図通りに戻る”堅実なフォームリセットを実装できます。