תיעוד HTML עם דוגמאות להרצה: תיבת סימון (checkbox)

Q: איך יוצרים checkbox ב-HTML?

השתמשו ב- בתוך תווית: I agree . התווית הופכת גם את הטקסט ללחיץ.

Q: איך הופכים checkbox למסומן כברירת מחדל?

הוסיפו את המאפיין checked: . מה שקובע הוא עצם הנוכחות שלו, ולכן checked="false" עדיין מסמן אותה. ב-JavaScript, הגדירו box.checked = true או false.

Q: איך מקבלים את הערך של checkbox ב-JavaScript?

קראו את box.checked, שהוא true או false. box.value הוא הערך שהיא הייתה שולחת, והוא נשאר זהה בין אם התיבה מסומנת ובין אם לא. האזינו לאירוע change כדי להגיב כשהיא מתחלפת.

Q: איך משנים את הצבע של checkbox?

הגדירו עליה accent-color: input[type=checkbox] { accent-color: #16a34a; }. למראה מותאם לגמרי, הגדירו appearance: none וציירו את התיבה ואת סימן ה-V בעצמכם עם CSS.

איך יוצרים תיבת סימון ב-HTML

תיבת סימון היא <input type="checkbox">. שימו אותה בתוך <label> עם הטקסט שלה, כך שגם לחיצה על הטקסט מחליפה את מצבה. סמנו תיבה אחת או את שתיהן ולחצו על Save כדי לראות מה הטופס שולח:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox</title>
</head>
<body>
  <form>
    <p><label><input type="checkbox" name="newsletter" value="yes"> Send me the newsletter</label></p>
    <p><label><input type="checkbox" name="updates" checked> Product updates</label></p>
    <button type="submit">Save</button>
  </form>
</body>
</html>

במצב ברירת המחדל הטופס שולח רק updates=on. שני כללים מסבירים את זה:

תיבה מסומנת שולחת name=value. לתיבה השנייה אין value, ולכן היא שולחת את ברירת המחדל, on.
תיבה לא מסומנת לא שולחת כלום. לא newsletter=no, לא ערך ריק: השם פשוט חסר בנתונים.

checked ב-HTML קובע את מצב ההתחלה. כמו כל מאפיין בוליאני, מה שקובע הוא הנוכחות שלו: checked="false" עדיין מסמן את התיבה.

מאפייני checkbox

מאפיין	מה הוא עושה
`name`	המפתח שנשלח כשהתיבה מסומנת
`value`	מה שנשלח כשהתיבה מסומנת (ברירת מחדל `on`)
`checked`	מסומנת כשהעמוד נטען
`required`	הטופס לא יישלח עד שהתיבה הזו תסומן
`disabled`	אי אפשר לשנות את מצבה והיא לא נשלחת

קבוצה של תיבות סימון

ל"בחרו כל מה שמתאים מאלה", תנו לכל התיבות את אותו name ו-value שונה. עטפו אותן ב-<fieldset> עם <legend> כדי שלקבוצה יהיה שם:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox 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>Topics you like</legend>
      <label><input type="checkbox" name="topic" value="html" checked> HTML</label>
      <label><input type="checkbox" name="topic" value="css" checked> CSS</label>
      <label><input type="checkbox" name="topic" value="js"> JavaScript</label>
    </fieldset>
    <p><button type="submit">Save</button></p>
  </form>
</body>
</html>

הטופס שולח topic=html ו-topic=css: אותו שם פעמיים. רוב הפריימוורקים בצד השרת יכולים לקרוא את זה כרשימה. PHP הוא היוצא מן הכלל: הוא שומר רק את האחרון, אלא אם השם מסתיים בסוגריים מרובעים, name="topic[]". ב-JavaScript, new FormData(form).getAll('topic') מחזיר ['html', 'css'].

שליחת ערך כשהתיבה לא מסומנת

כשהשרת צריך "לא" מפורש, שימו input מוסתר עם אותו שם לפני תיבת הסימון. כשהיא לא מסומנת, נשלח רק הערך המוסתר; כשהיא מסומנת, נשלחים שניהם והשרת לוקח את האחרון:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Unchecked value</title>
</head>
<body>
  <form>
    <input type="hidden" name="marketing" value="no">
    <label><input type="checkbox" name="marketing" value="yes"> Marketing emails</label>
    <p>
      <label><input type="checkbox" name="terms" value="accepted" required> I accept the terms</label>
    </p>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

לחצו על Continue: הטופס מסרב עד שתסמנו את תיבת התנאים, כי היא required. אחר כך הוא שולח marketing=no ו-terms=accepted, או marketing=no, marketing=yes ו-terms=accepted כשהתיבה הראשונה מסומנת. פריימוורקים כמו Rails מייצרים בדיוק את זוג ה-input המוסתר הזה. בדקו איך השרת שלכם קורא שם שחוזר על עצמו לפני שאתם מסתמכים על זה.

בחירת הכל והמצב indeterminate

לתיבת סימון יש מראה שלישי, קו, עבור "חלק אבל לא הכל". הוא קיים רק ב-JavaScript: הגדירו box.indeterminate = true. תיבת "בחירת הכל" משתמשת בו כשחלק מהתיבות שהיא שולטת בהן מסומנות:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select all</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    ul { list-style: none; padding-inline-start: 24px; margin: 4px 0; }
  </style>
</head>
<body>
  <label><input type="checkbox" id="all"> Select all</label>
  <ul>
    <li><label><input type="checkbox" class="item" checked> Email</label></li>
    <li><label><input type="checkbox" class="item"> SMS</label></li>
    <li><label><input type="checkbox" class="item"> Push</label></li>
  </ul>

  <script>
    const all = document.querySelector('#all');
    const items = [...document.querySelectorAll('.item')];

    const sync = () => {
      const count = items.filter((box) => box.checked).length;
      all.checked = count === items.length;
      all.indeterminate = count > 0 && count < items.length;
    };

    all.addEventListener('change', () => {
      items.forEach((box) => { box.checked = all.checked; });
    });
    items.forEach((box) => box.addEventListener('change', sync));
    sync();
  </script>
</body>
</html>

indeterminate משנה רק את המראה (ואת מה שקוראי מסך מכריזים: "mixed" או "partially checked"). מתחת לזה התיבה עדיין מסומנת או לא מסומנת, וזה מה שהטופס שולח. לחיצה על תיבה במצב indeterminate מנקה את הקו ומחליפה את מצבה.

השתמשו באירוע change כדי להגיב לתיבת סימון, וקראו את box.checked בשביל המצב שלה. box.value לא משתנה כשמצב התיבה מתחלף.

עיצוב תיבות סימון

השינוי המהיר ביותר הוא accent-color, שצובע מחדש את תיבת הסימון המקורית ושומר על כל ההתנהגות שלה. למראה שונה לגמרי, appearance: none מסיר את הציור המקורי ומאפשר לעצב את ה-input כמו כל תיבה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Checkbox styles</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .accent { accent-color: #16a34a; width: 20px; height: 20px; }

    .custom {
      appearance: none;
      width: 20px;
      height: 20px;
      margin: 0;
      border: 2px solid #6b7280;
      border-radius: 5px;
      display: grid;
      place-content: center;
    }
    .custom::before {
      content: "";
      width: 10px;
      height: 6px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(-45deg) translate(1px, -1px);
      visibility: hidden;
    }
    .custom:checked { background: #2563eb; border-color: #2563eb; }
    .custom:checked::before { visibility: visible; }
    .custom:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="accent" checked> accent-color</label>
  <label><input type="checkbox" class="custom" checked> appearance: none</label>
  <label><input type="checkbox" class="custom"> appearance: none, unchecked</label>
</body>
</html>

התיבה המותאמת היא עדיין תיבת סימון אמיתית: היא מתחלפת בלחיצה וב-Space, נשלחת עם הטופס ומוכרזת כתיבת סימון. ציירו אותה עם :checked והשאירו סגנון :focus-visible, כי בלי הציור המקורי אין טבעת מיקוד שלא הוספתם בעצמכם.

מתג (toggle switch)

מתג הוא תיבת סימון שמשמעותה "פועל/כבוי עכשיו" ולא "לכלול את זה". ציירו אותו עם appearance: none והוסיפו role="switch" כדי שקוראי מסך יכריזו על מתג פועל או כבוי במקום על תיבת סימון מסומנת:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Toggle switch</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: inline-flex; align-items: center; gap: 10px; }
    .switch {
      appearance: none;
      margin: 0;
      width: 44px;
      height: 24px;
      border-radius: 12px;
      background: #9ca3af;
      position: relative;
      cursor: pointer;
      transition: background 0.2s;
    }
    .switch::before {
      content: "";
      position: absolute;
      top: 3px;
      inset-inline-start: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      transition: inset-inline-start 0.2s;
    }
    .switch:checked { background: #16a34a; }
    .switch:checked::before { inset-inline-start: 23px; }
    .switch:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <label><input type="checkbox" class="switch" role="switch" name="dark" checked> Dark mode</label>
</body>
</html>

inset-inline-start ממקם את הידית מתחילת השורה, כך שבעמודים מימין לשמאל המתג מחליק לכיוון השני, כמו שצריך. לבחירות כן/לא מקובצות שבהן אפשר לבחור רק אחת, ראו HTML radio button.

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

ציפייה ל-false מתיבה לא מסומנת. לא נשלח כלום. טפלו בשם חסר כ"כבוי" בשרת, או הוסיפו את ה-input המוסתר.
checked="false". זה עדיין מסמן את התיבה. הסירו את המאפיין.
תיבת סימון בלי תווית, או עם טקסט לידה שאינו <label>. התיבה הקטנה הופכת למטרת הלחיצה היחידה וקוראי מסך מכריזים "checkbox" בלי שם. ראו HTML label.
שכחה של value, כך שכל תיבה בקבוצה שולחת on והשרת לא יכול להבחין ביניהן.
קריאה של box.value כדי לבדוק אם היא מסומנת. השתמשו ב-box.checked.
תיבות סימון ל"בחרו אחת". בשביל זה יש כפתורי רדיו.

שאלות נפוצות

איך יוצרים checkbox ב-HTML?

השתמשו ב-<input type="checkbox"> בתוך תווית: <label><input type="checkbox" name="terms" value="yes"> I agree</label>. התווית הופכת גם את הטקסט ללחיץ.

איך הופכים checkbox למסומן כברירת מחדל?

הוסיפו את המאפיין checked: <input type="checkbox" name="news" checked>. מה שקובע הוא עצם הנוכחות שלו, ולכן checked="false" עדיין מסמן אותה. ב-JavaScript, הגדירו box.checked = true או false.

איזה ערך שולחת תיבת סימון לא מסומנת?

שום ערך. תיבת סימון לא מסומנת לא נכללת בכלל בנתונים שנשלחים. תיבה מסומנת שולחת את ה-value שלה, או on אם אין לה value. אם השרת צריך "לא" מפורש, שימו input מוסתר עם אותו שם לפני תיבת הסימון.

איך מקבלים את הערך של checkbox ב-JavaScript?

קראו את box.checked, שהוא true או false. box.value הוא הערך שהיא הייתה שולחת, והוא נשאר זהה בין אם התיבה מסומנת ובין אם לא. האזינו לאירוע change כדי להגיב כשהיא מתחלפת.

איך משנים את הצבע של checkbox?

הגדירו עליה accent-color: input[type=checkbox] { accent-color: #16a34a; }. למראה מותאם לגמרי, הגדירו appearance: none וציירו את התיבה ואת סימן ה-V בעצמכם עם CSS.

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