الدرس 12 · الوحدة 4: بناء عناصر الواجهة الأمامية

النماذج وحقول الإدخال

نبني النماذج التي يكتب فيها الزائر بياناته: تسجيل، وبحث، وتواصل. ⏱ نحو 25 دقيقة.

بعد هذا الدرس ستستطيع أن:

تبني نموذجًا بـ form و action و method.
تختار نوع input المناسب لكل معلومة.
تستخدم أزرار الاختيار والمربعات والقوائم المنسدلة و textarea.
تربط label بالحقل وتضيف تحقق المتصفح.

١النموذج: طريقة الزائر ليكلمك

تسجيل الدخول، والبحث، والطلب، والتواصل… كلها نماذج. النموذج يبدأ بـ <form>، وفيه حقول، وزر إرسال:

<style>label{display:block;margin-top:8px;font-weight:bold}input,select,textarea{font:inherit;padding:5px;margin-top:3px}</style><form action="/register" method="post">  <label for="name">الاسم</label>  <input type="text" id="name" name="name">   <button type="submit">سجّل</button></form>

index.html

Console

اكتب اسمك واضغط «سجّل»: سيظهر تحت المعاينة ما كان سيُرسل إلى الخادم. معالجة البيانات في الخادم تتعلمها في مقرر الواجهات الخلفية.

الجزء	وظيفته
`action`	العنوان الذي تُرسل إليه البيانات.
`method`	`get` (تظهر في الرابط، للبحث) أو `post` (مخفية، للتسجيل وكلمات المرور).
`name`	اسم الحقل الذي يصل إلى الخادم. بلا name لا يُرسل الحقل!
`<label for>`	عنوان الحقل، يرتبط به عبر `id`. اضغط على كلمة «الاسم» نفسها: ينتقل المؤشر إلى الحقل.

٢أنواع حقول الإدخال

الوسم <input> واحد، والسمة type تغيّر نوعه. جرّبها في الجوال لترى لوحة المفاتيح تتغير:

<style>label{display:block;margin-top:8px;font-weight:bold}input,select,textarea{font:inherit;padding:5px;margin-top:3px}</style><label for="e">البريد</label><input type="email" id="e" placeholder="name@example.com"> <label for="p">كلمة المرور</label><input type="password" id="p"> <label for="a">العمر</label><input type="number" id="a" min="16" max="60"> <label for="d">تاريخ الميلاد</label><input type="date" id="d"> <label for="t">الجوال</label><input type="tel" id="t">

index.html

٣الاختيار والنص الطويل

<style>label{display:block;margin-top:8px;font-weight:bold}input,select,textarea{font:inherit;padding:5px;margin-top:3px}</style><p>الجنس:</p><input type="radio" id="m" name="gender" value="m"><label for="m" style="display:inline">ذكر</label><input type="radio" id="f" name="gender" value="f"><label for="f" style="display:inline">أنثى</label> <p><input type="checkbox" id="news" name="news"><label for="news" style="display:inline">أرسل لي الأخبار</label></p> <label for="city">المدينة</label><select id="city" name="city">  <option value="">اختر…</option>  <option value="ruh">الرياض</option>  <option value="jed">جدة</option></select> <label for="msg">رسالتك</label><textarea id="msg" name="msg" rows="3"></textarea>

index.html

أزرار الاختيار في مجموعة واحدة تحمل الاسم نفسه name="gender"؛ لذلك لا يُختار منها إلا واحد. و value هي القيمة التي تُرسل.

٤تحقق المتصفح قبل الإرسال

بسمات بسيطة يمنع المتصفح إرسال النموذج إذا كانت البيانات ناقصة أو خاطئة، دون أن تكتب سطرًا من البرمجة:

<style>label{display:block;margin-top:8px;font-weight:bold}input,select,textarea{font:inherit;padding:5px;margin-top:3px}</style><form>  <label for="u">اسم المستخدم (إجباري)</label>  <input id="u" name="u" required minlength="3">   <label for="m">البريد</label>  <input type="email" id="m" name="m" required>   <button>إرسال</button></form>

index.html

Console

السمة	معناها
`required`	الحقل إجباري.
`minlength` و `maxlength`	أقل وأكثر عدد من الحروف.
`min` و `max`	أقل وأكبر قيمة للأرقام والتواريخ.
`placeholder`	مثال باهت داخل الحقل.

اضغط «إرسال» والحقول فارغة: يظهر تنبيه المتصفح. لكن انتبه: تحقق المتصفح لا يغني عن تحقق الخادم، فالمخترق يستطيع تجاوزه.

توقّع وتحقّق

أي سمة تربط label بالحقل؟

for="name" و id="name".

حقل كلمة المرور:

يُخفي الحروف بنقاط.

كيف نجعل الحقل إجباريًّا؟

سمة required.

ثلاثة أزرار اختيار لا يُختار منها إلا واحد. ما شرطها؟

المجموعة تُعرف بالاسم.

الخلاصة

form يجمع الحقول، و action وجهة الإرسال، و method طريقته.
بلا name لا يصل الحقل، و label for يرتبط بـ id الحقل.
type يغيّر الحقل: text و email و password و number و date و radio و checkbox.
required و minlength و min و max تحقق في المتصفح، ولا تغني عن تحقق الخادم.

تحدٍّ برمجي: نموذج التسجيل في دورة

متوسط

اكتب نموذج تسجيل في دورة بمركز التدريب. جرّب الإرسال في المعاينة لترى البيانات التي تصل.

المطلوب:

حقل الاسم: نص، وإجباري.
حقل البريد: من نوع email، وإجباري.
قائمة منسدلة select لاختيار الدورة (3 خيارات على الأقل).
زرّا اختيار للفترة: صباحية أو مسائية (بالاسم نفسه).
مربع نص textarea للملاحظات.
لكل حقل name، ولكل حقل label مرتبط به.
زر إرسال.

👀 اعرض شكل الناتج المطلوب

الناتج المطلوب

✓ التحقق الآلي من حلّك:

حقل نص إجباري للاسم.
حقل email إجباري.
select فيه 3 خيارات على الأقل.
زرّا اختيار radio بالاسم نفسه.
textarea للملاحظات.
كل الحقول لها name، وكل حقل له label مرتبط (for = id).
زر إرسال داخل form.

💡 تلميح 1

كل حقل يحتاج ثلاثة أشياء: id و name و label for.

💡 تلميح 2

زرّا الاختيار: name="time" لكليهما، و value مختلفة.

حاول بنفسك أولًا؛ للمسألة أكثر من حلّ صحيح.

<style>label{display:block;margin-top:8px;font-weight:bold}input,select,textarea{font:inherit;padding:5px;margin-top:3px}</style><form action="/register" method="post">  <label for="name">الاسم</label>  <input type="text" id="name" name="name" required>   <label for="email">البريد</label>  <input type="email" id="email" name="email" required>   <label for="course">الدورة</label>  <select id="course" name="course">    <option value="py">بايثون</option>    <option value="web">تطوير الويب</option>    <option value="db">قواعد البيانات</option>  </select>   <p>الفترة:</p>  <input type="radio" id="am" name="time" value="am">  <label for="am">صباحية</label>  <input type="radio" id="pm" name="time" value="pm">  <label for="pm">مسائية</label>   <label for="notes">ملاحظات</label>  <textarea id="notes" name="notes"></textarea>   <button type="submit">سجّلني</button></form>

انتقل إلى تقييم الدرساختيار من متعدد، وصح وخطأ، وأكمل الفراغ، وتتبّع الناتج.ابدأ التقييم ←