HTMLのformで入力された値をクリアする

HTML

HTMLのformで入力された値をクリアする

HTMLのformで入力された値をクリアする方法はいくつかあります。
以下に、一般的な方法としてJavaScriptを使用した例を説明します。
これにより、フォーム内の全ての入力フィールドや選択フィールドをリセットできます。

HTMLファイル

まず、HTMLファイルにフォームを作成します。
ここでは、テキストフィールド、チェックボックス、ラジオボタン、選択リスト、そして送信ボタンを含むシンプルなフォームを例にします。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォームのリセット</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form id="test-form">
    <label for="test-text">テキスト:</label>
    <input type="text" id="test-text" name="test-text">

    <label for="test-checkbox">チェックボックス:</label>
    <input type="checkbox" id="test-checkbox" name="test-checkbox">

    <fieldset>
      <legend>ラジオボタン:</legend>
      <label>
        <input type="radio" name="test-radio" value="option1"> オプション1
      </label>
      <label>
        <input type="radio" name="test-radio" value="option2"> オプション2
      </label>
    </fieldset>

    <label for="test-select">選択リスト:</label>
    <select id="test-select" name="test-select">
      <option value="option1">オプション1</option>
      <option value="option2">オプション2</option>
    </select>

    <button type="button" onclick="resetForm()">リセット</button>
  </form>

  <script src="scripts.js"></script>
</body>
</html>

JavaScriptファイル (scripts.js)

次に、JavaScriptでフォームをリセットする関数を定義します。
resetFormという名前の関数を作り、フォームのリセット処理を実装します。

// scripts.js
function resetForm() {
  // フォームの要素を取得
  const form = document.getElementById('test-form');

  // フォームをリセットする
  form.reset();
}

CSSファイル (styles.css)

スタイルを定義するCSSファイルも用意しておくと、フォームの見た目を整えることができます。
ここでは簡単なスタイルを示しますが、特に必須ではありません。

/* styles.css */
body {
  font-family: Arial, sans-serif;
}

form {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-top: 10px;
}

input, select {
  margin-top: 5px;
}

button {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

説明

1. HTML:
formタグ内に様々な入力フィールド（テキストフィールド、チェックボックス、ラジオボタン、選択リスト）を配置し、button要素でonclick属性を使ってresetForm関数を呼び出します。

2. JavaScript:
resetForm関数は、フォームのresetメソッドを呼び出し、全ての入力フィールドの値を初期状態に戻します。

この方法により、ユーザーが「リセット」ボタンをクリックすることで、フォーム内の全てのフィールドがクリアされ、初期状態に戻ります。