דלג לתוכן הראשי דלג לניווט במסמכים
in English

טפסים

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

סקירה כללית

פקדי הטופס של 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.

שיוך טקסט טופס עם פקדי טופס

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

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

הסיסמה שלך חייבת להיות באורך 8-20 תווים, להכיל אותיות ומספרים, ולא להכיל רווחים, תווים מיוחדים או אמוג'י.
<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המחלקה.

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

סאס

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

משתנים

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

$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;