<button> أفضل من <input type="button"> لأنه: • يقبل HTML بداخله (أيقونات، صور) • أسهل في التنسيق بـ CSS • دعم أفضل للوصولية
أنواع button بصفة type: • submit: يرسل النموذج (الافتراضي داخل form) • reset: يُعيد تعيين قيم النموذج • button: لا يفعل شيئاً افتراضياً (للـ JavaScript)
صفات مهمة: • disabled: تعطيل الزر • form: ربطه بنموذج خارجه • formaction: تجاوز action النموذج • formmethod: تجاوز method النموذج • name + value: إرسال قيمة محددة عند الضغط • autofocus: التركيز التلقائي
| 1 | <!-- أنواع الأزرار --> |
| 2 | <button type="submit">إرسال النموذج</button> |
| 3 | <button type="reset">مسح الحقول</button> |
| 4 | <button type="button" onclick="doSomething()">اضغط هنا</button> |
| 5 | |
| 6 | <!-- زر معطّل --> |
| 7 | <button type="submit" disabled>لا يمكن الإرسال الآن</button> |
| 8 | |
| 9 | <!-- زر مع أيقونة HTML --> |
| 10 | <button type="button"> |
| 11 | <span aria-hidden="true">📥</span> |
| 12 | تحميل الملف |
| 13 | </button> |
| 14 | |
| 15 | <!-- أزرار متعددة لنموذج واحد --> |
| 16 | <form action="/save" method="POST"> |
| 17 | <input type="text" name="title"> |
| 18 | <button type="submit" name="action" value="draft">حفظ كمسودة</button> |
| 19 | <button type="submit" name="action" value="publish">نشر</button> |
| 20 | </form> |
مثال 1: أزرار في واجهة حديثة
| 1 | <!-- زر رئيسي --> |
| 2 | <button type="submit" class="btn btn-primary"> |
| 3 | إنشاء حساب جديد |
| 4 | </button> |
| 5 | |
| 6 | <!-- زر مع حالة تحميل --> |
| 7 | <button type="submit" id="login-btn"> |
| 8 | <span class="btn-text">تسجيل الدخول</span> |
| 9 | <span class="btn-spinner" hidden aria-hidden="true">⏳</span> |
| 10 | </button> |
| 11 | |
| 12 | <!-- مجموعة أزرار --> |
| 13 | <div role="group" aria-label="خيارات الحفظ"> |
| 14 | <button type="submit" name="action" value="draft"> |
| 15 | 💾 حفظ مسودة |
| 16 | </button> |
| 17 | <button type="submit" name="action" value="publish" class="btn-primary"> |
| 18 | 🚀 نشر الآن |
| 19 | </button> |
| 20 | <button type="button" onclick="history.back()"> |
| 21 | ↩ إلغاء |
| 22 | </button> |
| 23 | </div> |