كيفية إنشاء زر يعمل كرابط في HTML: أفضل الطرق باستخدام href وCSS وJavaScript

مقدمة: هل يمكن جعل الزر يعمل كرابط في HTML؟

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

في هذا الدليل العملي، سنستعرض ثلاث طرق شائعة لجعل الزر يؤدي وظيفة الرابط، مع توضيح المزايا والعيوب من ناحية البنية الدلالية، وتجربة المستخدم، والتوافق مع أفضل ممارسات تطوير الواجهة.

الطريقة الخاطئة: وضع <button> داخل <a>

قد يظن البعض أن أبسط حل هو تغليف الزر داخل الرابط، كما في المثال التالي:

<a href="https://www.freecodecamp.org/">
  <button>freeCodeCamp</button>
</a>

رغم أن هذا المثال قد يعمل في بعض المتصفحات، فإنه ليس استخداماً سليماً من ناحية HTML الدلالية. السبب هو أن وسم <a> لا ينبغي أن يحتوي على عنصر تفاعلي آخر مثل <button>.

لماذا يُعد هذا الأسلوب ممارسة غير جيدة؟

• لأنه يخلط بين وظيفتين مختلفتين: link للتنقل وbutton لتنفيذ إجراء.
• قد يربك المستخدم حول النتيجة المتوقعة عند النقر.
• قد يسبب مشكلات في إمكانية الوصول Accessibility وفي تفسير العناصر من قبل المتصفحات وتقنيات القراءة.

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

الطريقة الأولى: تنسيق الرابط ليبدو كزر باستخدام CSS

هذه الطريقة هي الأنظف في كثير من الحالات، لأنك تحافظ على الدلالة الصحيحة: العنصر ما يزال رابطاً، لكنه يبدو بصرياً كزر.

إنشاء الرابط الأساسي

<a class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>

إذا أردت فتح الرابط في تبويب جديد، يمكنك إضافة الخاصية target="_blank":

<a target="_blank" class="fcc-btn" href="https://www.freecodecamp.org/">freeCodeCamp</a>

إضافة التنسيق ليظهر كرابط على هيئة زر

لنبدأ بتغيير لون الخلفية ولون النص:

.fcc-btn {
  background-color: #199319;
  color: white;
}

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

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
}

وأخيراً، نحذف الخط السفلي الافتراضي للرابط باستخدام الخاصية text-decoration:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
}

إضافة تفاعل بصري عند المرور

لتحسين تجربة المستخدم، يمكن تغيير اللون عند المرور بالمؤشر باستخدام :hover:

.fcc-btn:hover {
  background-color: #223094;
}

استخدام مكتبة Bootstrap

إذا كان مشروعك يستخدم Bootstrap بالفعل، يمكنك الاستفادة من أنماط الأزرار الجاهزة:

<a class="btn btn-primary" href="https://www.freecodecamp.org/">freeCodeCamp</a>

لكن من غير العملي استيراد مكتبة كاملة مثل Bootstrap فقط لتنسيق رابط واحد.

هل هذه الطريقة صحيحة دائماً؟

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

لذلك، الأفضل هو استخدام هذا الأسلوب عندما يكون السياق البصري مفهوماً، وعندما لا يؤدي التشابه بين العناصر إلى تضليل المستخدم.

الطريقة الثانية: استخدام form مع الخاصيتين action وformaction

يمكن أيضاً إنشاء زر داخل نموذج form ثم استخدام خاصية action أو formaction لنقل المستخدم إلى رابط معين.

استخدام الخاصية action

مثال باستخدام input:

<form action="https://www.freecodecamp.org/">
  <input type="submit" value="freeCodeCamp">
</form>

ومثال باستخدام button:

<form action="https://www.freecodecamp.org/">
  <button type="submit">freeCodeCamp</button>
</form>

ولجعل مظهره أجمل، يمكن استخدام تنسيق مشابه للطريقة السابقة مع إضافتين مهمتين هما cursor: pointer وborder: none:

.fcc-btn {
  background-color: #199319;
  color: white;
  padding: 15px 25px;
  text-decoration: none;
  cursor: pointer;
  border: none;
}

استخدام الخاصية formaction

بدلاً من تحديد الرابط في وسم form نفسه، يمكن وضعه مباشرة على الزر أو عنصر input:

مثال باستخدام input:

<form>
  <input type="submit" formaction="https://www.freecodecamp.org/" value="freeCodeCamp">
</form>

مثال باستخدام button:

<form>
  <button type="submit" formaction="https://www.freecodecamp.org/">freeCodeCamp</button>
</form>

تجدر الإشارة إلى أن الخاصية formaction تعمل فقط مع العناصر التي يكون نوعها type="submit" أو type="image".

هل هذا الاستخدام دلالي وصحيح؟

من الناحية التقنية، الكود صالح. لكن من الناحية الدلالية، هناك إشكال واضح: النموذج form صُمم لجمع البيانات وإرسالها، لا لمجرد نقل المستخدم إلى صفحة أخرى.

لذلك، استخدام form لهذا الغرض قد ينجح عملياً، لكنه ليس الخيار الأفضل عندما يكون المطلوب مجرد تنقل بسيط.

الآثار الجانبية لهذه الطريقة

عند النقر على الزر، قد تلاحظ ظهور علامة استفهام ? في نهاية الرابط:

يحدث ذلك لأن النموذج يستخدم افتراضياً الطريقة GET. ويمكنك التبديل إلى POST بهذه الصورة:

<form method="POST" action="https://www.freecodecamp.org/">
  <button type="submit">freeCodeCamp</button>
</form>

لكن هذا لا يعني أن الأسلوب أصبح مثالياً، لأنك ما زلت تستخدم نموذجاً في غير هدفه الأصلي.

الطريقة الثالثة: استخدام حدث onclick في JavaScript

إذا كنت تريد جعل الزر ينقل المستخدم إلى رابط محدد برمجياً، فيمكنك استخدام JavaScript مع الحدث onclick.

مثال باستخدام input

<form>
  <input type="button" onclick="window.location.href='https://www.freecodecamp.org/';" value="freeCodeCamp" />
</form>

مثال باستخدام button

<button onclick="window.location.href='https://www.freecodecamp.org/';">
  freeCodeCamp
</button>

تمثل الخاصية window.location.href عنوان الصفحة الحالية أو العنوان الذي تريد الانتقال إليه. وعند تغيير قيمتها، ينتقل المتصفح إلى الرابط الجديد.

متى تكون هذه الطريقة مناسبة؟

يمكن أن تكون مفيدة عندما يكون الانتقال مرتبطاً بمنطق برمجي معين، مثل:

• التحقق من شرط قبل إعادة التوجيه.
• تنفيذ تتبع تحليلي قبل الانتقال.
• تحديد الرابط بشكل ديناميكي وفق تفاعل المستخدم.

ما عيوب استخدام onclick؟

• تعتمد كلياً على JavaScript.
• إذا عطّل المستخدم JavaScript في المتصفح، فلن تعمل.
• ليست الخيار الأكثر دلالة إذا كان الهدف مجرد رابط عادي.

لهذا السبب، لا يُنصح بها كحل افتراضي للتنقل البسيط، بل تُستخدم عند وجود حاجة منطقية واضحة.

مقارنة سريعة بين الطرق الثلاث

ما الخيار الأفضل عملياً؟

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

• بنية دلالية صحيحة.
• توافقاً أفضل مع المتصفحات ومحركات البحث.
• سهولة أكبر في الوصول وتجربة الاستخدام.

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

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

لجعل زر HTML يعمل كرابط، توجد عدة حلول، لكن ليست كلها متساوية من حيث الجودة الدلالية وتجربة المستخدم. الخيار الأكثر احترافية في أغلب المشاريع هو استخدام رابط <a> مع تنسيق CSS ليبدو كزر، لأنه يحافظ على وظيفة الرابط الأصلية دون خلط بين العناصر التفاعلية. أما استخدام form أو onclick فيبقى مناسباً فقط في حالات محددة تتطلب ذلك. باختصار: اختر العنصر وفق وظيفته الحقيقية، ثم عدّل المظهر عند الحاجة، لا العكس.