1. بنية النموذج الأساسية (HTML Form Structure)
المهمة: إنشاء وعاء لجمع بيانات المستخدم وتحديد وجهتها.
الشرح التفصيلي:
أي نموذج يبدأ بـ <form>. أهم خاصيتين هما:
action: عنوان الرابط (URL) اللي هيستلم البيانات.method: الطريقة (GET للبيانات البسيطة، أو POST للبيانات الحساسة).
الكود البرمجي:
<form action="/submit-data" method="POST">
<label>الاسم:</label>
<input type="text" name="username" required>
<button type="submit">إرسال</button>
</form>
النتيجة:
صندوق نصي يرفض الإرسال إذا كان فارغاً بفضل كلمة required، وعند الضغط على الزر يتم توجيه المتصفح للرابط المذكور في action.
2. أنواع المدخلات الذكية (Input Types)
المهمة: إجبار المستخدم على إدخال نوع محدد من البيانات (إيميل، رقم، تاريخ).
الشرح التفصيلي:
بدلاً من استخدام type="text" لكل شيء، نستخدم أنواعاً مخصصة تجعل المتصفح يساعدنا في التحقق:
- Email: يتأكد من وجود علامة @.
- Number: يمنع كتابة الحروف ويظهر أزرار زيادة ونقصان.
- Range: يظهر "منزلق" (Slider) لاختيار قيمة بين رقمين.
الكود البرمجي:
<input type="email" placeholder="بريدك الإلكتروني">
<input type="number" min="1" max="100">
<input type="range" id="volume" min="0" max="10">
النتيجة:
المتصفح سيظهر لوحة مفاتيح مخصصة للأرقام في الموبايل، وسيعترض فوراً إذا كتب المستخدم نصاً لا يحتوي على صيغة بريد إلكتروني.
3. التحقق المخصص (Custom JS Validation)
المهمة: منع إرسال النموذج برمجياً وفحص البيانات بشروط معقدة.
الشرح التفصيلي:
نستخدم addEventListener لمراقبة لحظة الإرسال، ثم preventDefault() لإيقاف العملية مؤقتاً حتى نتأكد من جودة البيانات.
الكود البرمجي:
const myForm = document.querySelector('form');
myForm.addEventListener('submit', (event) => {
const inputVal = document.getElementById('user').value;
if (inputVal.length < 5) {
event.preventDefault(); // إيقاف الإرسال
alert("خطأ: الاسم قصير جداً!");
} else {
console.log("تم التحقق بنجاح");
}
});
النتيجة:
عند محاولة إرسال اسم أقل من 5 حروف، ستظهر رسالة تنبيه للمستخدم ولن يتم تحديث الصفحة أو إرسال البيانات، مما يحسن تجربة المستخدم ويحمي السيرفر.
4. الحارس القوي (RegEx Validation)
المهمة: مطابقة البيانات مع "نمط" محدد (مثل رقم موبايل يبدأ بـ 01).
الشرح التفصيلي:
الـ RegEx هي لغة رموز. مثلاً الرمز /^\d{11}$/ يعني: "يجب أن يكون النص أرقاماً فقط وطوله بالضبط 11 رقماً".
الكود البرمجي:
const phonePattern = /^[0-9]{11}$/;
const userPhone = "01234567890";
if (phonePattern.test(userPhone)) {
console.log("رقم الهاتف صحيح");
} else {
console.error("الرقم غير صالح");
}
النتيجة:
هذا الكود سيسمح فقط بالأرقام التي تتكون من 11 خانة، مما يضمن أن المستخدم أدخل رقم هاتف حقيقياً قبل محاولة التسجيل.
اختبار مهارات النماذج 🧠
جاوب على الأسئلة التالية لتثبيت معلوماتك: