Formes

Visió general

Els controls de formulari de Bootstrap s'amplien als nostres estils de formulari reiniciats amb classes. Utilitzeu aquestes classes per optar a les seves pantalles personalitzades per obtenir una representació més coherent entre navegadors i dispositius.

Assegureu-vos d'utilitzar un typeatribut adequat a totes les entrades (per exemple, emailper a l'adreça de correu electrònic o numberper a la informació numèrica) per aprofitar els controls d'entrada més nous com ara la verificació de correu electrònic, la selecció de números i molt més.

Aquí teniu un exemple ràpid per demostrar els estils de formulari de Bootstrap. Segueix llegint per obtenir documentació sobre les classes necessàries, el disseny de formularis i molt més.

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

Formulari de text

El text de formulari a nivell de bloc o en línia es pot crear mitjançant .form-text.

El text del formulari a sota de les entrades es pot dissenyar amb .form-text. Si s'utilitzarà un element a nivell de bloc, s'afegeix un marge superior per facilitar l'espaiat de les entrades anteriors.

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

El text en línia pot utilitzar qualsevol element HTML en línia típic (ja sigui un <span>, <small>o una altra cosa) amb res més que la .form-textclasse.

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

Formularis desactivats

Afegiu l' disabledatribut booleà a una entrada per evitar les interaccions de l'usuari i fer que sembli més lleuger.

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

Afegiu l' disabledatribut a a <fieldset>per desactivar tots els controls dins. Els navegadors tracten tots els controls de formularis natius ( <input>, <select>, i <button>elements) dins d'un <fieldset disabled>com a desactivats, evitant les interaccions tant del teclat com del ratolí amb ells.

Tanmateix, si el vostre formulari també inclou elements personalitzats semblants a botons, com ara <a class="btn btn-*">...</a>, només se'ls donarà un estil de pointer-events: none, és a dir, encara es poden enfocar i operar amb el teclat. En aquest cas, heu de modificar manualment aquests controls afegint tabindex="-1"-los per evitar que rebin el focus i aria-disabled="disabled"per indicar el seu estat a les tecnologies d'assistència.

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

Accessibilitat

Assegureu-vos que tots els controls de formulari tinguin un nom accessible adequat perquè el seu propòsit es pugui transmetre als usuaris de tecnologies d'assistència. La manera més senzilla d'aconseguir-ho és utilitzar un <label>element o, en el cas dels botons, incloure text prou descriptiu com a part del <button>...</button>contingut.

Per a situacions en què no és possible incloure un <label>contingut de text visible o adequat, hi ha maneres alternatives de proporcionar un nom accessible, com ara:

• <label>elements amagats amb la .visually-hiddenclasse
• Assenyala un element existent que pot actuar com a etiqueta utilitzantaria-labelledby
• Proporcionar un titleatribut
• Establir de manera explícita el nom accessible en un element utilitzantaria-label

Si no hi ha cap d'aquests, les tecnologies d'assistència poden recórrer a utilitzar l' placeholderatribut com a alternativa per al nom <input>i els <textarea>elements accessibles. Els exemples d'aquesta secció proporcionen alguns enfocaments suggerits i específics per a casos.

Quan utilitzeu contingut ocult visualment ( .visually-hidden, aria-label, i fins i totplaceholder contingut, que desapareix una vegada que un camp de formulari té contingut) beneficiarà els usuaris de tecnologia d'assistència, la manca de text d'etiqueta visible pot continuar sent problemàtica per a determinats usuaris. Algun tipus d'etiqueta visible és generalment el millor enfocament, tant per a l'accessibilitat com per a la usabilitat.

Sass

Moltes variables de formulari s'estableixen a nivell general per ser reutilitzades i ampliades per components de formulari individuals. Les veureu més sovint com a $input-btn-*variables $input-*.

Les variables

$input-btn-*les variables són variables globals compartides entre els nostres botons i els nostres components de formulari. Els trobareu sovint reassignats com a valors a altres variables específiques de components.

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