أنواع أزرار HTML: كيفية إضافة الأزرار إلى موقعك بطريقة صحيحة

مقدمة حول أزرار HTML وأهميتها في تصميم الواجهات

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

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

استخدام وسم button لإضافة زر في HTML

يُعد وسم button من أبسط وأكثر الطرق شيوعاً لإنشاء زر داخل الصفحة. كل ما عليك فعله هو كتابة النص الذي تريد ظهوره داخل الزر بين وسم الفتح ووسم الإغلاق.

<button>Sample Button</button>

وفي المثال الأصلي، تم توسيط الزر أفقياً وعمودياً باستخدام CSS عبر خصائص مثل flex وheight وmargin:

body {
  background-color: #8d8d8d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  height: 100vh;
}

هذا التنسيق يجعل جميع العناصر داخل الصفحة تظهر في المنتصف، وهو أسلوب مفيد عند إنشاء أمثلة تعليمية أو واجهات بسيطة.

كيف تجعل زر button تفاعلياً؟

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

<button onclick="alert('Hello Campers')">Sample Button</button>

يُفضَّل في المشاريع الاحترافية تجنب inline JavaScript قدر الإمكان، والاعتماد على ربط الأحداث من خلال ملفات JavaScript الخارجية للحفاظ على تنظيم الكود وسهولة صيانته.

تحويل وسم a إلى زر قابل للنقر

يمكنك أيضاً إنشاء زر باستخدام وسم a، وهو الوسم المخصص عادةً للروابط. هذه الطريقة مفيدة جداً عندما يكون الهدف الأساسي هو الانتقال إلى صفحة أخرى أو فتح رابط خارجي، لأن العنصر يؤدي وظيفته الأصلية كرابط، مع إمكانية تنسيقه ليبدو كزر حقيقي.

<a href="https://freecodecamp.org">Learn Coding for Free</a>

في صورته الافتراضية، سيظهر العنصر كرابط نصي عادي داخل المتصفح:

لكن يمكن تحويله بصرياً إلى زر باستخدام بعض قواعد CSS مثل إزالة الخط السفلي، وضبط الألوان، وإضافة الحواف والمسافات الداخلية:

a {
  text-decoration: none;
  border: 0.2px solid #000;
  color: #000;
  background: #e6e4e4;
  padding: 5px;
  border-radius: 1px;
}

بهذا الأسلوب، يصبح الرابط أقرب كثيراً إلى شكل الأزرار التقليدية في HTML.

متى يكون وسم a أفضل من button؟

• عندما تريد نقل المستخدم إلى صفحة أخرى.
• عندما يكون العنصر مسؤولاً عن فتح رابط داخلي أو خارجي.
• عندما لا تحتاج إلى تنفيذ وظيفة برمجية معقدة عبر JavaScript.

من منظور دلالي واحترافي، إذا كان العنصر ينقلك إلى رابط، فاستخدم a. أما إذا كان ينفذ إجراءً داخل الصفحة، فاستخدم button.

استخدام input type="button" لإنشاء زر

يوفّر HTML أيضاً إمكانية إنشاء زر عبر العنصر input مع النوع button. هذا النوع يتصرف بشكل مشابه جداً لوسم button، لكنه يختلف عنه في البنية.

بما أن input عنصر فارغ empty element، فهو لا يملك وسم إغلاق، ولهذا يتم تحديد النص الظاهر على الزر من خلال الخاصية value.

<input type="button" value="Sample Button" />

غالباً ما يُستخدم هذا النوع في النماذج أو في الواجهات البسيطة، لكنه يحتاج عادةً إلى JavaScript حتى يؤدي وظيفة فعلية عند الضغط عليه.

استخدام input type="submit" داخل النماذج

إذا كنت تعمل على نموذج form وتريد إرسال البيانات التي يملؤها المستخدم، فإن input type="submit" هو الخيار المناسب. عند النقر عليه، يقوم المتصفح بإرسال بيانات النموذج تلقائياً دون الحاجة إلى كتابة JavaScript لتنفيذ عملية الإرسال الأساسية.

<input type="submit" value="Another Button" />

الفرق بين button وsubmit في عناصر input

الفرق الجوهري هنا هو أن زر submit يرتبط بمنطق إرسال النموذج مباشرة، بينما زر button لا ينفذ أي إرسال تلقائي ما لم تقم ببرمجته يدوياً.

مشروع تطبيقي: إنشاء زر Neon Light باستخدام HTML وCSS

من التطبيقات الجميلة على الأزرار في تصميم الواجهات ما يُعرف بتأثير Neon Light. هذا النمط يمنح الزر مظهراً حديثاً وملفتاً، ويمكن تنفيذه بسهولة باستخدام وسم button وبعض خصائص CSS.

الخطوة الأولى: إنشاء الزر وتنسيقه الأساسي

<button>Neon Light</button>

button {
  background-color: #000;
  border: .5px solid crimson;
  border-radius: 10px;
  color: #fff;
  padding: 8px;
}

في هذه المرحلة، سيظهر الزر بتصميم بسيط وأنيق بخلفية داكنة وحدود ملونة.

الخطوة الثانية: إضافة تأثير الإضاءة عبر box-shadow

لإنشاء التأثير المتوهج، يمكن استخدام الخاصية box-shadow التي تسمح بإضافة أكثر من ظل للعنصر نفسه، وهي ميزة مثالية لتوليد مظهر الإضاءة المحيطة.

button {
  background-color: #000;
  border: .5px solid crimson;
  border-radius: 10px;
  color: #fff;
  padding: 8px;
  box-shadow: 0 0 30px 0 crimson, 0 0 30px 0 crimson, 0 0 10px 0 crimson inset;
}

تتكون قيم box-shadow عادةً من العناصر التالية:

1. الإزاحة الأفقية على المحور x.
2. الإزاحة العمودية على المحور y.
3. مقدار التمويه blur radius.
4. مقدار الانتشار spread radius.
5. لون الظل.

وفي هذا المثال، تم التركيز على الانتشار واللون، مع جعل بعض القيم الأخرى صفراً. كما أُضيفت الكلمة inset إلى آخر قيمة لإظهار جزء من الإضاءة داخل الزر نفسه.

أفضل ممارسات اختيار نوع الزر المناسب

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

• استخدم button عند تنفيذ إجراء داخل الصفحة مثل الفتح، الإغلاق، أو تشغيل حدث برمجي.
• استخدم a عندما يكون العنصر موجهاً للتنقل بين الصفحات أو الروابط.
• استخدم input type="submit" عند إرسال البيانات داخل نموذج.
• تجنب استخدام عناصر مثل div أو span كأزرار إلا عند الضرورة القصوى ومع معالجة كاملة لإمكانية الوصول.

لماذا يؤثر الاستخدام الصحيح للأزرار على SEO وإمكانية الوصول؟

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

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

الخلاصة التقنية

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