はじめに

今回は、自分のポートフォリオサイトで使う目的があるため、お問い合わせフォームを作っていきます。

全体のコード解説

See the Pen Webサイトでよく見るお問い合わせフォームの作り方 by Uka Suzuki (@uukasuzuki_) on CodePen.

HTML5のコード解説

<form action="submit" method="post">
<table>～</table>

actionは、フォームが送信される先のURLを指定します。この場合、submitというエンドポイントにデータが送信されます。methodは、フォーム送信時のHTTPメソッドを指定します。postはデータを非表示で送信するため、セキュリティの観点からも一般的に使用されます。

フォーム内の要素をテーブルで整然と配置するために使用されています。

<tr>
  <td>
    <label for="name">氏名</label>
    <input type="text" id="name" name="name" placeholder="お名前" />
  </td>
  ...
</tr>

labelは、各入力フィールドに関連するラベルを定義します。for属性は、対応する入力フィールドのidと関連付けられています。

inputは、ユーザーがデータを入力するためのフィールドです。typeは、入力の種類（テキスト、メールアドレスなど）を指定し、idは各フィールドの一意の識別子です。また、nameはフォーム送信時にサーバー側で使用されるフィールド名です。

<tr>
  <td>
    <label for="message">お問い合わせ内容</label>
    <textarea id="message" name="message" placeholder="お問い合わせ内容"></textarea>
  </td>
</tr>

textareaは、複数行のテキスト入力を受け付けるためのフィールドです。ユーザーが詳しい内容を記入できます。

JavaScriptのコード解説

document.addEventListener("DOMContentLoaded", function () {

DOMContentLoadedとは、DOMが完全に読み込まれた後に実行されるイベントです。これにより、スクリプトが実行される前にHTMLが完全に構築されていることが保証されます。

const form = document.querySelector("form");

querySelectorは、ページ内の最初の要素を取得します。この要素に対して後でイベントリスナーを設定します。

form.addEventListener("submit", function (event) {

submitは、フォームが送信されるときに発生するイベントです。ここに処理を追加することで、送信前にカスタムロジックを実行できます。

event.preventDefault(); // フォームの送信を防ぐ

preventDefaultは、フォームが自動的に送信されるのを防ぎ、代わりにJavaScriptでの処理を行うことができます。

const name = document.getElementById("name").value;
const hurigana = document.getElementById("hurigana").value;
const tel = document.getElementById("tel").value;
const email = document.getElementById("email").value;
const emailConfirm = document.getElementById("email-confirm").value;
const message = document.getElementById("message").value;

getElementByIdは、各入力フィールドから値を取得します。これにより、ユーザーが入力した情報を利用できるようになります。

if (!name || !hurigana || !tel || !email || !emailConfirm || !message) {
  alert("すべてのフィールドを入力してください。");
  return;
}

if (email !== emailConfirm) {
  alert("メールアドレスが一致しません。");
  return;
}

すべてのフィールドが入力されているか確認します。空のフィールドがある場合は警告メッセージを表示し、処理を終了します。

メールアドレスの一致確認: 確認用のメールアドレスが最初のメールアドレスと一致しているかを確認します。一致しない場合は警告メッセージを表示します。

今後の課題

今後は、PHPを用いてお問い合わせ内容の送信ができるようになりたいです。

まとめ

今回は、お問い合わせフォームの基本的な作り方からまとめました。次回は、初級編で行ったハンバーガーメニューの開閉アニメーションをよりスムーズに動かしていきます。