תיעוד HTML עם דוגמאות להרצה: רשימה נפתחת (Select)

Q: איך יוצרים רשימה נפתחת ב-HTML?

משתמשים ב- עם אחד לכל בחירה: Red Blue . תנו ל-select name ו- .

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

הוסיפו selected לאותה אפשרות: Blue . בלעדיו, האפשרות הראשונה נבחרת. ב-JavaScript, הגדירו select.value = 'blue'.

Q: איך מוסיפים placeholder ל-select?

הפכו את האפשרות הראשונה לריקה ולא ניתנת לבחירה: Choose a country . הוסיפו required ל- כדי שאי אפשר יהיה לשלוח את הטופס עד שנבחרת אפשרות אמיתית.

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

select.value הוא הערך של האפשרות הנבחרת. לטקסט הגלוי שלה השתמשו ב-select.selectedOptions[0].text, והאזינו לאירוע change כדי להגיב כשהבחירה משתנה. ל-select מרובה בחירות, עברו על select.selectedOptions.

Q: מה ההבדל בין select ל-datalist?

מאפשר רק את האפשרויות שברשימה. עם מציע אפשרויות בזמן שהקורא מקליד, אבל מקבל כל טקסט. השתמשו ב-select כשהתשובה חייבת להיות אחת מהאפשרויות שלכם.

איך יוצרים רשימה נפתחת ב-HTML

רשימה נפתחת היא אלמנט <select> עם <option> לכל בחירה. ה-value של כל אפשרות הוא מה שהטופס שולח; הטקסט שבין התגיות הוא מה שהקורא רואה. בחרו אחת ולחצו על Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

הטופס שולח language=js: ה-name של ה-select וה-value של האפשרות שנבחרה. selected קובע את ברירת המחדל; בלעדיו, האפשרות הראשונה נבחרת. אם לאפשרות אין value, הטקסט שלה נשלח במקום.

חברו את התווית ל-select עם for ו-id (או בעטיפה) כדי שלחיצה על התווית תעביר את הפוקוס לרשימה וקוראי מסך יכריזו עליה.

המאפיינים של select ו-option

אלמנט	מאפיין	מה עושה
`<select>`	`name`	המפתח שתחתיו הערך נשלח
`<select>`	`required`	חייבים לבחור אפשרות אמיתית, לא אפשרות placeholder ריקה ראשונה
`<select>`	`multiple`	אפשר לבחור כמה אפשרויות
`<select>`	`size`	כמה שורות גלויות (הופך אותו לתיבת רשימה)
`<select>`	`disabled`	כל הרשימה מושבתת ולא נשלחת
`<option>`	`value`	מה שנשלח כשהיא נבחרת
`<option>`	`selected`	נבחרת כשהעמוד נטען
`<option>`	`disabled`	מוצגת אבל אי אפשר לבחור בה
`<optgroup>`	`label`	הכותרת של הקבוצה

אפשרות placeholder עם required

ל-select תמיד יש ערך, כך שבלי placeholder האפשרות האמיתית הראשונה נשלחת גם אם הקורא לא נגע ברשימה. אפשרות ראשונה ריקה פותרת את זה, ו-required עוצר את השליחה עד שנבחרת אפשרות אמיתית:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

לחצו על Continue לפני שבחרתם: הדפדפן מסרב ומבקש לבחור פריט. ל-placeholder יש value="", וזה מה ש-required מחשיב כריק, ו-disabled כדי שאי אפשר יהיה לבחור בו שוב אחרי שנבחרה מדינה.

קיבוץ אפשרויות עם optgroup

<optgroup label="..."> שם כותרת מעל קבוצת אפשרויות. אי אפשר לבחור בכותרת:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

אי אפשר לקנן קבוצות: לרשימה יש רמה אחת של כותרות, לא יותר. disabled על <optgroup> משבית כל אפשרות בתוכו.

בחירה מרובה

multiple מאפשר לקורא לבחור כמה אפשרויות, והופך את הרשימה הנפתחת לתיבת רשימה. החזיקו Ctrl (Cmd ב-Mac) כדי להוסיף אפשרויות אחת אחת, או Shift כדי לבחור טווח:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

הטופס שולח skills=html ו-skills=css: אותו שם פעם אחת לכל אפשרות שנבחרה. הרבה אנשים לא מכירים את מחוות Ctrl+לחיצה, אז לקומץ אפשרויות, קבוצה של תיבות סימון נוחה יותר לשימוש.

קריאה והגדרה של הערך ב-JavaScript

select.value קורא וקובע את הערך של האפשרות הנבחרת, והאירוע change נורה כשהקורא בוחר אפשרות אחרת. שימוש נפוץ הוא רשימה נפתחת שנייה שהאפשרויות שלה תלויות בראשונה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) יוצר אפשרות. select.selectedIndex הוא המיקום של האפשרות הנבחרת, ו-select.selectedOptions מפרט את האפשרויות הנבחרות, וכך קוראים select מרובה בחירות.

עיצוב select

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

ה-padding הנוסף בצד הסוף משאיר מקום לחץ כדי שטקסט ארוך של אפשרות לא יעבור מתחתיו. font: inherit חשוב כאן בדיוק כמו בכפתורים: selects משתמשים כברירת מחדל בגופן הטפסים הקטן של הדפדפן. האפשרויות ברשימה הפתוחה שומרות על המראה המקורי. Chrome יכול לעצב גם את הרשימה הפתוחה כשמצטרפים עם appearance: base-select; דפדפנים בלי התמיכה הזו מציגים את הרשימה המקורית. שליטה מלאה בכל מקום דורשת רכיב מותאם שבנוי עם ARIA, וזו עבודה רבה בהרבה משנראה כדי לעשות אותה נכון.

select, כפתורי רדיו או datalist?

שימוש	מתי
`<select>`	בחירה אחת מרשימה ארוכה, או כשהמקום מוגבל
כפתורי רדיו	בחירה אחת מתוך מעט אפשרויות שכולן צריכות להיות גלויות (ראו HTML radio button)
`<input>` עם `<datalist>`	הצעות, אבל כל ערך מוקלד מותר

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

אין placeholder בבחירת חובה. האפשרות האמיתית הראשונה נשלחת גם אם הקורא אף פעם לא בחר בה.
placeholder עם ערך אמיתי, כמו value="none". required מחשיב אותו כבחירה תקינה. השתמשו ב-value="".
אפשרויות בלי value כשהטקסט ארוך או מתורגם. השרת מקבל את הטקסט הגלוי, שמשתנה לפי השפה.
multiple לכמה אפשרויות בודדות. תיבות סימון נוחות יותר.
האזנה ל-click על אפשרויות. השתמשו ב-change על ה-<select>; הוא נורה גם בשינויים מהמקלדת.
אין תווית. ל-select עם placeholder בלבד אין שם אחרי שנבחרת אפשרות.

שאלות נפוצות

איך יוצרים רשימה נפתחת ב-HTML?

משתמשים ב-<select> עם <option> אחד לכל בחירה: <select name="color"><option value="red">Red</option><option value="blue">Blue</option></select>. תנו ל-select name ו-<label>.

איך קובעים את אפשרות ברירת המחדל ב-select?

הוסיפו selected לאותה אפשרות: <option value="blue" selected>Blue</option>. בלעדיו, האפשרות הראשונה נבחרת. ב-JavaScript, הגדירו select.value = 'blue'.

איך מוסיפים placeholder ל-select?

הפכו את האפשרות הראשונה לריקה ולא ניתנת לבחירה: <option value="" disabled selected>Choose a country</option>. הוסיפו required ל-<select> כדי שאי אפשר יהיה לשלוח את הטופס עד שנבחרת אפשרות אמיתית.

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

select.value הוא הערך של האפשרות הנבחרת. לטקסט הגלוי שלה השתמשו ב-select.selectedOptions[0].text, והאזינו לאירוע change כדי להגיב כשהבחירה משתנה. ל-select מרובה בחירות, עברו על select.selectedOptions.

מה ההבדל בין select ל-datalist?

<select> מאפשר רק את האפשרויות שברשימה. <input> עם <datalist> מציע אפשרויות בזמן שהקורא מקליד, אבל מקבל כל טקסט. השתמשו ב-select כשהתשובה חייבת להיות אחת מהאפשרויות שלכם.

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