Forms

איבערבליק

באָאָטסטראַפּ ס פאָרעם קאָנטראָלס יקספּאַנד אויף אונדזער רעבאָאָטעד פאָרעם סטיילז מיט קלאסן. ניצן די קלאסן צו אַפּט אין זייער קאַסטאַמייזד דיספּלייז פֿאַר אַ מער קאָנסיסטענט רענדערינג צווישן בראַוזערז און דעוויסעס.

זייט זיכער צו נוצן אַ צונעמען typeאַטריביוט אויף אַלע ינפּוץ (למשל, emailפֿאַר בליצפּאָסט אַדרעס אָדער numberנומעריקאַל אינפֿאָרמאַציע) צו נוצן נייַער אַרייַנשרייַב קאָנטראָלס ווי E- בריוו וועראַפאַקיישאַן, נומער סעלעקציע, און מער.

דאָ ס אַ שנעל ביישפּיל צו באַווייַזן באָאָטסטראַפּ ס פאָרעם סטיילז. האַלטן לייענען פֿאַר דאַקיומענטיישאַן אויף פארלאנגט קלאסן, פאָרעם אויסלייג, און מער.

<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אַטריביוט צו אַ <fieldset>צו דיסייבאַל אַלע די קאָנטראָלס ין. בראַוזערז מייַכל אַלע געבוירן פאָרעם קאָנטראָלס ( <input>, <select>, און <button>עלעמענטן) אין אַ <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;