20- كورس HTML للمبتدئين – الأزرار Buttons داخل HTML

مقدمة عن الأزرار في HTML

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

في HTML، يتم تعريف الأزرار باستخدام عنصر أو عنصر بتعيين النوع إلى “button”. يتيح لك استخدام عنصر إضافة محتوى داخلي مثل النصوص أو الصور، مما يوفر مرونة أكبر في التصميم. في المقابل، يكون عنصر محدودًا إلى النص البسيط ولكنه قد يكون أكثر توافقًا مع بعض المتصفحات وأنماط الوثائق.

أنواع الأزرار واستخداماتها

يوجد عدة أنواع للأزرار في HTML، وكل نوع يناسب استخدامات معينة. على سبيل المثال، يمكن أن يكون لديك زر من نوع “submit” لإرسال النموذج، أو “reset” لإعادة تعيين الإدخالات إلى قيمها الأولية. النوع “button” هو الأكثر شيوعًا عندما تريد تنفيذ إجراءات باستخدام جافا سكريبت دون إرسال النموذج.

يمكنك أيضًا تخصيص الأزرار باستخدام CSS لإضفاء مظهر جمالي يتماشى مع تصميم الموقع. من الممكن تغيير الألوان، الأشكال، والأنماط عند التفاعل مع الأزرار، مثل التمرير فوقها أو النقر عليها.

مثال:

<title>مثال على الأزرار في HTML</title>
    
        button {
            background-color: #4CAF50; /* لون الخلفية */
            color: white; /* لون النص */
            padding: 15px 32px; /* الحشوة */
            text-align: center; /* محاذاة النص */
            text-decoration: none; /* إزالة التزيين */
            display: inline-block; /* عرض الزر */
            font-size: 16px; /* حجم الخط */
            margin: 4px 2px; /* الهوامش */
            cursor: pointer; /* مؤشر الفأرة */
            border-radius: 8px; /* تدوير الحدود */
        }
    



    <button type=\"button\">انقر هنا</button>

من خلال المثال أعلاه، تم توضيح كيفية إنشاء أزرار متعددة باستخدام HTML وCSS. الزر الأول هو زر بسيط يقوم عند النقر عليه بعرض رسالة تنبيه. الزر الثاني يستخدم لإرسال البيانات إلى الخادم عند الضغط عليه، بينما الزر الثالث يعيد تعيين إدخالات النموذج إلى وضعها الافتراضي.