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

سمات form على input في HTML

الدرس السابق صقّل سلوك الحقل بـ required وplaceholder والنطاقات. سمات form على input تسأل: أي نموذج يملك التحكم، وهل يمكن لزر تجاوز action مؤقتاً؟ السمة الأساسية form="id" على عنصر خارج form. form* على زر submit تغيّر الوجهة لذلك النقر فقط.

لماذا ارتباط النموذج مهم

معظم الحقول داخل form. أحياناً يضع التخطيط حقلاً في مكان آخر. بلا ارتباط لا ينضم للحمولة. سمة form تربطه بـ id النموذج. التداخل أوضح افتراضياً؛ الارتباط مخرج للتخطيطات الصعبة.

إجابة مباشرة

1) ضع id على form. 2) على التحكم الخارجي form="نفس-id". 3) ما زلت تحتاج name وlabel. 4) على زر submit اختياري formaction وformmethod وformenctype وformnovalidate وformtarget لذلك النقر. 5) ملكية ومسار إرسال — ليست قواعد القيمة السابقة.

📊 Form association and submit overrides

Attribute Where Beginner tip
form input (or other control) Value must match the form’s id exactly
formaction submit button Overrides form action for that click only
formmethod submit button Overrides method (get/post) for that click
formenctype submit button Overrides enctype when uploading via that button
formtarget submit button Overrides where the response opens (_blank, etc.)

دفع: حقل خارج النموذج

نموذج checkout قصير يبقي البريد والكمية داخله. رمز ترويجي لاحقاً في الصفحة — مع label وname — وينضم عبر form="checkout".

Outside input via form id

html
HTML Code 
<form id="checkout" action="/checkout" method="post">
<label for="email">Email</label>
<input id="email" name="email" type="email" required>

<label for="qty">Qty</label>
<input id="qty" name="qty" type="number" min="1" value="1">

<button type="submit">Pay</button>
</form>

<p>Promo field rendered later in the layout:</p>
<label for="promo">Promo code</label>
<input id="promo" name="promo" type="text" form="checkout"
placeholder="SAVE10">

قراءة مثال الدفع

  • id=checkout خطاف الحقل الخارجي
  • form=checkout يضم promo عند الإرسال
  • name=promo ما زال مفتاح الحمولة
  • البريد والكمية داخليان بلا form=
  • labels لكل عنصر مرئي
  • required/min ممكنان؛ ليسا محور هذه الحصة

زرّان: تجاوز action

أحياناً نموذج واحد ووجهتان — مسودة ونشر. أبقِ نموذجاً واحداً وضع formaction مختلفاً على كل زر. التجاوز لذلك النقر فقط.

Submit overrides with formaction

html
HTML Code 
<form id="article" action="/articles/publish" method="post">
<label for="title">Title</label>
<input id="title" name="title" type="text" required>

<label for="body">Body</label>
<input id="body" name="body" type="text">

<button type="submit">Publish</button>
<button type="submit" formaction="/articles/draft"
formmethod="post">Save draft</button>
</form>

قراءة مثال الزرين

  • المسار الافتراضي من action النموذج
  • زر المسودة يرسل عبر formaction لمسار آخر
  • formmethod=post يحافظ على النية
  • الزران يرسلان نفس الحقول المسماة
  • form= ملكية؛ formaction توجيه زر — مهمتان مختلفتان
  • التالي: textarea للنص متعدد الأسطر

اختيار الارتباط مقابل التجاوز

  • حقل خارج الشجرة: form="form-id"
  • نفس الحقول وURL مختلف: formaction
  • method مختلف لنقرة: formmethod
  • ترميز رفع لنقرة: formenctype
  • تخطي التحقق (نادر): formnovalidate
  • فتح الاستجابة مكاناً آخر: formtarget
  • فضّل التداخل حين يسمح التخطيط
  • لا تخلط مع required/placeholder السابق

تمرين — الملكية والتجاوز

  1. انسخ الدفع؛ أزل form= من promo ثم أعده
  2. اكتب id خطأ ولاحظ انكسار الارتباط
  3. أضف حقلاً خارجياً ثانياً مع form=checkout
  4. بدّل formaction المسودة في مثال المقالة
  5. جرب formmethod=get مؤقتاً على المسودة
  6. جملة: form= يختار المالك؛ formaction يغيّر مسار ذلك الزر فقط
  7. ضع promo داخل النموذج وأزل form= حين يمكن

أخطاء شائعة

  • خطأ إملائي بين id وform=
  • form= بلا name
  • الإفراط في الحقول المنفصلة
  • الخلط مع مساعدات الدرس السابق
  • الخلط بين form= وformaction
  • افتراض أن كل عنصر يحتاج form=
  • formnovalidate بدل إصلاح الحقول

ملخص

  • form="id" يربط عنصراً خارجياً بنموذج
  • id مطابق مطلوب؛ name وlabel مهمان
  • الأزرار تتجاوز بـ formaction وformmethod وform*
  • تداخل عند الإمكان؛ ارتباط عند اضطرار التخطيط
  • الملكية/المسار ≠ قواعد الحقل السابقة
  • التالي: textarea

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

جاهز للبدء

اختبر معرفتك

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

❓
5
الأسئلة
🎯
70%
للنجاح
♾️
∞
الوقت
🔄
∞
المحاولات

📝 التعليمات

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