انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 42
دورة لغة HTML

الأزرار بداخل HTML FormHTML Form Buttons Inputs

تعلم هندسة أزرار نماذج HTML عبر المقارنة بين عنصري button و input وإرسال النماذج والعمليات البرمجية وزر الضبط وإحداثيات النقر الصوري وتصميم شريط الأزرار المتاح.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
7
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
6,335
محتوى الدرس
في هذا الدرس 7تصفّح المواضيع

Submit Buttons and Form Triggering زر الإرسال Submit وتفعيل الإرسال

يمثل زر الإرسال الركيزة الأساسية في نماذج HTML لنقل بيانات المستخدم إلى الخادم الخلفي. عند تفعيل الزر بالنقر أو عبر لوحة المفاتيح، يبدأ المتصفح تلقائياً خوارزمية إرسال النموذج المعتمدة في مواصفة WHATWG، حيث يقوم أولاً بفحص جميع قيود التحقق ثم تجميع البيانات في طلب شبكي.
HTML 
<form action="/api/login" method="post">
  <label for="usr">Username</label>
  <input type="text" id="usr" name="username" required>
  <button type="submit">Sign In</button>
</form>
جرّب بنفسك

Button Element Versus Input Button مقارنة عنصر button وحقل input

يميز تطوير الويب الحديث بين عنصر <button> المرن وحقل <input type="submit"> القديم. ورغم أن كلاهما يؤدي وظيفة إرسال النموذج، فإن عنصر <button> يتميز بامتلاكه وسماً مزدوجاً يتيح تضمين نصوص وأيقونات متجهة، مع دعم كامل لعناصر التنسيق الزائفة.
مقارنة معمارية بين عنصر button المتقدم وحقل input submit المفرغ
يوضح الجدول التقني التالي الفروق المعمارية بين عنصر <button> وحقول <input> المخصصة للأزرار من حيث بنية الوسم والمحتوى الداخلي والتنسيق:
المعيار التقنيعنصر buttonعنصر input المفرغ
بنية الوسموسم مزدوج يملك بداية وإغلاقوسم مفرد مفرغ بلا إغلاق
المحتوى الداخلييقبل أيقونات ونصوصاً وعناصر HTMLيقتصر على نص خاصية value فقط
عناصر التنسيق الزائفةيدعم كامل عناصر before وafterعنصر مستبدل لا يدعمها
النوع الافتراضينوعه الافتراضي submit داخل النموذجيتطلب تحديد الخاصية صراحة

Generic Buttons for Script Actions الأزرار العامة Type Button للبرمجة

عند الحاجة لإنشاء زر مخصص للعمليات التفاعلية فقط—مثل فتح نافذة منبثقة أو إجراء حسابات رياضية—يجب تحديد خاصية type="button" صراحة. هذا التحديد الصريح يمنع المتصفح من محاولة إرسال النموذج، ويمنح دوال جافا سكريبت التحكم الكامل في مجريات الحدث.
HTML 
<form id="calcForm">
  <label for="num">Quantity</label>
  <input type="number" id="num" name="qty" value="1">
  <button type="button" id="calcBtn">Recalculate</button>
</form>
جرّب بنفسك

Reset Buttons and Form Clearing زر إعادة الضبط Reset ومحاذيره

يقوم زر إعادة الضبط (المنشأ عبر type="reset") بإعادة كافة حقول النموذج إلى قيمها المبدئية المسجلة عند تحميل الصفحة. وهو لا يفرغ الحقول بالضرورة؛ فإذا كان الحقل يحتوي على نص مبدئي في خاصية value، فإن الضبط يعيده إلى تلك القيمة المحددة بدلاً من تركه فارغاً.
HTML 
<form id="userSettings">
  <label for="nick">Nickname</label>
  <input type="text" id="nick" name="nickname" value="Guest">
  <button type="reset">Restore Defaults</button>
</form>
جرّب بنفسك

Graphical Submit Buttons With Image زر الإرسال الصوري Type Image

يعمل حقل الإرسال الصوري <input type="image"> كزر إرسال مرئي يعرض صورة نقطية أو متجهة. وإلى جانب دوره في إرسال النموذج، يسجل المتصفح إحداثيات البكسل الدقيقة لنقطة نقر مؤشر الفأرة ويرسلها كمعاملات تابعة لاسم الحقل.
إحداثيات زر الإرسال الصوري وهندسة محاذاة شريط الأزرار في الواجهات العربية
HTML 
<form action="/api/map" method="get">
  <input type="image"
         src="images/examples/map-pin-submit.png"
         name="pin" alt="Confirm Pin Location"
         width="180" height="52">
</form>
جرّب بنفسك

Button Focus and Accessibility إتاحة الأزرار والتنقل بلوحة المفاتيح

تمتلك عناصر <button> دلالة إتاحة قياسية مدمجة تدعم لوحة المفاتيح تلقائياً. يدرجها المتصفح في مسار التنقل بمفتاح Tab، ويفعل استجابتها لمفتاحي Enter و Space. إن محاولة محاكاة الأزرار بعناصر نصية غير تفاعلية يعطل قارئات الشاشة ويضعف الإتاحة.
HTML 
<form>
  <button type="button" autofocus>
    <strong>Review</strong> Order
  </button>
  <input type="submit" value="Confirm Order">
</form>
جرّب بنفسك

Building Action Toolbar for Forms تصميم شريط أزرار العمليات للنموذج

يرسخ شريط أزرار العمليات المصمم بعناية التدرج البصري السليم بين إجراء الحفظ الأساسي وخيارات الإلغاء الثانوية. وفي الواجهات العربية، يقضي دليل التصميم المعتمد بوضع أزرار العمليات في أقصى اليسار الفيزيائي، مما يمنح المستخدم تدفقاً بصرياً مريحاً ومدروساً.
خلاصة المعرفة ومحطة الانتقال

ملخص الدرس

حصاد الدرس

مراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي

ماذا تعلّمت في هذا الدرس؟

ملخص الدرس: أتقنت في هذا الدرس هندسة أزرار نماذج HTML: المقارنة المعمارية بين button وinput، وزر الإرسال submit، والأزرار العامة button للأحداث البرمجية، وآلية زر reset ومحاذيره، وإحداثيات الإرسال الصوري، ومعايير شريط الأزرار المتاح في الواجهات العربية. الخطوة التالية: سنتناول الخصائص الأساسية التي تحكم تعريف حقول الإدخال ونقل مفاتيح البيانات إلى الخادم.

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات5

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 5 مفهومةأول بطاقة، أول خطوة
01 Submit Button زر الإرسال
عنصر تفاعلي يطلق عملية إرسال النموذج ويشغل خوارزميات التحقق التلقائي في المتصفح.
للمراجعة
02 Generic Button زر برمجي عام
زر محدد بالنوع button ينفذ أحداث جافا سكريبت التفاعلية دون إرسال النموذج.
للمراجعة
03 Reset Button زر إعادة الضبط
عنصر يعيد كافة حقول النموذج إلى حالتها الافتراضية المحددة في بنية الصفحة الأولى.
للمراجعة
04 Image Submit زر الإرسال الصوري
حقل إدخال صوري يرسل بيانات النموذج مقرونة بإحداثيات النقر الدقيقة للمؤشر.
للمراجعة
05 Action Toolbar شريط العمليات
حاوية تجمع أزرار الحفظ الأساسية والإلغاء الثانوية بمحاذاة قياسية تلائم اتجاه الصفحة.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات3

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 3 مفهومةأول بطاقة، أول خطوة
01 WHATWG وات دبليو جي
Web Hypertext Application Technology Working Group
الهيئة المسؤولة عن تطوير مواصفة HTML الحية وتحديد معايير إرسال النماذج.
للمراجعة
02 ARIA أريا
Accessible Rich Internet Applications
مجموعة خصائص قياسية لتمكين قارئات الشاشة من تفسير العناصر التفاعلية بدقة.
للمراجعة
03 WCAG إرشادات إتاحة الويب
Web Content Accessibility Guidelines
المعايير الدولية لإتاحة محتوى الويب، بما يشمل أحجام الأزرار والتنقل بلوحة المفاتيح.
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

من الفهم للتطبيق

مهامك قبل الاختبار

خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.

0/4مهام منجزة

  1. أنشئ نموذجاً يتضمن عنصر button بنوع submit مدمجاً معه أيقونة SVG متجهة ونص دلالي واضح.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  2. اربط دالة جافا سكريبت بنقر زر داخل نموذج مع التأكد من ضبط نوعه على button لمنع الإرسال العرضي.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  3. حلل نموذجاً متقدماً ووثق سبب استبدال أزرار reset بمسارات إلغاء واضحة تحمي مدخلات المستخدم.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

  4. صمم شريط أزرار لنموذج عربي مع محاذاة أزرار الحفظ الأساسية في أقصى اليسار الفيزيائي للواجهة.

    مطلوبةتم الإنجاز ✓جارٍ الحفظ…
    الموضوع أو التطبيق المرتبط

تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

10أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي10 أسئلة تنتظرك
01

ما هو النوع الافتراضي لعنصر button داخل النموذج إذا لم تحدد خاصية type؟

02

أي عنصر يدعم تضمين وسوم HTML وأيقونات SVG بداخله؟

03

لماذا لا يمكن عرض عناصر التنسيق الزائفة داخل عنصر input؟

04

ما الخاصية التي تمنع الزر من إرسال النموذج عند النقر عليه؟

05

هل يؤدي تفعيل زر reset إلى إفراغ الحقول تماماً أم استعادة القيم المبدئية؟

06

ما البيانات الإضافية التي يرسلها حقل input type=image عند النقر؟

07

لماذا تعد خاصية alt إلزامية على أزرار input type=image؟

08

أي مفاتيح في لوحة المفاتيح تفعل الزر المحدد برمجياً بصورة قياسية؟

09

ما هو الحد الأدنى لمساحة النقر الموصى بها في إرشادات WCAG للشاشات اللمسية؟

10

في الواجهات العربية RTL، أين يجب وضع زر الإجراء الأساسي في شريط العمليات؟