🎯 أزرار HTML: بوابتك لإنشاء موقع تفاعلي وسهل الاستخدام

اليوم سنتعلم عن أحد أهم عناصر التفاعل في أي موقع ويب: الأزرار (Buttons). تخيل موقعاً بدون أزرار للاشتراك، أو لإرسال نموذج الاتصال، أو حتى للبحث... سيكون موقعاً جامداً! الأزرار هي التي تسمح للمستخدم بالتواصل مع موقعك وتنفيذ الإجراءات. هيا نبدأ رحلتنا لتعلم كيفية إنشائها خطوة بخطوة.

📝 الوسم الأساسي: <button>

لإنشاء زر في HTML، نستخدم الوسم <button>. هذا الوسم هو وسم حاوية، مما يعني أننا نضع النص الذي نريد ظهوره على الزر بين وسم الفتح <button> ووسم الإغلاق </button>.

<!-- مثال بسيط لزر -->
<button>انقر هنا!</button>

النتيجة: سيظهر زر بسيط عليه النص "انقر هنا!".

هذا هو أساس كل شيء! لكن الزر في شكله الحالي لا يفعل شيئاً. إنه مثل زر بدون أسلاك. في الدروس القادمة (مثل دروس JavaScript) سنتعلم كيف "نوصله" ليؤدي وظيفة.

🔧 الخصائص (Attributes) الأساسية للزر <button>

يمكننا جعل الزر أكثر فائدة بإضافة خصائص (Attributes) داخل وسم الفتح <button>. إليك أهمها:

1. خاصية type

تحدد نوع الزر وسلوكه، خاصة عند وضعه داخل <form> (سنتعلم عن النماذج لاحقاً). لها ثلاث قيم رئيسية:

  • type="submit": الزر الافتراضي. يُستخدم لإرسال بيانات النموذج (Form) إلى الخادم.
  • type="reset": يُعيد تعيين جميع حقول النموذج إلى قيمها الافتراضية (يُمسح ما كتبه المستخدم).
  • type="button": زر عادي لا يرتبط تلقائياً بأي إجراء في النموذج. هذا هو النوع الذي سنستخدمه غالباً عندما نريد ربط الزر بـ JavaScript لاحقاً.
<!-- أمثلة على أنواع الأزرار داخل نموذج (سنفترض وجود نموذج) -->
<button type="submit">إرسال الطلب</button>
<button type="reset">مسح النموذج</button>
<button type="button">زر عادي</button>

2. خاصية name و value

تُستخدم غالباً مع النماذج لتحديد اسم الزر والقيمة التي يرسلها عند الضغط عليه.

<button type="submit" name="action" value="save">حفظ</button>
<button type="submit" name="action" value="delete">حذف</button>

3. خاصية disabled

تجعل الزر غير قابل للنقر (مُعطَّل). تظهر بشكل باهت ولا يستطيع المستخدم التفاعل معه.

<button disabled>زر معطل</button>

🔗 هل يمكنني استخدام <a> كزر؟ نعم!

في بعض الأحيان، نريد زراً ينقلك إلى صفحة أخرى أو رابط خارجي. هنا يمكننا استخدام وسم الرابط <a> وتنسيقه ليشبه الزر باستخدام CSS (سنتعلمه لاحقاً). الفرق الرئيسي:

  • <button>: مصمم للإجراءات داخل الصفحة (إرسال، حذف، فتح نافذة).
  • <a>: مصمم للتنقل (الذهاب إلى صفحة أو موقع آخر).
<!-- رابط عادي -->
<a href="https://www.codexacademy.com">زيارة الأكاديمية</a>

<!-- رابط مبدئي يشبه الزر (سنصممه لاحقاً) -->
<a href="about.html" class="button-link">تعرف علينا</a>

🎨 تنسيق الأزرار باستخدام خاصية style (لمحة سريعة)

لجعل الزر أجمل، يمكننا استخدام خاصية style المضمنة (Inline Styles) لإضافة ألوان وحجم. هذا حل مؤقت، حيث أن الطريقة الصحيحة هي باستخدام ملفات CSS منفصلة (وهو موضوع كورس قادم!).

<button style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; border-radius: 5px;">
    زر أخضر جميل
</button>
<button style="background-color: #008CBA; color: white; padding: 15px 32px; font-size: 16px;">
    زر أزرق كبير
</button>

ملاحظة: #4CAF50 و #008CBA هي رموز الألوان (Hex Codes).

💡 مثال عملي متكامل

لنجمع ما تعلمناه في مثال بسيط لزر اشتراك في نشرة بريدية وهمية:

<!DOCTYPE html>
<html>
<head>
    <title>مثال زر الاشتراك</title>
</head>
<body>
    <h2>اشترك في نشرتنا البريدية</h2>
    <p>ادخل بريدك الإلكتروني للحصول على آخر التحديثات.</p>
    
    <!-- محاكاة بسيطة لحقل إدخال (سنتعلمه بالتفصيل لاحقاً) -->
    <input type="text" placeholder="بريدك الإلكتروني هنا">
    
    <!-- زر الإشتراك -->
    <button type="button" style="margin-top: 10px; background-color: #ff6600; color: white; padding: 10px 15px;">
        🚀 اشترك الآن
    </button>
    
    <!-- زر رابط للشروط -->
    <br><br>
    <a href="terms.html" style="color: #555;">اقرأ الشروط والأحكام</a>
</body>
</html>

🧪 تدريب سريع

  1. أنشئ زراً عليه كلمة "تحميل".
  2. غيّر لون خلفية هذا الزر إلى الأزرق (#2196F3) ولون النص إلى الأبيض باستخدام style.
  3. جرب إضافة خاصية disabled إليه وشاهد النتيجة.

🎯 ملخص الدرس

  • الوسم <button> هو الوسم الرئيسي لإنشاء الأزرار التفاعلية في HTML.
  • خاصية type تحدد سلوك الزر (submit, reset, button).
  • يمكن استخدام disabled لتعطيل الزر وجعله غير قابل للنقر.
  • يمكن تحويل الروابط (<a>) لأزرار من ناحية المظهر لأغراض التنقل.
  • خاصية style تسمح لنا بتغيير المظهر الأساسي للزر (مع التأكيد أن CSS هو الحل الأمثل).