Formak

Ikuspegi orokorra

Bootstrap-en inprimaki-kontrolak gure Berrabiarazitako inprimaki-estiloak zabaltzen ditu klaseekin. Erabili klase hauek beren pantaila pertsonalizatuak aukeratzeko, arakatzaile eta gailu guztietan errendatze koherenteagoa izateko.

Ziurtatu typesarrera guztietan atributu egoki bat erabiltzen duzula (adibidez, emailhelbide elektronikorako edo numberinformazio numerikorako) sarrera-kontrol berriagoak aprobetxatzeko, hala nola posta elektronikoaren egiaztapena, zenbakia aukeratzea eta abar.

Hona hemen adibide azkar bat Bootstrap-en inprimaki-estiloak erakusteko. Jarraitu irakurtzen beharrezko klaseei, inprimakien diseinuari eta abarrei buruzko dokumentazioa.

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

Inprimaki testua

Bloke-mailako edo lerro-mailako inprimaki testua erabiliz sor daiteke .form-text.

Sarreraren azpiko inprimakiaren testua estiloarekin jar daiteke .form-text. Bloke-mailako elementu bat erabiliko bada, goiko marjina gehitzen da goiko sarreretatik erraz tartekatzeko.

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

Barneko testuak edozein lerroko HTML elementu tipiko erabil dezake (izan <span>, , edo beste zerbait) klasea <small>baino ezer ez duena ..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>

Desgaitutako inprimakiak

Gehitu disabledatributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko eta arinagoa izan dadin.

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

Gehitu disabledatributua a <fieldset>barruko kontrol guztiak desgaitzeko. Arakatzaileek jatorrizko inprimaki-kontrol guztiak ( <input>, <select>, eta <button>elementuak) barnean <fieldset disabled>desgaituta bezala tratatzen dituzte, teklatuaren eta saguaren elkarrekintzak saihestuz.

Dena den, zure inprimakiak botoiaren antzeko elementu pertsonalizatuak ere baditu, hala nola <a class="btn btn-*">...</a>, hauei estiloa bakarrik emango zaie pointer-events: none, hau da, teklatua erabiliz fokagarriak eta funtzionagarriak dira oraindik. Kasu honetan, eskuz aldatu behar dituzu kontrol horiek gehituz tabindex="-1"fokua jaso ez dezaten eta aria-disabled="disabled"laguntza-teknologiei haien egoera adierazteko.

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

Irisgarritasuna

Ziurtatu inprimaki-kontrol guztiek izen eskuragarri egokia dutela, haien helburua laguntza-teknologien erabiltzaileei helarazteko. Hori lortzeko modurik errazena <label>elementu bat erabiltzea da, edo —botoien kasuan— testu nahiko deskribatzailea <button>...</button>edukiaren zati gisa sartzea.

Testu-edukia ikusgai edo egokirik sartzea posible ez den egoeretan, <label>izen eskuragarria emateko beste modu batzuk daude, hala nola:

• <label>.visually-hiddenklasea erabiliz ezkutatzen diren elementuak
• Erabiliz etiketa gisa jardun dezakeen dagoen elementu bat seinalatuzaria-labelledby
• titleAtributu bat ematea
• Erabiltzen duen elementu batean eskuragarri dagoen izena esplizituki ezartzeaaria-label

Horietako bat ere ez badago, laguntza-teknologiek placeholderatributua erabil dezakete izen <input>eta <textarea>elementu eskuragarrien ordezko gisa erabiltzera. Atal honetako adibideek iradokitako hurbilketa batzuk eskaintzen dituzte.

Ikusmen ezkutuko edukia erabiltzeak ( .visually-hidden, aria-label, eta baita placeholderedukia ere, inprimaki-eremu batek edukia duenean desagertzen dena) laguntza-teknologiaren erabiltzaileei mesede egingo dien arren, etiketa-testu ikusgairik ez izateak arazoa izan dezake erabiltzaile batzuentzat. Etiketa ikusgai moduren bat da, oro har, hurbilketarik onena, bai irisgarritasunerako bai erabilgarritasunerako.

Sass

Inprimaki-aldagai asko maila orokorrean ezartzen dira inprimakiaren osagai indibidualek berrerabili eta hedatzeko. $btn-input-*Hauek eta $input-*aldagai gisa ikusiko dituzu gehienetan .

Aldagaiak

$btn-input-*aldagaiak gure botoien eta gure inprimakien osagaien artean partekatutako aldagai globalak dira . Hauek maiz beste osagai batzuen aldagai espezifiko batzuei balio gisa berriro esleituta aurkituko dituzu.

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