الدرس الحادي والعشرون: التعامل مع النماذج (Forms) وقراءتها باستخدام JavaScript

 في هذا الدرس سنتعلم كيف نتعامل مع النماذج (Forms) ونجمع البيانات المدخلة من المستخدم عند الضغط على زر الإرسال.

---

1. إنشاء نموذج HTML بسيط

<form id="myForm">
  <input type="text" id="username" placeholder="اسم المستخدم" required>
  <input type="email" id="email" placeholder="البريد الإلكتروني" required>
  <button type="submit">إرسال</button>
</form>

---

2. قراءة بيانات النموذج باستخدام JavaScript

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // يمنع إعادة تحميل الصفحة

  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;

  console.log("اسم المستخدم:", username);
  console.log("البريد الإلكتروني:", email);
});

---

3. عرض البيانات على الصفحة بدلاً من console

let form = document.getElementById("myForm");
form.addEventListener("submit", function(event) {
  event.preventDefault();

  let username = document.getElementById("username").value;
  let email = document.getElementById("email").value;

  let message = document.createElement("p");
  message.textContent = `أهلاً ${username}! بريدك هو: ${email}`;
  document.body.appendChild(message);
});

---

4. التحقق من إدخال البيانات (Validation)

يمكنك التحقق يدويًا باستخدام JavaScript:

if (username === "" || email === "") {
  alert("يرجى تعبئة جميع الحقول");
  return;
}

أو يمكنك الاعتماد على required في عناصر <input> كما في المثال الأول.

---

✅ ملخص الدرس:

المفهوم	الشرح
form.addEventListener("submit")	لالتقاط حدث الإرسال
event.preventDefault()	لمنع إعادة تحميل الصفحة بعد الضغط على "إرسال"
input.value	لجمع البيانات من حقل إدخال
document.createElement()	لعرض رسالة أو نتيجة على الصفحة