はじめに
今回は、自分のポートフォリオサイトで使う目的があるため、お問い合わせフォームを作っていきます。
全体のコード解説
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を用いてお問い合わせ内容の送信ができるようになりたいです。
まとめ
今回は、お問い合わせフォームの基本的な作り方からまとめました。次回は、初級編で行ったハンバーガーメニューの開閉アニメーションをよりスムーズに動かしていきます。