HTMLのformでキャンセルボタンを実装

HTML

HTMLのformでキャンセルボタンを実装

HTMLのフォームにキャンセルボタンを実装する方法を説明します。
キャンセルボタンを追加することで、ユーザーがフォームへの入力をリセットしたり、フォームを閉じたりする操作を行えるようになります。
以下に、基本的なフォームとキャンセルボタンを実装する方法を示します。

HTMLファイル (form.html)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>フォームのキャンセルボタン</title>
</head>
<body>

  <form id="test-form" action="/submit" method="post">
    <label for="test-username">ユーザー名:</label>
    <input type="text" id="test-username" name="username">

    <label for="test-email">メールアドレス:</label>
    <input type="email" id="test-email" name="email">

    <div class="test-form-actions">
      <input type="submit" value="送信">
      <button type="button" id="test-cancel-button">キャンセル</button>
    </div>
  </form>

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

JavaScriptファイル (scripts.js)

document.getElementById('test-cancel-button').addEventListener('click', function() {
  if (confirm('フォームをキャンセルしてよろしいですか？')) {
    // フォームをリセットする場合
    document.getElementById('test-form').reset();

    // または、別のページにリダイレクトする場合
    // window.location.href = '/home';
  }
});

実装内容の説明

1. HTML:

  • form要素に対してid属性としてtest-formを設定し、action属性でフォームの送信先URLを指定します。
  • ユーザー名とメールアドレスの入力フィールドを作成し、それぞれidとname属性を設定します。
  • test-form-actionsクラスのdiv要素内に送信ボタンとキャンセルボタンを配置します。
  • キャンセルボタンにはbuttonタグを使用し、type属性をbuttonに設定して通常のボタンとして機能させます。

2. JavaScript:

  • test-cancel-buttonのクリックイベントをリスンし、キャンセルボタンがクリックされたときに確認ダイアログを表示します。
  • ユーザーが確認ダイアログで「OK」を選択した場合、フォームをリセット（全フィールドをクリア）するか、別のページにリダイレクトする処理を実行できます。

この実装により、ユーザーがフォームの入力をキャンセルする選択肢を提供できます。
また、ユーザー体験を向上させるために、キャンセルボタンの動作を柔軟にカスタマイズすることも可能です。