جاري التحميل...

نماذج HTML

بعد التجاوب يأتي فصل النماذج: الزائر يكتب ويرسل. الحاوية form. الدروس التالية تعمّق السمات وأنواع الإدخال.

لماذا النماذج مهمة

الصفحة الثابتة تعرض؛ النموذج يجمع. بلا form لا يعرف المتصفح أي عناصر لإرسال واحد.

إجابة مباشرة

1) form مع action وmethod. 2) عناصر بـ name. 3) label for يطابق id. 4) زر submit. الترميز أولاً.

📊 Form parts at a glance

Part	Job	Beginner tip
form	Groups controls for one submission	Keep related fields inside one form
action	URL or path that receives the data	Practice paths are fine while learning
method	How the browser sends the payload	get puts data in the URL; post uses the request body
input (+ others)	Collects a value from the user	Always set name for submitted keys
label	Names the field for people and assistive tech	for must match the control id
submit	Triggers sending the form	Prefer type="submit" on buttons

هيكل نموذج بسيط

ابدأ بالحاوية والسمتين الأساسيتين. مسار تدريبي يكفي للتعلّم.

Minimal form skeleton

html

<form action="/subscribe" method="post">
<!-- fields go here -->
</form>

قراءة الهيكل

form حد الإرسال
action مسار الاستقبال
post في جسم الطلب
get في الرابط
404 بدون خادم حقيقي مقبول أثناء التعلّم

حقل مُسمّى + إرسال

حقل واحد على الأقل وطريقة إرسال. for يطابق id وname موجود.

Subscribe form with label

html

<form action="/subscribe" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>
<button type="submit">Subscribe</button>
</form>

قراءة مثال الاشتراك

for وid متصلان
name مفتاح البيانات
type=email تلميح للمتصفح
button type=submit يرسل

GET مقابل POST

get للبحث القابل للإشارة؛ post عندما لا يجب أن تبقى البيانات في شريط العنوان.

تمرين — نموذج اشتراك صغير

form بـ post ومسار تدريبي
input بريد مع label وname
زر submit
تحقق من العرض
انقل الحقل خارج form مؤقتًا

أخطاء شائعة

حقول خارج form
بلا name
زر بلا type=submit
label غير متطابق
خلط action وmethod

ملخص

form يغلف عناصر إرسال واحد
action وmethod يصفان الهدف والأسلوب
label وname يجعلان الحقل قابلاً للإرسال
التالي: سمات النموذج

🧠 اختبر معرفتك

جاهز للبدء

اختبر معرفتك

تحدى نفسك مع هذا الاختبار التفاعلي واكتشف مدى فهمك للموضوع

❓

الأسئلة

🎯

70%

للنجاح

♾️

∞

الوقت

🔄

∞

المحاولات

📝 التعليمات

اقرأ كل سؤال بعناية
اختر أفضل إجابة لكل سؤال
يمكنك إعادة الاختبار عدة مرات كما تريد
سيتم عرض تقدمك في الأعلى