📌 زر الإرسال <button>

🔹 ما هو <button>؟

• عنصر في HTML يُستخدم لإنشاء زر.

• يُمكن استخدامه داخل النماذج (Forms) أو خارجها.

• يختلف عن <input type=”submit”> لأنه أكثر مرونة:

  • ممكن يحتوي نصوص.

  • ممكن يحتوي أي عناصر أخرى (أيقونات، صور، HTML).

✅ التركيب الأساسي:

🔹 أنواع زر <button> (خاصية type)

1. type=”submit”

• الإرسال الافتراضي.

• يرسل البيانات في النموذج (Form) إلى الوجهة المحددة في action.

✅ مثال:

🔎 النتيجة: عند الضغط، يرسل البيانات إلى login.php.

2. type=”reset”

• يرجّع القيم الافتراضية في جميع الحقول داخل النموذج.

✅ مثال:

🔎 النتيجة: يرجع اسم المستخدم إلى “أحمد” وكلمة المرور إلى “1234”.

3. type=”button”

• مجرد زر عادي، لا يعمل أي فعل افتراضي.

• يُستخدم غالبًا مع JavaScript (مثلاً لتشغيل دالة عند الضغط).

✅ مثال:

🔎 النتيجة: عند الضغط يظهر تنبيه (Alert).

🔹 خصائص مهمة لزر <button>

• name: اسم الزر (يتبعت مع البيانات عند الإرسال).

• value: القيمة المرتبطة بالزر عند الإرسال.

• disabled: يعطل الزر (لا يمكن الضغط عليه).

• autofocus: يجعل الزر مفعّل تلقائيًا عند تحميل الصفحة.

✅ مثال:

🔹 الفرق بين <button> و <input type=”submit”>

• <input type=”submit”> = زر إرسال لكن نصه يحدد من خلال الخاصية value.

• <button type=”submit”> = أكثر مرونة (ممكن نضيف أي محتوى داخله).

✅ مثال توضيحي:

🔎 النتيجة: الزر الثاني أجمل لأنه يقبل تنسيقات وأيقونات.

🔹 مثال عملي كامل

🔹 ملخص

• <button> عنصر لإنشاء زر.

• type=”submit” → لإرسال النموذج (افتراضي).

• type=”reset” → لإعادة الحقول إلى قيمها الأصلية.

• type=”button” → زر عادي يُستخدم مع JavaScript.

• مميز عن <input type=”submit”> لأنه يقبل محتوى متنوع (نصوص + صور + أي عناصر).