Treci la conținutul principal Treceți la navigarea documentelor
Check

Exemple și instrucțiuni de utilizare pentru stilurile de control al formularelor, opțiunile de aspect și componentele personalizate pentru crearea unei game largi de formulare.

Prezentare generală

Controalele formularului Bootstrap se extind pe stilurile noastre de formulare repornite cu clase. Utilizați aceste clase pentru a opta pentru afișajele lor personalizate pentru o redare mai consecventă pe browsere și dispozitive.

Asigurați-vă că utilizați un typeatribut adecvat pentru toate intrările (de exemplu, emailpentru adresa de e-mail sau numberpentru informații numerice) pentru a profita de controalele de intrare mai noi, cum ar fi verificarea e-mailului, selectarea numerelor și multe altele.

Iată un exemplu rapid pentru a demonstra stilurile de formulare ale Bootstrap. Continuați să citiți pentru documentația despre clasele necesare, aspectul formularelor și multe altele.

Nu vom împărtăși niciodată e-mailul tău cu nimeni altcineva.
html
<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>

Textul formularului

Textul de formular la nivel de bloc sau la nivel de linie poate fi creat folosind .form-text.

Asocierea textului formularului cu controalele formularului

Textul formularului ar trebui să fie asociat în mod explicit cu controlul formularului la care se referă folosind aria-describedbyatributul. Acest lucru va asigura că tehnologiile de asistență, cum ar fi cititoarele de ecran, vor anunța acest text de formular atunci când utilizatorul se concentrează sau intră în control.

Textul formularului de mai jos intrările poate fi stilat cu .form-text. Dacă va fi folosit un element la nivel de bloc, se adaugă o marjă superioară pentru o distanță ușoară față de intrările de mai sus.

Parola dvs. trebuie să aibă 8-20 de caractere, să conțină litere și cifre și nu trebuie să conțină spații, caractere speciale sau emoji.
html
<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>

Textul inline poate folosi orice element HTML inline tipic (fie acesta <span>, <small>, sau altceva) cu nimic mai mult decât .form-textclasa.

Trebuie să aibă 8-20 de caractere.
html
<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>

Formulare dezactivate

Adăugați disabledatributul boolean pe o intrare pentru a preveni interacțiunile utilizatorului și pentru a o face să pară mai ușoară.

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

Adăugați disabledatributul la a <fieldset>pentru a dezactiva toate controalele din interior. Browserele tratează toate comenzile de formulare native ( <input>, <select>, și <button>elementele) din interiorul unui <fieldset disabled>ca fiind dezactivate, prevenind atât interacțiunile tastaturii, cât și ale mouse-ului.

Cu toate acestea, dacă formularul dvs. include și elemente personalizate asemănătoare butoanelor, cum ar fi <a class="btn btn-*">...</a>, acestea vor primi doar un stil de pointer-events: none, ceea ce înseamnă că sunt încă focalizabile și operabile folosind tastatura. În acest caz, trebuie să modificați manual aceste comenzi adăugând tabindex="-1"pentru a le împiedica să primească focalizare și aria-disabled="disabled"pentru a semnala starea lor către tehnologiile de asistență.

Exemplu de set de câmpuri dezactivat
html
<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>

Accesibilitate

Asigurați-vă că toate controalele formularului au un nume accesibil adecvat, astfel încât scopul lor să poată fi transmis utilizatorilor tehnologiilor de asistență. Cel mai simplu mod de a realiza acest lucru este să folosiți un <label>element sau, în cazul butoanelor, să includeți text suficient de descriptiv ca parte a <button>...</button>conținutului.

Pentru situațiile în care nu este posibil să se includă un <label>conținut text vizibil sau adecvat, există modalități alternative de a furniza în continuare un nume accesibil, cum ar fi:

  • <label>elemente ascunse folosind .visually-hiddenclasa
  • Indicând un element existent care poate acționa ca o etichetă folosindaria-labelledby
  • Furnizarea unui titleatribut
  • Setarea explicit a numelui accesibil pe un element folosindaria-label

Dacă niciuna dintre acestea nu este prezentă, tehnologiile de asistență pot recurge la utilizarea placeholderatributului ca alternativă pentru numele <input>și <textarea>elementele accesibile. Exemplele din această secțiune oferă câteva abordări sugerate, specifice cazului.

În timp ce utilizarea conținutului ascuns vizual ( .visually-hidden, aria-label, și chiar placeholderconținut, care dispare odată ce un câmp de formular are conținut) va aduce beneficii utilizatorilor de tehnologie de asistență, lipsa textului etichetei vizibile poate fi totuși problematică pentru anumiți utilizatori. O anumită formă de etichetă vizibilă este, în general, cea mai bună abordare, atât pentru accesibilitate, cât și pentru utilizare.

Sass

Multe variabile de formular sunt setate la nivel general pentru a fi reutilizate și extinse de componente individuale de formular. Le vei vedea cel mai des ca $input-btn-*și $input-*variabile.

Variabile

$input-btn-*variabilele sunt variabile globale partajate între butoanele noastre și componentele formularului. Veți găsi acestea reatribuite frecvent ca valori altor variabile specifice componente.

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