وثائق HTML قابلة للتشغيل: زر كرابط

Q: كيف أصنع زرًا ينتقل إلى صفحة أخرى في HTML؟

استخدم رابطًا ونسّقه كزر: Sign up مع CSS للحشو والخلفية وتدوير الزوايا وtext-decoration: none. يبدو كزر ويتصرف كرابط، وهذا ما هو عليه فعلًا.

Q: هل يمكنني وضع زر داخل وسم a؟

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

Q: هل يملك الزر سمة href؟

لا. ليس له href. لإرسال المتصفح إلى عنوان استخدم ، أو ضع الزر داخل يحمل action (والسمة formaction على الزر تتجاوزها).

Q: كيف أعطّل رابطًا يبدو كزر؟

الروابط ليس لها سمة disabled. احذف href كي يتوقف عن كونه رابطًا، وأضف aria-disabled="true"، ونسّقه كعنصر معطّل. أعد href حين يجب أن يعمل من جديد.

كيف تصنع زرًا ينتقل إلى صفحة

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button link</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      font-weight: 600;
      text-decoration: none;
    }
    .btn:hover { background: #1d4ed8; }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <a class="btn" href="https://developer.mozilla.org/">Read the docs</a>
</body>
</html>

القواعد التي تحوّل الرابط إلى زر:

display: inline-block تتيح للحشو توسيع الصندوق وتُبقيه في سطر النص.
text-decoration: none تزيل الخط من تحت النص.
color وbackground تحلان محل لون الرابط الأزرق.
:focus-visible تعطي مستخدمي لوحة المفاتيح حلقة تركيز واضحة.

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

زر أم رابط: أي عنصر تستخدم

السؤال هو ماذا يحدث عند النقر، لا كيف يبدو العنصر.

النقر عليه	استخدم	أمثلة
ينتقل إلى عنوان آخر	`<a href>`	التسجيل، اقرأ المزيد، عرض الأسعار، التنزيل
يغيّر شيئًا في هذه الصفحة	`<button type="button">`	فتح القائمة، تشغيل، إضافة إلى السلة، إظهار كلمة المرور
يرسل نموذجًا	`<button type="submit">`	تسجيل الدخول، البحث، الحفظ

الرابط الذي يُعلن عنه «رابط» والزر الذي يُعلن عنه «زر» يخبران مستخدمي قارئات الشاشة بما سيحدث. ويختلف سلوكهما مع لوحة المفاتيح أيضًا: Enter يفعّل الاثنين، لكن المسافة تفعّل الأزرار فقط (على الرابط تمرّر المسافة الصفحة). عنصر الزر نفسه مشروح في وسم button في HTML.

لماذا لا تضع زرًا داخل رابط

هذا هو النمط الذي يجربه معظم الناس أولًا:

<!-- Invalid: interactive content inside <a> -->
<a href="/signup"><button>Sign up</button></a>

<!-- Invalid the other way round, too -->
<button><a href="/signup">Sign up</a></button>

معيار HTML يمنع الاثنين: لا يجوز أن يحتوي <a> ولا <button> على عناصر تفاعلية. عمليًا تحصل لوحة المفاتيح على محطتي تركيز لعنصر واحد، وقد يعلن قارئ الشاشة «رابط، زر، Sign up»، ويعتمد اتباع الرابط عند النقر على المتصفح. اختر عنصرًا واحدًا.

لماذا لا تستخدم onclick مع location.href

الحل الالتفافي الشائع الآخر زر يضبط العنوان بـ JavaScript. يبدو مثل الرابط تمامًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link vs onclick</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border: 0;
      border-radius: 8px;
      background: #16a34a;
      color: #fff;
      font: inherit;
      text-decoration: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Real link</a>
  <button class="btn" type="button"
    onclick="window.open('https://example.com/')">Button with onclick</button>
  <p>Hover both, then right-click both.</p>
</body>
</html>

(يستخدم المثال window.open لأن المعاينة يجب ألا تنتقل إلى صفحة أخرى، أما الشيفرة المعتادة فهي location.href = '...'.) مرّر المؤشر فوق الاثنين وانقر بالزر الأيمن: الرابط الحقيقي وحده يُظهر عنوانه ويعرض «فتح الرابط في تبويب جديد» و«نسخ عنوان الرابط». والزر لا يدعم Ctrl+نقرة ولا النقر بالزر الأوسط، ولا يعلّمه المتصفح كصفحة مزارة، ولا تتبعه محركات البحث كرابط. إذا كانت الوجهة عنوانًا، فاكتب <a href>.

زر نموذج يفتح عنوانًا

هناك حالة واحدة يكون فيها <button> الذي ينتقل إلى صفحة أخرى صحيحًا: حين يرسل بيانات معه. صندوق البحث هو المثال الكلاسيكي. action في النموذج هي العنوان، وmethod="get" تضع الحقول في سلسلة الاستعلام:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Search form</title>
</head>
<body>
  <form action="https://duckduckgo.com/" method="get">
    <label>Search <input type="search" name="q" value="html button link" required></label>
    <button type="submit">Search</button>
    <button type="submit" formaction="https://www.bing.com/search">Search with Bing</button>
  </form>
</body>
</html>

اضغط Search: في صفحة حقيقية سينتقل المتصفح إلى https://duckduckgo.com/?q=html+button+link. المعاينة تعرض البيانات بدلًا من المغادرة. وformaction ترسل النموذج نفسه إلى عنوان مختلف من الزر الثاني.

أزرار الروابط المعطّلة

الروابط ليس لها سمة disabled، و<a disabled> لا يفعل شيئًا. لإيقاف زر رابط، احذف href (فعنصر <a> بلا href ليس رابطًا ولا يمكن النقر عليه أو التركيز عليه)، وعلّمه بـ aria-disabled="true" كي يعرف التنسيق وقارئات الشاشة ذلك:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled link button</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      display: inline-block;
      padding: 10px 18px;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      text-decoration: none;
    }
    .btn[aria-disabled="true"] {
      background: #e5e7eb;
      color: #6b7280;
      cursor: not-allowed;
    }
  </style>
</head>
<body>
  <a class="btn" href="https://example.com/">Continue</a>
  <a class="btn" aria-disabled="true">Continue</a>
</body>
</html>

اضغط Tab في المعاينة: يقع التركيز على الزر الأول فقط. بعض المواقع تُبقي href وتضيف pointer-events: none بدلًا من ذلك، لكن هذا يمنع الفأرة فقط. يبقى الرابط قابلًا للوصول بـ Tab، وما زال Enter يتبعه.

أزرار التبويب الجديد والتنزيل

كل سمات الروابط تبقى تعمل على الرابط المنسَّق كزر:

<a class="btn" href="/files/guide.pdf" download>Download the guide</a>
<a class="btn" href="https://github.com/" target="_blank" rel="noopener">GitHub</a>

وهذا سبب آخر لاستخدام <a>: فـ <button> ليس له download ولا target. المزيد عن target في فتح الرابط في تبويب جديد.

أخطاء شائعة

زر داخل رابط، أو رابط داخل زر. HTML غير صالح بسلوك غير متوقع.
<button onclick="location.href=..."> للتنقل العادي. لا تبويب جديد، ولا نسخ للرابط، ولا زحف لمحركات البحث.
role="button" على رابط ينقل إلى صفحة. يخبر مستخدمي قارئات الشاشة بوجود زر، ثم تتغير الصفحة. أبقِه رابطًا.
روابط منسَّقة كأزرار لإجراءات مثل «حذف» أو «فتح القائمة» مع href="#". إذا لم يُحمَّل شيء، فاستخدم <button type="button">.
<a disabled>. هذه السمة غير موجودة على الروابط. احذف href.
نسيان display: inline-block، فيتداخل الحشو العمودي مع الأسطر فوقه وتحته.

الأسئلة الشائعة

كيف أصنع زرًا ينتقل إلى صفحة أخرى في HTML؟

استخدم رابطًا ونسّقه كزر: <a href="/signup" class="btn">Sign up</a> مع CSS للحشو والخلفية وتدوير الزوايا وtext-decoration: none. يبدو كزر ويتصرف كرابط، وهذا ما هو عليه فعلًا.

هل يمكنني وضع زر داخل وسم a؟

لا. معيار HTML لا يسمح بمحتوى تفاعلي مثل <button> داخل <a>. تتعامل المتصفحات معه بطرق مختلفة، ويحصل مستخدمو لوحة المفاتيح على محطتي تركيز لعنصر واحد، وتعلن عنه قارئات الشاشة بطريقة مربكة. استخدم عنصرًا واحدًا.

هل يملك الزر سمة href؟

لا. <button> ليس له href. لإرسال المتصفح إلى عنوان استخدم <a href>، أو ضع الزر داخل <form> يحمل action (والسمة formaction على الزر تتجاوزها).

هل استخدام onclick مع location.href على زر أمر سيئ؟

يعمل، لكن القارئ يخسر كل ما تمنحه الروابط: النقر بالزر الأوسط وCtrl+نقرة لفتح تبويب جديد، ونسخ عنوان الرابط، ومعاينة العنوان عند مرور المؤشر، كما أن محركات البحث لا تتبعه كرابط. استخدم <a> عندما تكون الوجهة عنوانًا.

كيف أعطّل رابطًا يبدو كزر؟

الروابط ليس لها سمة disabled. احذف href كي يتوقف عن كونه رابطًا، وأضف aria-disabled="true"، ونسّقه كعنصر معطّل. أعد href حين يجب أن يعمل من جديد.

مفاهيم ذات صلة