Formak
Inprimakien kontrol-estiloen, diseinu-aukeren eta osagai pertsonalizatuen adibideak eta erabilera-gidalerroak inprimaki ugari sortzeko.
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 type
sarrera guztietan atributu egoki bat erabiltzen duzula (adibidez, email
helbide elektronikorako edo number
informazio 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
.
Inprimakiaren testua inprimaki-kontrolekin lotzea
aria-describedby
Inprimakiaren testua berariaz lotu behar da atributua erabiliz erlazionatutako inprimaki-kontrolarekin . Horrek bermatuko du laguntza-teknologiek (pantaila-irakurgailuak, esaterako) inprimakiaren testu hau jakinaraziko dutela erabiltzailea kontrolatzen denean edo kontrola sartzen denean.
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 disabled
atributu boolearra sarrera batean erabiltzaileen elkarrekintzak saihesteko eta arinagoa izan dadin.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
Gehitu disabled
atributua 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 seinalatzeko.
<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-hidden
klasea erabiliz ezkutatzen diren elementuak- Erabiliz etiketa gisa jardun dezakeen dagoen elementu bat seinalatuz
aria-labelledby
title
Atributu bat ematea- Erabiltzen duen elementu batean eskuragarri dagoen izena esplizituki ezartzea
aria-label
Horietako bat ere ez badago, laguntza-teknologiek placeholder
atributua 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 placeholder
edukia 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;