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

Q: كيف أنشئ أزرار اختيار في HTML؟

اكتب لكل خيار، وأعطها كلها الاسم name نفسه وقيمة value مختلفة، وضع كل واحد داخل : Medium . الاسم المشترك يجعلها مجموعة واحدة لا يُختار منها إلا زر واحد.

Q: لماذا أستطيع اختيار أكثر من زر radio؟

لأن الأزرار لا تشترك في الاسم name نفسه. أزرار الاختيار لا تشكّل مجموعة إلا عبر name متطابق (في النموذج نفسه)، ولا يمكن اختيار إلا زر واحد في كل مجموعة.

Q: كيف أحصل على قيمة زر radio المختار في JavaScript؟

استخدم form.elements.size.value، حيث size هو اسم المجموعة، فتُرجع قيمة الزر المختار، أو نصًا فارغًا إن لم يُختر شيء. ومن دون نموذج: document.querySelector('input[name="size"]:checked')?.value.

Q: كيف أحدد زر radio افتراضيًا؟

أضف checked إلى زر واحد في المجموعة: . وإن حملها أكثر من زر، يفوز الأخير.

كيف تنشئ أزرار اختيار في HTML

أزرار الاختيار تتيح للقارئ اختيار خيار واحد بالضبط من مجموعة. كل خيار هو <input type="radio">، وإعطاؤها الاسم name نفسه هو ما يجعلها مجموعة. اختر مقاسًا واضغط Order:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio buttons</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Size</legend>
      <label><input type="radio" name="size" value="s"> Small</label>
      <label><input type="radio" name="size" value="m" checked> Medium</label>
      <label><input type="radio" name="size" value="l"> Large</label>
    </fieldset>
    <p><button type="submit">Order</button></p>
  </form>
</body>
</html>

يرسل النموذج زوجًا واحدًا، size=m: اسم المجموعة name وقيمة الزر المختار value. الأجزاء:

الاسم name نفسه على كل زر في المجموعة. اختيار واحد يلغي اختيار الآخرين.
قيمة value مختلفة لكل زر. وهي ما يستقبله الخادم. زر الاختيار بلا value يرسل on، وهذا لا يخبر الخادم بشيء.
checked على الخيار الافتراضي.
<label> حول كل زر، كي يكون النص قابلًا للنقر، و <fieldset> مع <legend> كي تعلن قارئات الشاشة السؤال («Size») مع كل خيار.

الاسم هو ما يصنع المجموعة

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio groups</title>
  <style>
    body { font-family: system-ui, sans-serif; display: flex; flex-wrap: wrap; gap: 16px; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    .broken { border-color: #dc2626; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <fieldset>
    <legend>Crust</legend>
    <label><input type="radio" name="crust" value="thin" checked> Thin</label>
    <label><input type="radio" name="crust" value="thick"> Thick</label>
  </fieldset>
  <fieldset>
    <legend>Sauce</legend>
    <label><input type="radio" name="sauce" value="tomato" checked> Tomato</label>
    <label><input type="radio" name="sauce" value="pesto"> Pesto</label>
  </fieldset>
  <fieldset class="broken">
    <legend>Broken: different names</legend>
    <label><input type="radio" name="a" value="1"> One</label>
    <label><input type="radio" name="b" value="2"> Two</label>
    <label><input type="radio" name="c" value="3"> Three</label>
  </fieldset>
</body>
</html>

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

المجموعات الإلزامية وغياب الخيار الافتراضي

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Required radio group</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    fieldset { border: 1px solid #9ca3af; border-radius: 8px; }
    label { display: block; margin: 4px 0; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>How did you hear about us?</legend>
      <label><input type="radio" name="source" value="search" required> Search engine</label>
      <label><input type="radio" name="source" value="friend"> A friend</label>
      <label><input type="radio" name="source" value="video"> A video</label>
      <label><input type="radio" name="source" value="other"> Other</label>
    </fieldset>
    <p><button type="submit">Continue</button></p>
  </form>
</body>
</html>

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

يمكن للنقر أن يختار زر اختيار لكنه لا يلغي اختياره أبدًا. إذا كان يجب أن تكون «لا إجابة» ممكنة بعد الاختيار، فأضف خيارًا صريحًا لذلك.

قراءة القيمة المختارة في JavaScript

form.elements.name تُرجع المجموعة كلها، و.value الخاصة بها هي قيمة الزر المختار (نص فارغ إن لم يُختر شيء). وحدث change ينطلق على الزر الذي صار مختارًا:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Selected value</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { margin-inline-end: 12px; }
    #price { font-size: 1.4em; font-weight: bold; color: #2563eb; }
  </style>
</head>
<body>
  <form id="billing">
    <label><input type="radio" name="period" value="monthly" checked> Monthly</label>
    <label><input type="radio" name="period" value="yearly"> Yearly</label>
  </form>
  <p>Price: <span id="price"></span></p>

  <script>
    const form = document.querySelector('#billing');
    const prices = { monthly: '12 per month', yearly: '96 per year' };
    const show = () => {
      document.querySelector('#price').textContent = prices[form.elements.period.value];
    };
    form.addEventListener('change', show);
    show();
  </script>
</body>
</html>

المستمع على النموذج، فيلتقط التغيير في أي من حقوله. وخارج النموذج، جِد الزر المختار بـ document.querySelector('input[name="period"]:checked').

سلوك لوحة المفاتيح

مجموعة أزرار الاختيار محطة واحدة في ترتيب Tab. ينقلك Tab إلى داخل المجموعة، فيقع على الزر المختار (أو على الأول إن لم يُختر شيء)، ومفاتيح الأسهم تنقل الاختيار بين الخيارات. وTab مرة أخرى يغادر المجموعة. هذا يأتي مجانًا مع أزرار الاختيار الحقيقية التي تشترك في name، وهو سبب آخر لعدم إعادة بنائها من عناصر <div>.

تنسيق أزرار الاختيار

accent-color تعيد تلوين زر الاختيار الأصلي. وappearance: none تتيح لك رسم دائرتك الخاصة. وبما أن زر الاختيار المخفي ما زال يمكن اختياره عبر تسميته، يمكن للمجموعة أن تبدو كمجموعة بطاقات مع الاحتفاظ بكل سلوك أزرار الاختيار:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Radio styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .accent { accent-color: #16a34a; }

    .dot {
      appearance: none;
      width: 18px;
      height: 18px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 50%;
      vertical-align: middle;
    }
    .dot:checked { border: 6px solid #2563eb; }
    .dot:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

    .cards { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 16px 0 0; }
    .card { display: block; padding: 10px 14px; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer; }
    .card input { position: absolute; opacity: 0; }
    .card:has(input:checked) { border-color: #2563eb; background: #eff6ff; }
    .card:has(input:focus-visible) { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="radio" class="accent" name="c1" checked> accent-color</label>
  <label><input type="radio" class="accent" name="c1"> accent-color</label>
  <p>
    <label><input type="radio" class="dot" name="c2" checked> Custom</label>
    <label><input type="radio" class="dot" name="c2"> Custom</label>
  </p>
  <fieldset class="cards">
    <legend>Plan</legend>
    <label class="card"><input type="radio" name="plan" value="free" checked> Free</label>
    <label class="card"><input type="radio" name="plan" value="pro"> Pro</label>
    <label class="card"><input type="radio" name="plan" value="team"> Team</label>
  </fieldset>
</body>
</html>

الدائرة المخصصة مجرد حد سميك عند الاختيار. والبطاقات تخفي الحقل بـ opacity: 0 لا بـ display: none، فيبقى قابلًا للتركيز وتظل مفاتيح الأسهم تعمل، و:has(input:checked) تنسّق البطاقة المختارة. تعمل :has() في الإصدارات الحالية من Chrome وFirefox وSafari.

radio أم checkbox أم select؟

استخدم	متى
أزرار الاختيار	خيار واحد من خيارات قليلة (نحو 2 إلى 6) يجب أن تكون كلها ظاهرة
مربعات الاختيار	أي عدد من الخيارات، بما في ذلك لا شيء
`<select>`	خيار واحد من قائمة طويلة، مثل الدول (راجع القائمة المنسدلة select)

أخطاء شائعة

أسماء name مختلفة في مجموعة واحدة. يمكن اختيار كل زر ولا يمكن مسح أي منها.
غياب value. يستقبل الخادم on أيًا كان الاختيار.
إخفاء الحقل بـ display: none في تصميم مخصص. لا يعود بالإمكان التركيز عليه أو استخدامه بلوحة المفاتيح.
غياب <fieldset> و<legend>. تعلن قارئات الشاشة «Small، زر اختيار» بلا سؤال يرافقه.
زر اختيار واحد لمربع «أوافق». لا يمكن إلغاء تحديده أبدًا، فاستخدم مربع الاختيار.
checked على عدة أزرار في مجموعة واحدة. الأخير وحده ينتهي مختارًا.

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

كيف أنشئ أزرار اختيار في HTML؟

اكتب <input type="radio"> لكل خيار، وأعطها كلها الاسم name نفسه وقيمة value مختلفة، وضع كل واحد داخل <label>: <label><input type="radio" name="size" value="m"> Medium</label>. الاسم المشترك يجعلها مجموعة واحدة لا يُختار منها إلا زر واحد.

لماذا أستطيع اختيار أكثر من زر radio؟

لأن الأزرار لا تشترك في الاسم name نفسه. أزرار الاختيار لا تشكّل مجموعة إلا عبر name متطابق (في النموذج نفسه)، ولا يمكن اختيار إلا زر واحد في كل مجموعة.

كيف أحصل على قيمة زر radio المختار في JavaScript؟

استخدم form.elements.size.value، حيث size هو اسم المجموعة، فتُرجع قيمة الزر المختار، أو نصًا فارغًا إن لم يُختر شيء. ومن دون نموذج: document.querySelector('input[name="size"]:checked')?.value.

كيف أحدد زر radio افتراضيًا؟

أضف checked إلى زر واحد في المجموعة: <input type="radio" name="plan" value="free" checked>. وإن حملها أكثر من زر، يفوز الأخير.

هل يمكن إلغاء اختيار زر radio؟

ليس بالنقر عليه، فالنقر يختار فقط. قدّم خيار «لا شيء»، أو أعد ضبط النموذج، أو اضبط button.checked = false في JavaScript. وإذا كان يجب أن يكون الاختيار اختياريًا وقابلًا للإلغاء، فقد يناسب مربع الاختيار أو select أكثر.

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