جاري التحميل...
عناصر نموذج HTML
سمات النموذج ضبطت وسم form نفسه. عناصر النموذج هي القطع داخله — تسميات ومناطق نص وقوائم وأزرار وتجميع. هذه الحصة ترسم الأدوات الشائعة. أنواع input لاحقاً.
لماذا عناصر النموذج مهمة
نموذج عارٍ بسمات فقط لا يجمع إجابات. المستخدم يحتاج عناصر تحكم. اختيار textarea بدل input سطري أو select بدل نص حر يغيّر الاستخدام والبيانات.
إجابة مباشرة
1) اربط كل تحكم ظاهر بـ label. 2) input لكثير من الحقول السطرية. 3) textarea للنص متعدد الأسطر. 4) select+option لقائمة ثابتة. 5) button للإجراء. 6) fieldset+legend للمجموعة. action/method على form الخارجي.
📊 Common form pieces
| Element | Role | Beginner tip |
|---|---|---|
| label | Names a control for humans and assistive tech | Match for= to the control id |
| input | Single-line text, email, checks, radios, … | Types catalog is the next lesson |
| textarea | Multi-line text | Prefer over input for bios and messages |
| select / option | Choose from a fixed list | Each option needs a value |
| button | submit, reset, or generic action | Default in a form is often submit — set type explicitly |
| fieldset / legend | Group related controls with a title | legend is the accessible group name — not a plain div |
fieldset ملف شخصي بتحكمات مختلطة
محرر ملف صغير: مجموعة واحدة وسيرة متعددة الأسطر ومستوى من قائمة وزر حفظ.
<form action="/profile" method="post">
<fieldset>
<legend>Profile</legend>
<label for="bio">Bio</label>
<textarea id="bio" name="bio" rows="4"></textarea>
<label for="level">Level</label>
<select id="level" name="level">
<option value="beginner">Beginner</option>
<option value="middle">Middle</option>
<option value="advanced">Advanced</option>
</select>
<button type="submit">Save</button>
</fieldset>
</form>
قراءة مثال الملف
- fieldset+legend تسمّي المجموعة
- textarea أنسب للسيرة
- select/option يقيّدان المستوى
- لكل تحكم id وname
- submit يرسل النموذج
- action/method من الدرس السابق
تفضيلات: راديو وأنواع الأزرار
أحياناً الإجابة خيار حصري. أزرار الراديو تشترك في name. أبقِ label على كل خيار. قارن submit مع reset وbutton.
<form action="/prefs" method="post">
<fieldset>
<legend>Theme</legend>
<label>
<input type="radio" name="theme" value="light" checked>
Light
</label>
<label>
<input type="radio" name="theme" value="dark">
Dark
</label>
</fieldset>
<button type="submit">Save prefs</button>
<button type="reset">Clear</button>
</form>
قراءة مثال التفضيلات
- الراديوهات بنفس name مجموعة واحدة
- تغليف الراديو بـ label يجعل النص قابلاً للنقر
- legend تعنون Theme
- submit يرسل؛ reset يمسح — ليس حفظاً
- بقية أنواع input لاحقاً
اختيار التحكم المناسب
- إجابة قصيرة/بريد/كلمة مرور: input
- نص طويل: textarea
- اختيار من قائمة: select أو راديو
- تجميع قسم: fieldset+legend
- سمِّ كل تحكم: label
- إرسال: button type=submit
تمرين — تجميع عناصر النموذج
- انسخ ملف التعريف؛ غيّر legend وأضف option
- استبدل textarea مؤقتاً بـ input
- fieldset ثانٍ لملاحظات الاتصال
- راديو السمة؛ انقر التسميات
- Clear ثم Save
- انقل تحكماً خارج form
- جملة: عناصر النموذج تحكمات مسمّاة داخله؛ السمات على form طبقة أخرى
أخطاء شائعة
- تحكم بلا label
- عنوان div بدل legend
- submit أو حقول خارج form
- input لرسالة طويلة
- نسيان name
- اعتبار reset حفظاً
- ظن أن هذا الدرس يستبدل action/method
ملخص
- عناصر النموذج هي التحكمات داخل form
- label وinput وtextarea وselect وbutton وfieldset/legend تغطي أغلب واجهات المبتدئ
- سمِّ دائماً؛ جمّع بالحقل
- طابق التحكم ونوع السؤال
- سمات form وأنواع input طبقات منفصلة
- التالي: أنواع الإدخال
🧠 اختبر معرفتك
جاهز للبدء
اختبر معرفتك
تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع
5
الأسئلة
70%
للنجاح
∞
الوقت
∞
المحاولات
📝 التعليمات
- اقرأ كل سؤال بعناية
- اختر أفضل إجابة لكل سؤال
- يمكنك إعادة الاختبار عدة مرات كما تريد
- سيتم عرض تقدمك في الأعلى