الأزرار (button)

button htmlأزرار htmlhtml button typesubmit reset htmlhtml form button

الشرح

<button> أفضل من <input type="button"> لأنه: • يقبل HTML بداخله (أيقونات، صور) • أسهل في التنسيق بـ CSS • دعم أفضل للوصولية

أنواع button بصفة type: • submit: يرسل النموذج (الافتراضي داخل form) • reset: يُعيد تعيين قيم النموذج • button: لا يفعل شيئاً افتراضياً (للـ JavaScript)

صفات مهمة: • disabled: تعطيل الزر • form: ربطه بنموذج خارجه • formaction: تجاوز action النموذج • formmethod: تجاوز method النموذج • name + value: إرسال قيمة محددة عند الضغط • autofocus: التركيز التلقائي

الصياغة (Syntax)

syntax

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>

نصائح احترافية

—حدد type='button' دائماً للأزرار خارج النماذج أو الأزرار التي تُستخدم بـ JavaScript — بدونه الزر داخل <form> يُرسل النموذج تلقائياً حتى لو لم تقصد ذلك!

الدرس السابق

القوائم المنسدلة (select, optgroup, option, datalist)

الدرس التالي

تنظيم النماذج (fieldset, legend)

الأزرار (button)

button htmlأزرار htmlhtml button typesubmit reset htmlhtml form button

الشرح

<button> أفضل من <input type="button"> لأنه: • يقبل HTML بداخله (أيقونات، صور) • أسهل في التنسيق بـ CSS • دعم أفضل للوصولية

الصياغة (Syntax)

syntax

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>

نصائح احترافية

—حدد type='button' دائماً للأزرار خارج النماذج أو الأزرار التي تُستخدم بـ JavaScript — بدونه الزر داخل <form> يُرسل النموذج تلقائياً حتى لو لم تقصد ذلك!

الدرس السابق

القوائم المنسدلة (select, optgroup, option, datalist)

الدرس التالي

تنظيم النماذج (fieldset, legend)