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

Q: מה זה המאפיין for ב-label?

for מכיל את ה-id של השדה שהתווית שייכת אליו: Email . הוא חייב להתאים בדיוק ל-id, לא ל-name.

Q: איך מסתירים label אבל משאירים אותו לקוראי מסך?

השאירו את ה- והסתירו אותו חזותית עם class שמכווץ אותו לפיקסל אחד וחותך אותו, במקום display: none, שמסתיר אותו גם מקוראי מסך. לשדה שאין בו מקום לשום תווית, החלופה היא aria-label על השדה עצמו.

מה האלמנט label עושה

<label> נותן לשדה בטופס את השם שלו. חברו אותו עם for, שערכו ה-id של השדה, וקורים שני דברים: קוראי מסך מקריאים את התווית כשהשדה מקבל פוקוס, ולחיצה על טקסט התווית מעבירה את הפוקוס לשדה. לחצו על שני הטקסטים שלמטה:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Label</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    p { margin: 0 0 12px; }
  </style>
</head>
<body>
  <p>
    <label for="city">City (a label)</label>
    <input id="city" name="city">
  </p>
  <p>
    <span>Country (plain text)</span>
    <input name="country">
  </p>
</body>
</html>

לחיצה על "City" מכניסה את הסמן לשדה שלו. לחיצה על "Country" לא עושה כלום, וקורא מסך שמגיע לשדה השני שומע רק "edit text", בלי שם. השניים נראים זהים; רק לאחד יש תווית.

שתי דרכים לחבר תווית

השתמשו ב-for וב-id, או שימו את השדה בתוך התווית:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>for vs wrapping</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { margin-bottom: 12px; }
    label { font-weight: 600; }
  </style>
</head>
<body>
  <form>
    <!-- 1. for + id: label and field can be anywhere -->
    <div class="row">
      <label for="email">Email</label><br>
      <input type="email" id="email" name="email">
    </div>

    <!-- 2. wrapping: no id needed -->
    <div class="row">
      <label>Phone <input type="tel" name="phone"></label>
    </div>

    <button type="submit">Save</button>
  </form>
</body>
</html>

	`for` ו-`id`	עטיפה
צריך `id`	כן, ייחודי בעמוד	לא
התווית והשדה יכולים להיות מופרדים	כן (תא בטבלה, grid)	לא, השדה בפנים
קל לשבור	בשגיאת הקלדה או ב-`id` כפול	בהכנסת שני שדות לתווית אחת

for חייב להתאים ל-id של השדה, לא ל-name שלו. לעיתים קרובות שניהם אותה מילה, וזה מסתיר את הטעות עד שמישהו משנה אחד מהם. לעשות את שניהם (לעטוף וגם להוסיף for) זה בסדר ונפוץ.

אפשר לחבר תווית ל-<input> (חוץ מ-type="hidden"), ל-<select>, ל-<textarea>, ל-<button>, ל-<meter>, ל-<output> ול-<progress>. תווית אחת נותנת שם לשדה אחד. לשדה יכולה להיות יותר מתווית אחת, אבל תווית ברורה אחת קלה יותר לכולם.

אזור לחיצה גדול יותר לתיבות סימון ולכפתורי רדיו

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click target</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .option {
      display: flex;
      align-items: center;
      gap: 10px;
      max-width: 320px;
      padding: 12px;
      margin-bottom: 8px;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      cursor: pointer;
    }
    .option:hover { border-color: #2563eb; }
  </style>
</head>
<body>
  <form>
    <label class="option">
      <input type="checkbox" name="alerts" value="email"> Email me about new courses
    </label>
    <span class="option">
      <input type="checkbox" name="alerts" value="sms"> Not a label: only the box works
    </span>
    <button type="submit">Save</button>
  </form>
</body>
</html>

לחצו על הריפוד של כל שורה, רחוק מהתיבה. השורה הראשונה מתחלפת; השנייה לא עושה כלום אלא אם פוגעים בתיבה עצמה. עוד על תיבות סימון ב-HTML checkbox.

רמזים והודעות שגיאה

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hints and errors</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; font-weight: 600; }
    .hint { display: block; color: #4b5563; font-size: 14px; margin: 2px 0 6px; }
    .error { color: #b91c1c; font-size: 14px; margin: 4px 0 0; }
    input { font: inherit; padding: 4px 8px; }
    .req { color: #b91c1c; }
  </style>
</head>
<body>
  <form novalidate>
    <label for="user">Username <span class="req" aria-hidden="true">*</span></label>
    <span class="hint" id="user-hint">3 to 16 lowercase letters or digits</span>
    <input id="user" name="username" required pattern="[a-z0-9]{3,16}"
      aria-describedby="user-hint user-error">
    <p class="error" id="user-error"></p>
    <button type="submit">Create</button>
  </form>

  <script>
    const form = document.querySelector('form');
    const user = document.querySelector('#user');
    form.addEventListener('submit', (event) => {
      const error = document.querySelector('#user-error');
      if (!user.checkValidity()) {
        event.preventDefault();
        error.textContent = user.value ? 'Use 3 to 16 lowercase letters or digits.' : 'Enter a username.';
        user.setAttribute('aria-invalid', 'true');
        user.focus();
      } else {
        error.textContent = '';
        user.removeAttribute('aria-invalid');
      }
    });
  </script>
</body>
</html>

לחצו על Create כשהשדה ריק, אחר כך עם AB, ואחר כך עם ada99. עם aria-describedby, קורא מסך מקריא משהו כמו "Username, required, edit text, 3 to 16 lowercase letters or digits, Enter a username." הכוכבית מסומנת aria-hidden כי המאפיין required כבר אומר "required"; לשמוע "star" לא מוסיף כלום.

תוויות מוסתרות

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hidden label</title>
  <style>
    .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    input, button { font: inherit; padding: 6px 10px; }
  </style>
</head>
<body>
  <form role="search">
    <label for="q" class="visually-hidden">Search courses</label>
    <input type="search" id="q" name="q" placeholder="e.g. Python">
    <button type="submit">Search</button>
  </form>
</body>
</html>

אל תסתירו אותה עם display: none או visibility: hidden: הם מסתירים אותה גם מקוראי מסך, ולא כל דפדפן וקורא מסך עדיין משתמשים בתווית מוסתרת כשם. האפשרות השנייה היא aria-label="Search courses" על ה-input, שנותן לו שם בלי שום אלמנט label. תווית גלויה היא עדיין הבחירה הטובה ביותר בכל פעם שיש מקום: כולם מרוויחים מלראות למה השדה משמש.

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

for שמצביע על ה-name במקום על ה-id. שום דבר לא מתחבר.
ids כפולים. for מתחבר לאלמנט הראשון עם ה-id הזה, שיכול להיות שדה בטופס אחר בעמוד.
placeholder במקום תווית. הוא נעלם בזמן ההקלדה ואינו שם אמין.
שני שדות בתוך תווית אחת. תווית נותנת שם לשדה אחד; השני נשאר בלי תווית.
קישור בתוך התווית של checkbox, כמו "קראתי את התנאים" כש"התנאים" הוא קישור. חלק מהשורה מסמן את התיבה וחלק פותח עמוד, וקל לפגוע בטעות. שימו את הקישור מחוץ לתווית.
הסתרת התווית עם display: none. השתמשו ב-class שמסתיר חזותית.
טקסט ליד שדה שאינו <label>. הוא נראה אותו דבר ולא עושה כלום. לטופס שמסביב לשדות, ראו HTML forms.

שאלות נפוצות

מה עושה התגית label ב-HTML?

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

מה זה המאפיין for ב-label?

for מכיל את ה-id של השדה שהתווית שייכת אליו: <label for="email">Email</label> <input id="email">. הוא חייב להתאים בדיוק ל-id, לא ל-name.

לשים את ה-input בתוך ה-label או להשתמש ב-for?

שתי הדרכים עובדות בדפדפנים ובקוראי המסך של היום. עטיפה לא דורשת ids; for ו-id מאפשרים לתווית ולשדה לשבת במקומות שונים בקוד, למשל בתאי טבלה נפרדים. צוותים רבים עוטפים וגם מוסיפים for.

אפשר להחליף label ב-placeholder?

לא. ה-placeholder נעלם ברגע שמתחילים להקליד, הניגודיות שלו לרוב נמוכה, והוא לא תמיד מוקרא כשם השדה. השתמשו ב-<label> גלוי ושמרו את ה-placeholder לערך לדוגמה, אם בכלל.

איך מסתירים label אבל משאירים אותו לקוראי מסך?

השאירו את ה-<label> והסתירו אותו חזותית עם class שמכווץ אותו לפיקסל אחד וחותך אותו, במקום display: none, שמסתיר אותו גם מקוראי מסך. לשדה שאין בו מקום לשום תווית, החלופה היא aria-label על השדה עצמו.

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