טפסים

סקירה כללית

פקדי הטופס של Bootstrap מתרחבים בסגנונות הטופס המחודשים שלנו עם מחלקות. השתמש בשיעורים אלה כדי להצטרף לצגים המותאמים אישית שלהם לעיבוד עקבי יותר בדפדפנים ובמכשירים.

הקפד להשתמש typeבתכונה מתאימה בכל הקלטים (למשל, emailעבור כתובת דוא"ל או numberעבור מידע מספרי) כדי לנצל את פקדי הקלט החדשים יותר כמו אימות דוא"ל, בחירת מספרים ועוד.

הנה דוגמה מהירה להדגמת סגנונות הצורה של Bootstrap. המשך לקרוא לתיעוד על שיעורים נדרשים, פריסת טפסים ועוד.

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

טקסט בטופס

ניתן ליצור טקסט טופס ברמת הבלוק או ברמת השורה באמצעות .form-text.

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

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

טקסט מוטבע יכול להשתמש בכל רכיב HTML מוטבע טיפוסי (בין אם זה <span>, <small>, או משהו אחר) ללא יותר מאשר .form-textהמחלקה.

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

טפסים מושבתים

הוסף את disabledהתכונה הבוליאנית בקלט כדי למנוע אינטראקציות של משתמשים ולגרום לו להיראות קל יותר.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

הוסף את disabledהתכונה ל-a <fieldset>כדי להשבית את כל הפקדים שבתוכו. דפדפנים מתייחסים לכל פקדי הטפסים המקוריים ( <input>, <select>, <button>ואלמנטים) בתוך a <fieldset disabled>כאל מושבתים, ומונעים אינטראקציות מקלדת ועכבר עליהם.

עם זאת, אם הטופס שלך כולל גם אלמנטים דמויי כפתור מותאמים אישית כגון <a class="btn btn-*">...</a>, אלה יקבלו רק סגנון של pointer-events: none, כלומר הם עדיין ניתנים למיקוד וניתנים להפעלה באמצעות המקלדת. במקרה זה, עליך לשנות באופן ידני את הפקדים הללו על ידי הוספה tabindex="-1"כדי למנוע מהם לקבל מיקוד aria-disabled="disabled"וכדי לאותת על מצבם לטכנולוגיות מסייעות.

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

נְגִישׁוּת

ודא שלכל בקרות הטפסים יש שם נגיש מתאים, כך שניתן יהיה להעביר את מטרתם למשתמשים בטכנולוגיות מסייעות. הדרך הפשוטה ביותר להשיג זאת היא להשתמש <label>באלמנט, או - במקרה של כפתורים - לכלול טקסט מספיק תיאורי כחלק <button>...</button>מהתוכן.

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

• <label>אלמנטים מוסתרים באמצעות .visually-hiddenהמחלקה
• הצבעה על אלמנט קיים שיכול לשמש כתווית באמצעותaria-labelledby
• מתן titleתכונה
• הגדרה מפורשת של השם הנגיש על אלמנט באמצעותaria-label

אם אף אחד מאלה אינו קיים, טכנולוגיות מסייעות עשויות להשתמש placeholderבתכונה כחלופה לשם הנגיש על <input>ואלמנטים <textarea>. הדוגמאות בחלק זה מספקות כמה גישות מוצעות, ספציפיות למקרה.

בעוד ששימוש בתוכן מוסתר ויזואלי ( .visually-hidden, aria-label, ואפילו placeholderתוכן, שנעלם ברגע ששדה טופס מכיל תוכן) יועיל למשתמשי טכנולוגיה מסייעת, חוסר בטקסט גלוי של תווית עדיין עשוי להיות בעייתי עבור משתמשים מסוימים. צורה כלשהי של תווית גלויה היא בדרך כלל הגישה הטובה ביותר, הן עבור נגישות והן עבור שימושיות.

סאס

משתני טופס רבים מוגדרים ברמה כללית לשימוש חוזר ולהרחיב אותם על ידי רכיבי טופס בודדים. אתה תראה את אלה לרוב כמו $input-btn-*ומשתנים $input-*.

משתנים

$input-btn-*משתנים הם משתנים גלובליים משותפים בין הכפתורים שלנו ורכיבי הטופס שלנו. תמצא אותם מוקצים מחדש לעתים קרובות כערכים למשתנים ספציפיים לרכיבים אחרים.

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;