وسم الزر <button>

وسم button ينشئ زرًّا تفاعليًّا حقيقيًّا — قابلًا للضغط والتركيز بلوحة المفاتيح، لتنفيذ الأفعال داخل النماذج وخارجها.

الزر هو عنصر «الأفعال»: إرسال نموذج، فتح نافذة، تشغيل كود. يتفوق على أي div أو a متنكرَين بأنه يأتي مجانًا بكل سلوك الأزرار: التركيز بـ Tab، والتفعيل بـ Enter/Space، وحالة التعطيل disabled، وفهم قارئات الشاشة له كزر.

التمييز الجوهري في الويب كله: التنقل إلى وجهة = <a>، وتنفيذ فعل = <button>. وداخل النماذج انتبه: نوع الزر الافتراضي submit — أي زر «عادي» داخل form سيرسل النموذج ما لم تكتب type="button".

الصياغة

<button type="button">اضغطني</button>

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<button
  type="button"
  style="background:#7c5cff; color:white; border:0; padding:10px 24px; border-radius:8px; cursor:pointer; font-size:16px"
  onclick="this.textContent='تم! ✓'">
  جرّبني
</button>

النتيجة المباشرة:

أهم الخصائص

الخاصية	الوظيفة
type	submit (افتراضي داخل form!) أو button لفعل عادي أو reset لمسح النموذج
disabled	يعطل الزر: لا ضغط ولا تركيز — لحالات «جارٍ الإرسال…»

💡 نصائح عملية

داخل form اكتب type صراحة دائمًا — الافتراضي submit يسبب إرسالات غير مقصودة
عطّل زر الإرسال أثناء المعالجة لمنع الإرسال المزدوج

⚠️ أخطاء شائعة

div أو span مع onclick بدل زر — يفقد لوحة المفاتيح والوصولية كاملة
استخدام <a href="#"> كزر فعل — الروابط للتنقل والأزرار للأفعال

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار HTML الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs