Source

Vormid

Vormi juhtimisstiilide, paigutussuvandite ja kohandatud komponentide näited ja kasutusjuhised mitmesuguste vormide loomiseks.

Ülevaade

Bootstrapi vormijuhtelemendid laiendavad klasside abil taaskäivitatud vormistiile. Kasutage neid klasse nende kohandatud kuvade valimiseks, et muuta brauserites ja seadmetes ühtsem renderdus.

typeKasutage kõigis sisendites (nt emaile-posti aadressi või numbrilise teabe jaoks) kindlasti sobivat atribuuti, numberet kasutada ära uuemaid sisendi juhtelemente, nagu e-posti kinnitamine, numbrivalik ja palju muud.

Siin on kiire näide Bootstrapi vormistiilide demonstreerimiseks. Lugege edasi dokumente vajalike klasside, vormide paigutuse ja muu kohta.

Me ei jaga teie e-posti kunagi kellegi teisega. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="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>

Vormi juhtelemendid

Tekstivormide juhtelemendid, nagu <input>s, <select>s ja <textarea>s, on kujundatud koos .form-controlklassiga. Kaasatud on stiilid üldise välimuse, fookuse oleku, suuruse ja muu jaoks.

Stiili täiendamiseks uurige kindlasti meie kohandatud vorme<select> .

<form>
  <div class="form-group">
    <label for="exampleFormControlInput1">Email address</label>
    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect1">Example select</label>
    <select class="form-control" id="exampleFormControlSelect1">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlSelect2">Example multiple select</label>
    <select multiple class="form-control" id="exampleFormControlSelect2">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
    </select>
  </div>
  <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
</form>

Failisisendite jaoks vahetage .form-controlvastu .form-control-file.

<form>
  <div class="form-group">
    <label for="exampleFormControlFile1">Example file input</label>
    <input type="file" class="form-control-file" id="exampleFormControlFile1">
  </div>
</form>

Suuruse määramine

Määrake kõrgused selliste klasside abil nagu .form-control-lgja .form-control-sm.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
  <option>Large select</option>
</select>
<select class="form-control">
  <option>Default select</option>
</select>
<select class="form-control form-control-sm">
  <option>Small select</option>
</select>

Loe ainult

Lisage readonlysisendile Boolean atribuut, et vältida sisendi väärtuse muutmist. Kirjutuskaitstud sisendid näivad heledamad (nagu keelatud sisendid), kuid säilitavad standardse kursori.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Ainult kirjutuskaitstud lihttekst

Kui soovite, et <input readonly>vormi elemendid oleksid laaditud lihttekstina, kasutage .form-control-plaintextklassi, et eemaldada vormivälja vaikestiil ning säilitada õige veeris ja polster.

<form>
  <div class="form-group row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>
<form class="form-inline">
  <div class="form-group mb-2">
    <label for="staticEmail2" class="sr-only">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>

Märkeruudud ja raadiod

Vaikimisi märkeruudud ja raadiod on täiustatud mõlema sisenditüübi jaoks ühe klassi abil .form-check, mis parandab nende HTML-elementide paigutust ja käitumist . Märkeruudud on mõeldud loendis ühe või mitme valiku valimiseks, raadiod aga ühe valiku valimiseks paljude hulgast.

Keelatud märkeruudud ja raadiod on toetatud, kuid not-allowedkursori kuvamiseks vanemal <label>, peate atribuudile lisama disabledatribuudi .form-check-input. Keelatud atribuut rakendab sisendi oleku näitamiseks heledamat värvi.

Märkeruudud ja raadiod on loodud toetama HTML-põhist vormide valideerimist ja pakkuma lühikesi, juurdepääsetavaid silte. Sellisena on meie <input>s ja <label>s vend-elemendid, mitte <input>sees olevad elemendid <label>. See on pisut üksikasjalikum, kuna peate määrama idja foratribuudid, et seostada <input>ja <label>.

Vaikimisi (virnastatud)

Vaikimisi paigutatakse suvaline arv märkeruutusid ja raadiosid, mis on otsene vend, vertikaalselt virnastatud ja sobivate vahedega .form-check.

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
    Disabled checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Second default radio
  </label>
</div>
<div class="form-check disabled">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
    Disabled radio
  </label>
</div>

Järjekorras

Grupeerige märkeruudud või raadiod samale horisontaalsele reale, lisades .form-check-inlineneed mis tahes .form-check.

<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
  <label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
  <label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
  <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>

Ilma siltideta

Lisa .position-staticsisenditele, .form-checkmillel pole sildi teksti. aria-labelÄrge unustage abitehnoloogiate (nt kasutades ) jaoks ikkagi mingit sildi vormingut .

<div class="form-check">
  <input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
  <input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>

Paigutus

Kuna Bootstrap rakendub peaaegu kõigile meie vormi juhtelementidele, virnastatakse vorme vaikimisi vertikaalselt display: block. width: 100%Selle paigutuse muutmiseks vormipõhiselt saab kasutada täiendavaid klasse.

Moodustage rühmad

Klass .form-groupon lihtsaim viis vormidele struktuuri lisamiseks. See pakub paindlikku klassi, mis julgustab siltide, juhtelementide, valikulise abiteksti ja vormi kinnitamise sõnumite õiget rühmitamist. Vaikimisi kehtib see ainult margin-bottom, kuid .form-inlinevajadusel valib see täiendavaid stiile. Kasutage seda <fieldset>s, <div>s või peaaegu mis tahes muu elemendiga.

<form>
  <div class="form-group">
    <label for="formGroupExampleInput">Example label</label>
    <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Vormi ruudustik

Meie ruudustikuklasside abil saab ehitada keerukamaid vorme. Kasutage neid vormipaigutuste jaoks, mis nõuavad mitut veergu, erinevat laiust ja täiendavaid joondussuvandeid.

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Vormi rida

Võite vahetada .rowka .form-rowmeie standardse ruudustikurea variandi vastu, mis alistab vaikeveergude vihmaveerennid tihedama ja kompaktsema paigutuse saamiseks.

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" class="form-control" placeholder="First name">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Last name">
    </div>
  </div>
</form>

Võresüsteemiga saab luua ka keerukamaid paigutusi.

<form>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4" placeholder="Email">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-6">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-4">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-2">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

Horisontaalne vorm

Looge ruudustikuga horisontaalseid vorme, lisades .rowklassi rühmadesse ja kasutades .col-*-*klasse oma siltide ja juhtelementide laiuse määramiseks. Lisage kindlasti ka .col-form-labeloma <label>s-i, et need oleksid vertikaalselt keskel koos nendega seotud vormi juhtelementidega.

Mõnikord peate vajaliku täiusliku joonduse loomiseks kasutama veerise või polsterduse utiliite. Näiteks eemaldasime padding-topvirnastatud raadiosisendite sildi, et teksti lähtejoont paremini joondada.

Raadiod
Märkeruut 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <fieldset class="form-group">
    <div class="row">
      <legend class="col-form-label col-sm-2 pt-0">Radios</legend>
      <div class="col-sm-10">
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
          <label class="form-check-label" for="gridRadios1">
            First radio
          </label>
        </div>
        <div class="form-check">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
          <label class="form-check-label" for="gridRadios2">
            Second radio
          </label>
        </div>
        <div class="form-check disabled">
          <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
          <label class="form-check-label" for="gridRadios3">
            Third disabled radio
          </label>
        </div>
      </div>
    </div>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-2">Checkbox</div>
    <div class="col-sm-10">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="gridCheck1">
        <label class="form-check-label" for="gridCheck1">
          Example checkbox
        </label>
      </div>
    </div>
  </div>
  <div class="form-group row">
    <div class="col-sm-10">
      <button type="submit" class="btn btn-primary">Sign in</button>
    </div>
  </div>
</form>
Horisontaalne vormisildi suurus

Kasutage kindlasti .col-form-label-smvõi .col-form-label-lgoma <label>s või <legend>s, et järgida õigesti ja .form-control-lgsuurust .form-control-sm.

<form>
  <div class="form-group row">
    <label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
    </div>
  </div>
  <div class="form-group row">
    <label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
    </div>
  </div>
</form>

Veeru suuruse määramine

Nagu on näidatud eelmistes näidetes, võimaldab meie ruudustikusüsteem paigutada suvalise arvu .cols-i a .rowvõi .form-row. Nad jagavad saadaoleva laiuse nende vahel võrdselt. Võite valida ka veergude alamhulga, mis võtaks rohkem või vähem ruumi, samal ajal kui ülejäänud veerud .coljagavad ülejäänud võrdselt teatud veeruklassidega, näiteks .col-7.

<form>
  <div class="form-row">
    <div class="col-7">
      <input type="text" class="form-control" placeholder="City">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="State">
    </div>
    <div class="col">
      <input type="text" class="form-control" placeholder="Zip">
    </div>
  </div>
</form>

Automaatne suuruse määramine

Allolev näide kasutab flexboxi utiliiti sisu vertikaalseks tsentreerimiseks ja muudab .colseda .col-autonii, et veerud võtaksid ainult nii palju ruumi, kui vaja. Teisisõnu, veeru suurus põhineb sisul.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInput">Name</label>
      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
    </div>
    <div class="col-auto">
      <label class="sr-only" for="inlineFormInputGroup">Username</label>
      <div class="input-group mb-2">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
      </div>
    </div>
    <div class="col-auto">
      <div class="form-check mb-2">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
        <label class="form-check-label" for="autoSizingCheck">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary mb-2">Submit</button>
    </div>
  </div>
</form>

Seejärel saate seda uuesti miksida suurusespetsiifiliste veeruklassidega.

@ 
<form>
  <div class="form-row align-items-center">
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputName">Name</label>
      <input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
    </div>
    <div class="col-sm-3 my-1">
      <label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
      </div>
    </div>
    <div class="col-auto my-1">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="autoSizingCheck2">
        <label class="form-check-label" for="autoSizingCheck2">
          Remember me
        </label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Ja loomulikult toetatakse kohandatud vormi juhtelemente .

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label>
      <select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="col-auto my-1">
      <div class="custom-control custom-checkbox mr-sm-2">
        <input type="checkbox" class="custom-control-input" id="customControlAutosizing">
        <label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
      </div>
    </div>
    <div class="col-auto my-1">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Tekstisisesed vormid

Kasutage .form-inlineklassi siltide, vormi juhtelementide ja nuppude seeria kuvamiseks ühel horisontaalsel real. Vormide juhtelemendid tekstisiseses vormis erinevad veidi nende vaikeolekutest.

  • Juhtelemendid on display: flex, ahendavad kõik HTML-i tühikud ja võimaldavad teil pakkuda joondusjuhtimist vahekauguste ja paindlike kasti utiliitidega.
  • Juhtelemendid ja sisendrühmad saavad width: autoBootstrapi vaikeväärtuse alistada width: 100%.
  • Juhtelemendid kuvatakse tekstisiseselt ainult vaateavades, mille laius on vähemalt 576 pikslit , et võtta arvesse kitsaid vaateavasid mobiilseadmetes.

Võimalik, et peate käsitsi lahendama üksikute vormi juhtelementide laiuse ja joondamise ruumivaheutiliitidega (nagu allpool näidatud). Lõpuks lisage alati <label>iga vormi juhtelemendi juurde tähis, isegi kui peate selle peitma kasutajate eest, kes ei kasuta ekraanilugejat .sr-only.

@ 
<form class="form-inline">
  <label class="sr-only" for="inlineFormInputName2">Name</label>
  <input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">

  <label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
  <div class="input-group mb-2 mr-sm-2">
    <div class="input-group-prepend">
      <div class="input-group-text">@</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
  </div>

  <div class="form-check mb-2 mr-sm-2">
    <input class="form-check-input" type="checkbox" id="inlineFormCheck">
    <label class="form-check-label" for="inlineFormCheck">
      Remember me
    </label>
  </div>

  <button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>

Toetatud on ka kohandatud vormi juhtelemendid ja valikud.

<form class="form-inline">
  <label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
  <select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

  <div class="custom-control custom-checkbox my-1 mr-sm-2">
    <input type="checkbox" class="custom-control-input" id="customControlInline">
    <label class="custom-control-label" for="customControlInline">Remember my preference</label>
  </div>

  <button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
Alternatiivid peidetud siltidele

Abitehnoloogiatel, näiteks ekraanilugejatel, on teie vormidega probleeme, kui te ei lisa igale sisendile silti. Nende tekstisiseste vormide puhul saate .sr-onlyklassi abil sildid peita. Abitehnoloogiate märgistamiseks on veel alternatiivseid meetodeid, näiteks atribuut aria-label, aria-labelledbyvõi titleatribuut. Kui ükski neist pole olemas, võivad abitehnoloogiad kasutada placeholderatribuuti, kui see on olemas, kuid pidage meeles, et placeholderseda ei soovitata kasutada muude märgistamismeetodite asendajana.

Abitekst

Plokitaseme abiteksti vormides saab luua kasutades .form-text(varem tuntud kui .help-blockv3). Tekstisisest abiteksti saab paindlikult rakendada, kasutades mis tahes tekstisiseseid HTML-elemente ja utiliidiklasse, näiteks .text-muted.

Abiteksti seostamine vormi juhtelementidega

Abitekst peaks olema selgesõnaliselt seotud vormi juhtelemendiga, millega see aria-describedbyatribuudi kasutamisega seotud on. See tagab, et abitehnoloogiad (nt ekraanilugejad) teavitavad sellest abitekstist, kui kasutaja keskendub või juhtnupule siseneb.

Allolevate sisendite abiteksti saab stiilida .form-text. See klass sisaldab display: blockja lisab veidi ülemist veerist, et ülaltoodud sisenditest oleks lihtne vahemaa teha.

Teie parool peab olema 8–20 tähemärgi pikkune, sisaldama tähti ja numbreid ning ei tohi sisaldada tühikuid, erimärke ega emotikone. 
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>

Tekstisisene tekst võib kasutada mis tahes tüüpilist tekstisisest HTML-elementi (olgu see siis <small>, <span>, või midagi muud), millel pole muud kui utiliidiklassi.

Peab olema 8–20 tähemärki pikk. 
<form class="form-inline">
  <div class="form-group">
    <label for="inputPassword6">Password</label>
    <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
    <small id="passwordHelpInline" class="text-muted">
      Must be 8-20 characters long.
    </small>
  </div>
</form>

Puudega vormid

Lisage disabledsisendile Boolean atribuut, et vältida kasutaja interaktsioone ja muuta see heledamaks.

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

Lisage disabledatribuut atribuudile a <fieldset>, et keelata kõik selles olevad juhtelemendid.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <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>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Hoiatus ankrutega

Vaikimisi käsitlevad brauserid kõiki a-s olevaid vormijuhtelemente ( <input>ja elemente) keelatuna <select>, vältides nii klaviatuuri kui ka hiire interaktsioone. Kui aga teie vorm sisaldab ka elemente, antakse neile ainult stiil . Nagu on märgitud nuppude keelatud olekut käsitlevas jaotises (ja eriti ankurelementide alamjaotises), ei ole see CSS-i atribuut veel standarditud ja seda ei toetata täielikult Opera 18 ja vanemates versioonides ega Internet Explorer 10-s ning võitis. Ärge takistage klaviatuuri kasutajatel neid linke fokuseerimast või aktiveerimast. Nii et turvalisuse huvides kasutage selliste linkide keelamiseks kohandatud JavaScripti.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

Brauseriülene ühilduvus

Kuigi Bootstrap rakendab neid stiile kõigis brauserites, ei toeta Internet Explorer 11 ja vanemad disabledatribuuti täielikult <fieldset>. Kasutage kohandatud JavaScripti väljakomplekti keelamiseks nendes brauserites.

Kinnitamine

Andke oma kasutajatele väärtuslikku ja kasulikku tagasisidet HTML5 vormi valideerimisega – see on saadaval kõigis meie toetatud brauserites . Valige brauseri vaikevalideerimise tagasiside hulgast või rakendage kohandatud sõnumeid meie sisseehitatud klasside ja käivitava JavaScriptiga.

Soovitame tungivalt kohandatud valideerimisstiile, kuna brauseri vaikeseadeid ekraanilugejatele ei teavitata.

Kuidas see töötab

Vormi valideerimine Bootstrapiga toimib järgmiselt.

  • HTML-vormingu valideerimist rakendatakse CSS-i kahe pseudoklassi :invalidja :valid. See kehtib <input>, <select>, ja <textarea>elementide kohta.
  • Bootstrap ulatub :invalidja :validstiilid .was-validatedülemklassile, mida tavaliselt rakendatakse <form>. Vastasel juhul kuvatakse kõik ilma väärtuseta kohustuslikud väljad lehe laadimisel kehtetutena. Nii saate valida, millal need aktiveerida (tavaliselt pärast vormi esitamise katset).
  • Tagavarana võib serveripoolseks valideerimiseks.is-invalid pseudoklasside asemel .is-validkasutada klasse . Nad ei nõua vanemate klassi..was-validated
  • CSS-i toimimise piirangute tõttu ei saa me (praegu) <label>ilma kohandatud JavaScripti abita rakendada stiile DOM-is enne vormijuhtelementi.
  • Kõik kaasaegsed brauserid toetavad piirangute valideerimise API -d , mis on JavaScripti meetodite seeria vormi juhtelementide kinnitamiseks.
  • Tagasisidesõnumid võivad kasutada brauseri vaikeseadeid (iga brauseri puhul erinevad ja CSS-i kaudu stiilivabad) või meie kohandatud tagasisidestiile koos täiendava HTML-i ja CSS-iga.
  • Saate esitada kohandatud kehtivussõnumeid setCustomValidityJavaScriptis.

Seda silmas pidades kaaluge meie kohandatud vormide valideerimisstiilide, valikuliste serveripoolsete klasside ja brauseri vaikeseadete jaoks järgmisi demosid.

Kohandatud stiilid

Kohandatud Bootstrapi vormi valideerimissõnumite jaoks peate lisama novalidatetõeväärtuse atribuudi oma <form>. See keelab brauseri vaiketagasiside tööriistavihjed, kuid annab siiski juurdepääsu JavaScripti vormi valideerimise API-dele. Proovige esitada allolev vorm; meie JavaScript peatab saatmisnupu ja edastab teile tagasisidet.

Kui proovite esitada, näete vormi juhtelementidele rakendatud stiile :invalidja .:valid

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationCustomUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

Brauseri vaikeseaded

Kas te pole huvitatud kohandatud valideerimise tagasiside sõnumitest või JavaScripti kirjutamisest, et muuta vormi käitumist? Kõik hea, saate kasutada brauseri vaikeseadeid. Proovige esitada allolev vorm. Sõltuvalt teie brauserist ja OS-ist näete veidi erinevat tagasisidestiili.

Kuigi neid tagasiside stiile ei saa CSS-iga kujundada, saate siiski JavaScripti kaudu tagasiside teksti kohandada.

@ 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" placeholder="First name" value="Mark" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" placeholder="Last name" value="Otto" required>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationDefaultUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend2">@</span>
        </div>
        <input type="text" class="form-control" id="validationDefaultUsername" placeholder="Username" aria-describedby="inputGroupPrepend2" required>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault03">City</label>
      <input type="text" class="form-control" id="validationDefault03" placeholder="City" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <input type="text" class="form-control" id="validationDefault04" placeholder="State" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" placeholder="Zip" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Serveri pool

Soovitame kasutada kliendipoolset valideerimist, kuid kui vajate serveripoolt, võite näidata kehtetud ja kehtivad vormiväljad märkidega .is-invalidja .is-valid. Pange tähele, et .invalid-feedbackseda toetatakse ka nende klassidega.

Näeb hea välja!
Näeb hea välja!
@
Valige kasutajanimi.
Sisestage kehtiv linn.
Sisestage kehtiv olek.
Sisestage kehtiv zip.
Enne esitamist peate nõustuma. 
<form>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" placeholder="First name" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" placeholder="Last name" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationServerUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="inputGroupPrepend3">@</span>
        </div>
        <input type="text" class="form-control is-invalid" id="validationServerUsername" placeholder="Username" aria-describedby="inputGroupPrepend3" required>
        <div class="invalid-feedback">
          Please choose a username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" placeholder="City" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <input type="text" class="form-control is-invalid" id="validationServer04" placeholder="State" required>
      <div class="invalid-feedback">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" placeholder="Zip" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Toetatud elemendid

Meie näidisvormid näitavad <input>ülaltoodud natiivseid tekstilisi tekste, kuid vormide valideerimise stiilid on saadaval ka meie kohandatud vormi juhtelementide jaoks.

Kehtetu tagasiside teksti näide
Veel näide kehtetu tagasiside tekstist
Kehtetu kohandatud valiku tagasiside näide
Kehtetu kohandatud faili tagasiside näide 
<form class="was-validated">
  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

  <div class="custom-control custom-radio">
    <input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
  </div>
  <div class="custom-control custom-radio mb-3">
    <input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
    <label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
    <div class="invalid-feedback">More example invalid feedback text</div>
  </div>

  <div class="form-group">
    <select class="custom-select" required>
      <option value="">Open this select menu</option>
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
    </select>
    <div class="invalid-feedback">Example invalid custom select feedback</div>
  </div>

  <div class="custom-file">
    <input type="file" class="custom-file-input" id="validatedCustomFile" required>
    <label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
    <div class="invalid-feedback">Example invalid custom file feedback</div>
  </div>
</form>

Tööriistanõuanded

Kui teie vormipaigutus seda võimaldab, saate vahetada .{valid|invalid}-feedbackklassid .{valid|invalid}-tooltipklasside vastu, et kuvada stiilis kohtspikris valideerimise tagasisidet. position: relativeTööriistavihje positsioneerimiseks kasutage seda kindlasti lapsevanemal . Allolevas näites on see meie veeruklassidel juba olemas, kuid teie projekt võib vajada alternatiivset seadistust.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please provide a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" placeholder="First name" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" placeholder="Last name" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-4 mb-3">
      <label for="validationTooltipUsername">Username</label>
      <div class="input-group">
        <div class="input-group-prepend">
          <span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
        </div>
        <input type="text" class="form-control" id="validationTooltipUsername" placeholder="Username" aria-describedby="validationTooltipUsernamePrepend" required>
        <div class="invalid-tooltip">
          Please choose a unique and valid username.
        </div>
      </div>
    </div>
  </div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip03">City</label>
      <input type="text" class="form-control" id="validationTooltip03" placeholder="City" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <input type="text" class="form-control" id="validationTooltip04" placeholder="State" required>
      <div class="invalid-tooltip">
        Please provide a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" placeholder="Zip" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Kohandatud vormid

Veelgi suurema kohandamise ja brauseriülese järjepidevuse saavutamiseks kasutage brauseri vaikeseadete asendamiseks meie täielikult kohandatud vormielemente. Need on üles ehitatud semantilisele ja juurdepääsetavale märgistusele, nii et need asendavad tugevalt kõiki vaikevormi juhtelemente.

Märkeruudud ja raadiod

Iga märkeruut ja raadio on ümbritsetud a <div>-ga koos õe -vennaga <span>, et luua meie kohandatud juhtelement ja <label>lisatud teksti jaoks a. Struktuuriliselt on see sama lähenemisviis, mis meie vaikeseade .form-check.

Kasutame ~kõigi oma <input>olekute jaoks vendade valijat ( ) :checkedkohandatud vormi indikaatori õigeks stiiliks. Klassiga kombineerituna .custom-control-labelsaame iga üksuse teksti <input>oleku alusel ka stiilida.

Peidame vaikeväärtuse <input>ja opacitykasutame .custom-control-labelselle asemele uue kohandatud vormi indikaatori loomiseks ::beforeja ::after. Kahjuks ei saa me ainult selle elemendi põhjal kohandatud luua, <input>kuna CSS-id contentselle elemendiga ei tööta.

Märgitud olekus kasutame Base64 manustatud SVG ikoone Open Iconicult . See annab meile parima juhtimise stiili ja positsioneerimise üle brauserites ja seadmetes.

Märkeruudud

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Kohandatud märkeruudud võivad kasutada ka :indeterminatepseudoklassi, kui need on käsitsi määratud JavaScripti kaudu (selle määramiseks pole saadaval HTML-i atribuuti).

Kui kasutate jQueryt, peaks piisama sellisest:

$('.your-checkbox').prop('indeterminate', true)

Raadiod

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
  <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>

Järjekorras

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline2" name="customRadioInline1" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Keelatud

Kohandatud märkeruudud ja raadiod saab ka keelata. Lisage disabledboolean atribuut <input>ja kohandatud indikaator ja sildi kirjeldus kujundatakse automaatselt.

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheckDisabled" disabled>
  <label class="custom-control-label" for="customCheckDisabled">Check this custom checkbox</label>
</div>

<div class="custom-control custom-radio">
  <input type="radio" id="radio3" name="radioDisabled" id="customRadioDisabled" class="custom-control-input" disabled>
  <label class="custom-control-label" for="customRadioDisabled">Toggle this custom radio</label>
</div>

Valige menüü

Kohandatud <select>menüüd vajavad .custom-selectkohandatud stiilide käivitamiseks ainult kohandatud klassi.

<select class="custom-select">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Samuti saate valida väikeste ja suurte kohandatud valikute hulgast, et need sobiksid meie sarnase suurusega tekstisisestustega.

<select class="custom-select custom-select-lg mb-3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select class="custom-select custom-select-sm">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Atribuuti multipletoetatakse ka:

<select class="custom-select" multiple>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Nagu sizeatribuut:

<select class="custom-select" size="3">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Failibrauser

Failisisend on kõige räigeim ja nõuab täiendavat JavaScripti, kui soovite ühendada need funktsionaalse Vali fail… ja valitud failinime tekstiga.

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Peidame vaikefaili <input>kaudu opacityja laadime selle asemel <label>. Nupp genereeritakse ja asetatakse koos ::after. Lõpuks deklareerime ümbritseva sisu jaoks õigete vahedega a widthja .height<input>

Stringide tõlkimine või kohandamine

Pseudoklassi :lang()kasutatakse "Sirvi" teksti tõlkimiseks teistesse keeltesse. $custom-file-textAlistage või lisage Sassi muutuja kirjed asjakohase keelesildi ja lokaliseeritud stringidega. Ingliskeelseid stringe saab kohandada samal viisil. Näiteks saate hispaaniakeelse tõlke lisada järgmiselt (hispaania keele kood on es):

$custom-file-text: (
  en: "Browse",
  es: "Elegir"
);

Siin lang(es)toimib hispaaniakeelse tõlke kohandatud failisisend:

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLang" lang="es">
  <label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>

Õige teksti kuvamiseks peate oma dokumendi (või selle alampuu) keele õigesti määrama. Seda saab teha muu hulgas elemendi langatribuudi<html> või Content-LanguageHTTP-päise abil.