תיעוד HTML עם דוגמאות להרצה: כפתורי רדיו

Q: איך יוצרים כפתורי רדיו ב-HTML?

כתבו אחד לכל אפשרות, תנו לכולם אותו name ו-value שונה, ושימו כל אחד בתוך : Medium . השם המשותף הופך אותם לקבוצה אחת שבה אפשר לבחור רק אחד.

Q: למה אפשר לבחור יותר מכפתור רדיו אחד?

לכפתורים אין אותו name. כפתורי רדיו יוצרים קבוצה רק דרך name זהה (באותו טופס), ורק כפתור אחד בכל קבוצה יכול להיות נבחר.

Q: איך קוראים את הערך של כפתור הרדיו הנבחר ב-JavaScript?

השתמשו ב-form.elements.size.value, כאשר size הוא שם הקבוצה; הוא מחזיר את הערך של הכפתור הנבחר, או מחרוזת ריקה אם אף אחד לא נבחר. בלי טופס: document.querySelector('input[name="size"]:checked')?.value.

Q: איך קובעים כפתור רדיו כברירת מחדל?

הוסיפו 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") יחד עם כל אפשרות.

ה-name יוצר את הקבוצה

כפתורי רדיו עם שמות שונים הם קבוצות נפרדות, ולכל קבוצה יש בחירה משלה. בדוגמה הזו יש שתי קבוצות, ועוד סט שבור שבו כל רדיו קיבל בטעות שם משלו:

<!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 בלי לבחור והדפדפן עוצר את השליחה עם הודעה. ברגע שנבחרת אפשרות כלשהי, כל הקבוצה תקינה. קבוצה שלא נבחר בה כלום ושאינה חובה לא שולחת כלום, כמו checkbox לא מסומן.

לחיצה יכולה לבחור רדיו אבל אף פעם לא לבטל את הבחירה בו. אם צריך לאפשר "אין תשובה" אחרי שכבר נבחר משהו, הוסיפו לזה אפשרות מפורשת.

קריאת הערך הנבחר ב-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>

העיגול המותאם הוא פשוט מסגרת עבה כשהוא מסומן. הכרטיסים מסתירים את ה-input עם opacity: 0 ולא עם display: none, כך שאפשר עדיין להעביר אליו פוקוס ומקשי החצים ממשיכים לעבוד, ו-:has(input:checked) מעצב את הכרטיס הנבחר. :has() עובד בגרסאות הנוכחיות של Chrome, Firefox ו-Safari.

רדיו, checkbox או select?

שימוש	מתי
כפתורי רדיו	בחירה אחת מתוך מעט אפשרויות (בערך 2 עד 6) שכולן צריכות להיות גלויות
תיבות סימון	כל מספר של בחירות, כולל אף אחת
`<select>`	בחירה אחת מרשימה ארוכה, כמו מדינות (ראו HTML select)

טעויות נפוצות

name שונה בתוך קבוצה אחת. אפשר לבחור כל רדיו ואי אפשר לנקות אף אחד.
אין value. השרת מקבל on לא משנה מה נבחר.
הסתרת ה-input עם display: none בעיצוב מותאם. כבר אי אפשר להעביר אליו פוקוס או להשתמש בו במקלדת.
אין <fieldset> ו-<legend>. קוראי מסך מכריזים "Small, radio button" בלי שאלה שתלווה את זה.
כפתור רדיו בודד לתיבת "I agree". אי אפשר לבטל את הסימון שלו אף פעם; השתמשו ב-checkbox.
checked על כמה כפתורי רדיו באותה קבוצה. רק האחרון נשאר נבחר.

שאלות נפוצות

איך יוצרים כפתורי רדיו ב-HTML?

כתבו <input type="radio"> אחד לכל אפשרות, תנו לכולם אותו name ו-value שונה, ושימו כל אחד בתוך <label>: <label><input type="radio" name="size" value="m"> Medium</label>. השם המשותף הופך אותם לקבוצה אחת שבה אפשר לבחור רק אחד.

למה אפשר לבחור יותר מכפתור רדיו אחד?

לכפתורים אין אותו name. כפתורי רדיו יוצרים קבוצה רק דרך name זהה (באותו טופס), ורק כפתור אחד בכל קבוצה יכול להיות נבחר.

איך קוראים את הערך של כפתור הרדיו הנבחר ב-JavaScript?

השתמשו ב-form.elements.size.value, כאשר size הוא שם הקבוצה; הוא מחזיר את הערך של הכפתור הנבחר, או מחרוזת ריקה אם אף אחד לא נבחר. בלי טופס: document.querySelector('input[name="size"]:checked')?.value.

איך קובעים כפתור רדיו כברירת מחדל?

הוסיפו checked לכפתור אחד בקבוצה: <input type="radio" name="plan" value="free" checked>. אם יש אותו לכמה כפתורים, האחרון גובר.

אפשר לבטל בחירה של כפתור רדיו?

לא בלחיצה עליו; לחיצה רק בוחרת. הציעו אפשרות "None", אפסו את הטופס, או הגדירו button.checked = false ב-JavaScript. אם הבחירה צריכה להיות אופציונלית וניתנת להסרה, checkbox או select עשויים להתאים יותר.

מושגים קשורים