はじめに
今回は、JavaScriptを活用して色んな入力フォームを制作してみました。実務で使えるよう実装していきます。
年齢入力フォーム
See the Pen 年齢入力フォーム by Uka Suzuki (@uukasuzuki_) on CodePen.
JavaScriptのコード解説
document.getElementById("ageForm").addEventListener("submit", function (event) {
event.preventDefault();
- ageFormというIDを持つフォームが送信される時にsubmitイベントを監視します。
- event.preventDefault()で、フォームのデフォルトの送信動作（ページの再読み込みなど）を防ぎます。
const ageInput = document.getElementById("age").value;
const message = document.getElementById("message");
- ageというIDを持つ入力フィールドから、ユーザーが入力した値（年齢）を取得します。
- messageというIDを持つ要素に対して、メッセージを表示するためにその要素を取得します。
if (ageInput === "") {
message.textContent = "年齢を入力してください。";
message.style.color = "red";
} else if (isNaN(ageInput) || ageInput < 0) {
message.textContent = "有効な年齢を入力してください。";
message.style.color = "red";
} else if (ageInput < 18) {
message.textContent = "18歳未満は参加できません。";
message.style.color = "red";
} else {
message.textContent = "参加できます！";
message.style.color = "green";
}
- 年齢未入力 (ageInput === "")
年齢が空白の場合、「年齢を入力してください」という赤いメッセージを表示します。
- 無効な年齢（数値ではない、または負の数） (isNaN(ageInput) || ageInput < 0)
数値ではない入力や負の数の場合、「有効な年齢を入力してください」というメッセージが赤で表示されます。
- 18歳未満 (ageInput < 18)
年齢が18歳未満の場合、「18歳未満は参加できません」というメッセージが赤で表示されます。
- 18歳以上
18歳以上の有効な年齢の場合、「参加できます！」という緑色のメッセージが表示されます。
ユーザー情報の入力フォーム
See the Pen ユーザー情報の入力フォーム by Uka Suzuki (@uukasuzuki_) on CodePen.
JavaScriptのコード解説
// フォームの送信イベントを監視
document.getElementById("userForm").addEventListener("submit", function(event) {
event.preventDefault();
- userFormというIDを持つフォームが送信される時、submitイベントを監視します。
- event.preventDefault() はフォームのデフォルトの送信動作（ページのリロードなど）を防ぎ、JavaScriptでカスタム処理を行うために使われます。
// ユーザーの入力を取得
const nameInput = document.getElementById("name").value;
const emailInput = document.getElementById("email").value;
const ageInput = document.getElementById("age").value;
const resultMessage = document.getElementById("resultMessage");
- nameInput には、nameというIDを持つ入力フィールドから取得した名前が入ります。
- emailInput には、emailというIDを持つメールアドレス入力フィールドの値が入ります。
- ageInput は、ageというIDを持つ年齢入力フィールドの値です。
- resultMessage は、メッセージを表示するためのHTML要素を取得しています。
// 入力の検証
if (nameInput === "" || emailInput === "" || ageInput === "") {
resultMessage.textContent = "すべてのフィールドに入力してください。";
resultMessage.style.color = "red";
- いずれかの入力フィールドが空白の場合、エラーメッセージとして「すべてのフィールドに入力してください」と表示し、メッセージを赤色にします。
} else if (isNaN(ageInput) || ageInput <= 0) {
resultMessage.textContent = "有効な年齢を入力してください。";
resultMessage.style.color = "red";
- ageInput が数値でない (isNaN(ageInput)) または年齢が0以下の場合、年齢が無効と判断し、「有効な年齢を入力してください」というメッセージを赤色で表示します。
// 正常な入力の場合
} else {
resultMessage.textContent = `名前: ${nameInput}, メール: ${emailInput}, 年齢: ${ageInput} で送信されました。`;
resultMessage.style.color = "green";
}
- すべてのフィールドが正しく入力されている場合、ユーザーが入力した内容を表示し、「送信されました」というメッセージを緑色で表示します。
まとめ
今回は、入力フォームについて制作しました。次回は、スクロールアニメーションを制作していきます。