<button>: عنصر BUTTON
آخر تحديث: 2026-10-13
<button>عنصر BUTTON
عنصر <button> ينشئ زرًا قابلًا للنقر. بخلاف <input type="button">، يمكنه احتواء أي HTML (نصوص أو أيقونات أو صور). نوع type الافتراضي هو submit.
| الفئة | النماذج |
|---|---|
| نموذج المحتوى | محتوى نصي (بدون محتوى تفاعلي) |
| العناصر الأم المسموحة | أي عنصر يقبل المحتوى النصي |
| وسم الإغلاق | نعم — يتطلب إغلاق </button> وسم |
| الحالة | قياسي |
📝 البنية
<button type="button">نص الزر</button>⚙️ السمات
يدعم هذا العنصر السمات العامة بالإضافة إلى ما يلي:
| السمة | القيمة | الوصف |
|---|---|---|
type | Keyword | The behavior type of the button.
|
name | Text | Button name, submitted with the form. |
value | Text | The value submitted with the button. |
disabled | Boolean | Disables the button. |
form | Form ID | Associates the button with a form (can be outside it). |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفح
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| <button> | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
نصيحة： حدد type="button" للأزرار خارج النماذج، وإلا فقد يرسل النموذج عند النقر بشكل غير متوقع.
❓ الأسئلة الشائعة
Qما قيم سمة type في button؟ وما قيمتها الافتراضية؟
Aثلاث قيم:
submit (إرسال النموذج) وreset (إعادة ضبط) وbutton (بلا سلوك افتراضي). والافتراضية submit — فخارج النموذج لا ضرر، لكن داخل النموذج يُطلق الزر بلا type الإرسال دون قصد، وهذه أكثر الفخاخ شيوعًا؛ يُنصح بكتابة type صريحًا دائمًا.Qما الفرق بين button و input type='button'؟
Aنموذج محتوى
<button> أغنى: يقبل أيقونات ونصًا غامقًا وعناصر متداخلة؛ بينما <input type='button'> لا يقبل سوى نص خالص عبر value ولا يمكنه احتواء عناصر ابنية. وتوصي المشاريع الحديثة بتوحيد <button>.Qهل يمكن تداخل button داخل button آخر؟
Aلا، فالعناصر التفاعلية لا تتداخل — لا يجوز داخل
<button> وضع <button> أو <a> أو <input> وغيرها. وللتفاعل المركب فكّك البنية أو فوّض الأحداث عبر JS على حاوية خارجية.🏷️ وسوم ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
