وثائق HTML قابلة للتشغيل: وسم button

Q: كيف أصنع زرًا في HTML؟

اكتب Click me . النص بين الوسمين هو التسمية. أضف مستمعًا لحدث click في JavaScript ليفعل شيئًا، أو ضعه داخل مع type="submit" لإرسال النموذج.

Q: ما النوع الافتراضي لزر HTML؟

submit. العنصر بلا سمة type داخل نموذج يرسل ذلك النموذج عند النقر، ولهذا قد يعيد زر عادي داخل نموذج تحميل الصفحة. اكتب type="button" لأي زر يشغّل JavaScript بدلًا من ذلك.

Q: ما الفرق بين button وinput type=submit؟

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

Q: كيف أعطّل زرًا في HTML؟

أضف السمة disabled: Save . الزر المعطّل لا يمكن النقر عليه ولا التركيز عليه، ولا يُرسل اسمه وقيمته مع النموذج. احذف السمة (btn.disabled = false في JavaScript) لتفعيله من جديد.

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

استخدم رابطًا منسَّقًا كزر: See pricing . العنصر للإجراءات في الصفحة الحالية. ووضع زر داخل يجعل HTML غير صالح.

Q: لماذا يعيد الزر تحميل الصفحة؟

لأنه داخل وبلا type، فهو زر إرسال، فيرسل المتصفح النموذج ويحمّل الاستجابة. أضف إليه type="button"، أو استدعِ event.preventDefault() في مستمع submit إن كنت تعالج النموذج بـ JavaScript.

كيف تصنع زرًا في HTML

الزر هو العنصر <button>. المحتوى بين الوسمين هو ما يراه المستخدم، وtype="button" تقول إنه يشغّل سكربتك ولا يرسل نموذجًا. انقره في المعاينة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button</title>
</head>
<body>
  <button type="button" id="like">Like</button>
  <p>Likes: <span id="count">0</span></p>

  <script>
    const count = document.querySelector('#count');
    document.querySelector('#like').addEventListener('click', () => {
      count.textContent = Number(count.textContent) + 1;
    });
  </script>
</body>
</html>

هذا كل ما يحتاجه زر يعمل: تسمية، وtype، وشيء يستمع إلى click. يجعله المتصفح قابلًا للتركيز بلوحة المفاتيح ويفعّله بـ Enter أو المسافة، فيحصل عليه مستخدمو لوحة المفاتيح من دون جهد. أما <div> مع معالج نقر فلا يحصل على شيء من ذلك.

قد ترى أيضًا onclick="..." مكتوبًا في الوسم مباشرة. يعمل، لكن addEventListener يُبقي السكربت خارج البنية ويتيح لعدة مستمعين أن يتشاركوا زرًا واحدًا.

أنواع الأزرار الثلاثة

السمة type تحدد ما يفعله الزر عند الضغط عليه.

`type`	ما يفعله	استخدمه لـ
`submit`	يرسل النموذج الذي ينتمي إليه. وهو النوع الافتراضي.	الإجراء الرئيسي في النموذج
`button`	لا شيء بذاته، وJavaScript الخاصة بك تقرر	التبديل، مربعات الحوار، العدادات، أي شيء بسكربت
`reset`	يعيد كل حقل في النموذج إلى قيمته الابتدائية	نادرًا، فالمستخدمون يضغطونه بالخطأ

اكتب شيئًا، ثم جرّب كل زر. المعاينة لا تغادر الصفحة عند إرسال النموذج، بل تعرض البيانات التي كان النموذج سيرسلها.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Button types</title>
</head>
<body>
  <form>
    <label>Name <input name="name" value="Ada"></label>
    <p>
      <button type="submit">Submit</button>
      <button type="reset">Reset</button>
      <button type="button" id="upper">Uppercase</button>
    </p>
  </form>

  <script>
    document.querySelector('#upper').addEventListener('click', () => {
      const field = document.querySelector('input[name="name"]');
      field.value = field.value.toUpperCase();
    });
  </script>
</body>
</html>

Reset تعيد القيمة المكتوبة في HTML (Ada)، لا حقلًا فارغًا. وإذا حذفت type="button" من Uppercase، يصبح زر إرسال: يحوّل الاسم إلى أحرف كبيرة ثم يرسل النموذج.

زر الإرسال في HTML: إرسال اسم وقيمة

يمكن لزر الإرسال أن يحمل name وvalue خاصين به. لا يُرسلان مع النموذج إلا إذا كان هذا الزر هو الذي أرسله، فيمكن لزرين أن يتشاركا نموذجًا واحدًا ويخبرا الخادم بالإجراء الذي اختير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Submit buttons</title>
</head>
<body>
  <form>
    <label>Title <input name="title" value="My first post" required></label>
    <p>
      <button type="submit" name="action" value="draft">Save draft</button>
      <button type="submit" name="action" value="publish">Publish</button>
    </p>
  </form>
</body>
</html>

اضغط Publish وسيرسل النموذج title=My first post وaction=publish. امسح العنوان واضغط أيًّا من الزرين: required تمنع الإرسال ويعرض المتصفح رسالته الخاصة. الضغط على Enter داخل الحقل النصي يرسل أيضًا، ويعامله المتصفح كضغطة على أول زر إرسال، فيرسل action=draft.

تقبل أزرار الإرسال أيضًا سمات تتجاوز إعدادات النموذج لذلك الزر وحده: formaction (عنوان مختلف)، وformmethod، وformtarget، وformnovalidate التي تتخطى التحقق. وformnovalidate هي الخيار المعتاد لزر «حفظ المسودة» الذي يجب أن يعمل بينما الحقول الإلزامية ما زالت فارغة.

الزر الموضوع خارج نموذجه يستطيع مع ذلك إرساله بالسمة form التي تأخذ id النموذج: <button type="submit" form="signup">Sign up</button>.

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

السمة disabled توقف الزر. الزر المعطّل يتجاهل النقرات، ويتخطاه مفتاح Tab، ولا يُرسل مع النموذج. وتجعله المتصفحات رماديًا أيضًا. من الأنماط الشائعة إبقاء زر الإرسال معطّلًا حتى يتحقق شرط ما:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Disabled button</title>
</head>
<body>
  <form>
    <label>
      <input type="checkbox" id="agree" name="terms" value="accepted">
      I accept the terms
    </label>
    <p><button type="submit" id="go" disabled>Create account</button></p>
  </form>

  <script>
    const agree = document.querySelector('#agree');
    const go = document.querySelector('#go');
    agree.addEventListener('change', () => {
      go.disabled = !agree.checked;
    });
  </script>
</body>
</html>

في JavaScript تكون button.disabled خاصية منطقية: اضبطها على true أو false. أما في HTML فوجود السمة هو ما يهم، لذلك disabled="false" تعطّل الزر مع ذلك.

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

تنسيق الزر بـ CSS

ترسم المتصفحات الأزرار بخطها وحدودها وخلفيتها الخاصة. ضبط بضع خصائص يستبدل كل ذلك. أبقِ نمط تركيز ظاهرًا: فهو ما يعرف به مستخدمو لوحة المفاتيح أين هم.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .btn {
      font: inherit;
      padding: 10px 18px;
      border: 2px solid #2563eb;
      border-radius: 8px;
      background: #2563eb;
      color: #fff;
      cursor: pointer;
    }
    .btn:hover { background: #1d4ed8; border-color: #1d4ed8; }
    .btn:active { transform: translateY(1px); }
    .btn:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
    .btn:disabled { opacity: 0.5; cursor: not-allowed; }
    .btn-secondary { background: #fff; color: #2563eb; }
    .btn-secondary:hover { background: #e5e7eb; }
  </style>
</head>
<body>
  <button type="button" class="btn">Primary</button>
  <button type="button" class="btn btn-secondary">Secondary</button>
  <button type="button" class="btn" disabled>Disabled</button>
</body>
</html>

الغرض من كل قاعدة:

font: inherit تجعل الزر يستخدم خط الصفحة. من دونها تستخدم الأزرار خط النماذج الأصغر الخاص بالمتصفح (13.33px في Chrome وFirefox).
cursor: pointer تُظهر مؤشر اليد. الأزرار تُظهر السهم العادي افتراضيًا.
:hover و:active و:focus-visible تنسّق حالات المؤشر والضغط والتركيز بلوحة المفاتيح. :focus-visible تُظهر الحلقة عند التركيز بلوحة المفاتيح لا بعد النقر بالفأرة، فلا تحتاج إلى إزالة outline لتجنبها.
:disabled تستهدف الأزرار التي تحمل السمة disabled.

اضغط Tab في المعاينة لترى حلقة التركيز الكهرمانية تنتقل بين الزرين الأولين. والمعطّل يتم تخطيه. (في Mac لا ينتقل Safari وFirefox بـ Tab إلى الأزرار إلا إذا فُعّل التنقل بلوحة المفاتيح في إعدادات النظام، وفي Safari يعمل Option+Tab من دونه.) للقائمة الكاملة من الحالات، راجع hover في CSS.

أزرار بأيقونات

بما أن <button> يمكن أن يحتوي على HTML، توضع الأيقونة بداخله بجانب النص. الزر الذي فيه أيقونة فقط لا نص فيه لتعلنه قارئات الشاشة، فأعطه aria-label:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Icon buttons</title>
  <style>
    button {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font: inherit;
      padding: 8px 12px;
      border: 1px solid #111827;
      border-radius: 6px;
      background: #fff;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button type="button">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M2 8h12M8 2v12" stroke="#16a34a" stroke-width="2"/>
    </svg>
    Add item
  </button>

  <button type="button" aria-label="Delete">
    <svg width="16" height="16" viewBox="0 0 16 16" aria-hidden="true">
      <path d="M3 3l10 10M13 3L3 13" stroke="#dc2626" stroke-width="2"/>
    </svg>
  </button>
</body>
</html>

aria-hidden="true" على SVG تُبقيه خارج شجرة إمكانية الوصول، فيُعلن عن الزر الأول «Add item، زر» وعن الثاني «Delete، زر».

الفرق بين button وinput type="submit"

<input type="submit"> هي الطريقة الأقدم لكتابة زر إرسال. كلاهما يرسل النموذج بالطريقة نفسها، والفرق فيما يمكن أن يحتويه كل منهما.

<input type="submit" value="Send">   <!-- label comes from value, text only -->
<button type="submit">Send</button>  <!-- label is the content, HTML allowed -->

	`<button>`	`<input type="submit">`
التسمية	المحتوى بين الوسمين	السمة `value`
يمكن أن يحتوي على أيقونات أو شيفرة	نعم	لا
وسم الإغلاق	إلزامي	لا يوجد (عنصر فارغ)
النوع الافتراضي	`submit`	إرسال دائمًا

استخدم <button>. السبب الوحيد للإبقاء على <input type="submit"> هو CSS أو JavaScript موجودة تحدده. وهناك أيضًا <input type="button"> و<input type="reset">، وهي الفكرة نفسها للنوعين الآخرين.

زر أم رابط؟

الزر يفعل شيئًا في الصفحة الحالية: يرسل، يفتح، يبدّل، يحذف. والرابط ينتقل إلى عنوان آخر. إذا كان النقر يغيّر شريط العنوان، فيجب أن يكون <a href>، منسَّقًا كزر إن تطلّب التصميم ذلك. هذا النمط، ولماذا يُعد الزر داخل رابط غير صالح، مشروح في زر كرابط في HTML.

إمكانية الوصول

استخدم <button> حقيقيًا. فهو يقبل التركيز، ويعمل مع Enter والمسافة، ويُعلن عنه كزر. إعادة بناء ذلك على <div> تحتاج إلى role وtabindex ومعالجات للمفاتيح، وتبقى غالبًا ناقصة.
كل زر يحتاج إلى اسم: نصه، أو aria-label حين لا يحتوي إلا على أيقونة.
أبقِ نمط تركيز ظاهرًا. outline: none بلا بديل تترك مستخدمي لوحة المفاتيح تائهين.
اجعل الهدف كبيرًا بما يكفي لإصابته. تطلب WCAG 2.2 مساحة لا تقل عن 24 في 24 بكسل CSS، والحشو كما في المثال المنسَّق أعلاه يعطي ارتفاعًا بنحو 40 بكسل.
لزر التبديل، أضف aria-pressed="true" أو "false" وحدّثها حين تتغير الحالة.

أخطاء شائعة

زر داخل نموذج بلا type. يرسل النموذج. اكتب type="button" على كل زر لا يُقصد به الإرسال.
وضع زر داخل رابط، <a href="/x"><button>Go</button></a>. هذا HTML غير صالح ويتصرف بشكل مختلف بين المتصفحات. استخدم عنصرًا واحدًا: رابطًا منسَّقًا كزر.
استخدام <div onclick> كزر. لا يمكن الوصول إليه بلوحة المفاتيح.
إزالة إطار التركيز من دون إضافة نمط :focus-visible.
كتابة disabled="false" وتوقع زر مفعّل. احذف السمة بدلًا من ذلك.
نسيان font: inherit والتساؤل لماذا تستخدم الأزرار خطًا مختلفًا عن بقية الصفحة.

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

كيف أصنع زرًا في HTML؟

اكتب <button type="button">Click me</button>. النص بين الوسمين هو التسمية. أضف مستمعًا لحدث click في JavaScript ليفعل شيئًا، أو ضعه داخل <form> مع type="submit" لإرسال النموذج.

ما النوع الافتراضي لزر HTML؟

submit. العنصر <button> بلا سمة type داخل نموذج يرسل ذلك النموذج عند النقر، ولهذا قد يعيد زر عادي داخل نموذج تحميل الصفحة. اكتب type="button" لأي زر يشغّل JavaScript بدلًا من ذلك.

ما الفرق بين button وinput type=submit؟

كلاهما يرسل النموذج. <button> يمكن أن يحتوي على HTML (أيقونة، نص عريض) بين وسميه، بينما يأخذ <input type="submit"> تسميته من السمة value ولا يحمل إلا نصًا عاديًا. معظم الشيفرة الحديثة تستخدم <button>.

كيف أعطّل زرًا في HTML؟

أضف السمة disabled: <button disabled>Save</button>. الزر المعطّل لا يمكن النقر عليه ولا التركيز عليه، ولا يُرسل اسمه وقيمته مع النموذج. احذف السمة (btn.disabled = false في JavaScript) لتفعيله من جديد.

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

استخدم رابطًا منسَّقًا كزر: <a href="/pricing" class="btn">See pricing</a>. العنصر <button> للإجراءات في الصفحة الحالية. ووضع زر داخل <a> يجعل HTML غير صالح.

لماذا يعيد الزر تحميل الصفحة؟

لأنه داخل <form> وبلا type، فهو زر إرسال، فيرسل المتصفح النموذج ويحمّل الاستجابة. أضف إليه type="button"، أو استدعِ event.preventDefault() في مستمع submit إن كنت تعالج النموذج بـ JavaScript.

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