في هذا الدرس 7تصفّح المواضيع
تمثل خاصية name المفتاح الجوهري لتعريف بيانات النموذج عند نقلها عبر بروتوكول HTTP للخادم. فعند إرسال النموذج، يجمع المتصفح فقط الحقول التي تمتلك خاصية name صريحة وغير فارغة، ليحولها إلى أزواج من المفاتيح والقيم في حمولة الطلب الشبكي.
HTML
<form action="/api/users" method="post">
<label for="usr">Account Name</label>
<input type="text" id="usr" name="account_name" required>
<button type="submit">Save</button>
</form>تحدد خاصية id معرفاً فريداً ومستقلاً للعنصر ضمن صفحة HTML كاملة. وعلى خلاف خاصية name، فإن قيمة id مخصصة لبيئة المتصفح فقط ولا يتم إرسالها إطلاقاً في طلبات الشبكة للخادم. ويتمثل دورها المحوري في نماذج الويب في ربط الحقل بوسم التسمية label المقابل.
HTML
<!-- The for attribute matches the input id uniquely -->
<label for="clientEmail">Email Address</label>
<input type="email" id="clientEmail" name="email">تحدد خاصية value سلسلة البيانات المخزنة فعلياً داخل حقل الإدخال. وعند كتابتها في بنية وسم HTML المبدئية، فإنها تعين القيمة الافتراضية التي تظهر للمستخدم فور تحميل الصفحة، وهي ذاتها القيمة التي يستعيدها المتصفح عند تفعيل زر إعادة الضبط.
HTML
<label for="country">Country</label>
<input type="text" id="country" name="country"
value="Saudi Arabia">توفر خاصية placeholder تلميحاً بصرياً مؤقتاً لمساعدة المستخدم في استيعاب التنسيق المطلوب للبيانات، مثل كتابة نموذج لرقم الهاتف أو البريد. ويظهر هذا التلميح بلون خافت ويختفي تلقائياً فور أن يكتب المستخدم أي حرف داخل الحقل.
HTML
<label for="searchQuery">Search Documentation</label>
<input type="search" id="searchQuery" name="q"
placeholder="e.g. flexbox layout">أتاحت لغة HTML قديماً خصائص مدمجة للتحكم في أبعاد الحقل المرئية مباشرة في الوسم. تحدد خاصية size العرض المرئي لحقول النصوص مقاساً بعدد الأحرف المتوسطة، بينما تطبق خاصيتا width و height خصيصاً على أزرار الإرسال الصورية لتحديد أبعاد الصورة.
HTML
<label for="zip">Postal Code:</label>
<input type="text" id="zip" name="postal_code" size="6">لبناء نماذج متينة واحترافية، يجب على المطور استيعاب التمايز الدقيق بين الخصائص الأربع الجوهرية: name و id و value و placeholder. حيث تعمل كل خاصية في طبقة مستقلة تماماً ضمن معمارية التطبيق، بدءاً من شجرة DOM والإتاحة وحتى طلبات الشبكة.
يوضح الجدول المقارن التالي الحدود التشغيلية والنطاق التقني الدقيق لكل خاصية أساسية في حقول الإدخال:
| الخاصية | الدور الأساسي | النطاق والتفرد | الإرسال في طلب HTTP | وظيفة الإتاحة والتفاعل |
|---|---|---|---|---|
| name | مفتاح البيانات للخادم | مشترك أو مكرر للمجموعات | ترسل كمفتاح في الطلب | تجميع حقول الراديو |
| id | معرف فريد في الصفحة | فريد مطلقاً في الصفحة | لا ترسل للخادم مطلقاً | ربط وسم label بالحقل |
| value | البيانات الفعلية للحقل | قيمة نصية للحقل | ترسل كقيمة مرافقة للاسم | تمثل قيمة الإدخال الحالية |
| placeholder | تلميح إرشادي مؤقت | نص توضيحي بصري | لا ترسل للخادم مطلقاً | مساعدة بصرية تختفي بالكتابة |
يمثل الجمع الصحيح بين خصائص name و id وعناصر التسمية label حجر الزاوية لبناء واجهات ويب سهلة الصيانة وعالية الإتاحة. يتيح لك المختبر التفاعلي أدناه تجربة تعديل هذه الخصائص وملاحظة تأثيرها المباشر على نقل البيانات والتركيز.
خلاصة المعرفة ومحطة الانتقال
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
ملخص الدرس: أتقنت في هذا الدرس التعامل مع الخصائص الأساسية لحقول الإدخال: مفتاح البيانات name، ومعرف الربط id، والقيمة المبدئية value، وتلميح الاستخدام placeholder، وخصائص الأبعاد، والتكامل بين أدوار المتصفح والخادم. الخطوة التالية: سنستكشف الخصائص الثانوية للتحقق والتقييد مثل required و readonly و disabled.
رحلتك في الدرس
—سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
ابنِ لغتك البرمجية
المصطلحات5
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 5 مفهومةأول بطاقة، أول خطوة
- 01 name Attribute خاصية name
- الخاصية التي تحدد اسم المعامل المرسل مع بيانات النموذج في طلبات الشبكة.
- للمراجعة
- 02 id Attribute خاصية id
- معرف فريد على مستوى الصفحة يربط الحقل بالتسمية والشيفرات البرمجية.
- للمراجعة
- 03 value Attribute خاصية value
- الخاصية التي تحمل القيمة النصية المبدئية أو المدخلة لحقل الإدخال.
- للمراجعة
- 04 placeholder Attribute خاصية placeholder
- تلميح بصري مؤقت يظهر داخل الحقل الفارغ لبيان التنسيق المتوقع للبيانات.
- للمراجعة
- 05 size Attribute خاصية size
- خاصية قديمة في HTML تحدد العرض المرئي للحقل النصي بعدد الأحرف المتوسطة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
حروف قليلة. معنى كامل.
الاختصارات3
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
0 / 3 مفهومةأول بطاقة، أول خطوة
- 01 DOM شجرة العناصر
- Document Object Model
- البنية الهيكلية البرمجية التي تمثل عناصر وثيقة HTML داخل المتصفح.
- للمراجعة
- 02 HTTP إتش تي تي بي
- Hypertext Transfer Protocol
- بروتوكول الاتصال الشبكي الأساسي الذي ينقل حمولة بيانات النماذج للخوادم.
- للمراجعة
- 03 UX تجربة المستخدم
- User Experience
- التجربة الإجمالية وسهولة التفاعل التي يشعر بها المستخدم أثناء التعامل مع الواجهة.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
من الفهم للتطبيق
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
0/4مهام منجزة
-
أنشئ حقل إدخال مرتبطاً بوسم label دلالي باستخدام خاصية for المطابقة لمعرف id.
-
افحص نموذجاً يفتقر لخاصية name وتأكد من أن حمولة الشبكة تسقط الحقل تماماً عند الإرسال.
-
حول نموذجاً يعتمد كلياً على placeholder إلى بنية دلالية متاح تحتوي وسوم label ظاهرة.
-
طور نموذجاً قديماً بحذف خاصية size وتطبيق خصائص العرض المتجاوبة باستخدام لغة CSS.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
مساحة التحدي
اختبر فهمك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
10أسئلة
1أنواع تحديات
100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.