in English

Lomakkeet

Esimerkkejä ja käyttöohjeita lomakkeiden ohjaustyyleistä, asetteluvaihtoehdoista ja mukautetuista komponenteista monenlaisten lomakkeiden luomiseen.

Yleiskatsaus

Bootstrapin lomakeohjaimet laajentavat uudelleenkäynnistettyjen lomakkeiden tyylejä luokilla. Käytä näitä luokkia ottaaksesi käyttöön räätälöidyt näytöt yhdenmukaisemman renderöinnin saamiseksi selaimissa ja laitteissa.

Varmista, että käytät asianmukaista typeattribuuttia kaikissa syötteissä (esim email. sähköpostiosoitteelle tai numbernumeerisille tiedoille), jotta voit hyödyntää uudempia syöttötoimintoja, kuten sähköpostin vahvistusta, numeron valintaa ja paljon muuta.

Tässä on nopea esimerkki Bootstrapin lomaketyyleistä. Jatka lukemista tarvittavien luokkien, lomakkeiden asettelun ja muiden dokumenttien lukemiseksi.

Emme koskaan jaa sähköpostiosoitettasi kenenkään muun kanssa. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <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">
  </div>
  <div class="form-group 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>

Lomakeohjaimet

Tekstimuotoiset ohjausobjektit, kuten <input>s, <select>s ja <textarea>s, on muotoiltu .form-controlluokan mukaan. Mukana on tyylejä yleisilmettä, tarkennustilaa, kokoa ja muuta varten.

Muista tutustua mukautettuihin lomakkeihimme saadaksesi lisää tyyliä <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>

Vaihda tiedostosyötteitä .form-controlvarten .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>

Mitoitus

Aseta korkeudet käyttämällä luokkia, kuten .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>

Lue ainoastaan

Lisää readonlysyötteeseen boolean-attribuutti estääksesi syötteen arvon muuttamisen. Vain luku -tulot näyttävät vaaleammilta (kuten käytöstä poistetut tulot), mutta säilyttävät vakiokohdistimen.

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

Pelkkää tekstiä vain luku

Jos haluat <input readonly>, että lomakkeesi elementit muotoillaan pelkkäksi tekstiksi, .form-control-plaintextpoista lomakekenttien oletustyyli ja säilytä oikea marginaali ja täyte luokan avulla.

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

Alueen tulot

Aseta vaakasuunnassa vieritettävät aluetulot käyttämällä .form-control-range.

<form>
  <div class="form-group">
    <label for="formControlRange">Example Range input</label>
    <input type="range" class="form-control-range" id="formControlRange">
  </div>
</form>

Valintaruudut ja radiot

Oletusvalintaruutuja ja radioita on parannettu .form-checkkäyttämällä yhtä luokkaa molemmille syöttötyypeille, mikä parantaa niiden HTML-elementtien asettelua ja käyttäytymistä . Valintaruuduilla voit valita yhden tai useamman vaihtoehdon luettelosta, kun taas radiot ovat yhden vaihtoehdon valitsemiseen monista.

Poistettuja valintaruutuja ja radioita tuetaan. Attribuutti disabledkäyttää vaaleampaa väriä, joka auttaa ilmaisemaan syötteen tilan.

Valintaruudut ja valintanapit tukevat HTML-pohjaista lomakkeiden validointia ja tarjoavat tiiviitä, helppokäyttöisiä tarroja. Sellaisenaan meidän <input>s ja <label>s ovat sisaruselementtejä toisin kuin <input>sisällä a <label>. Tämä on hieman monisanaisempi, koska sinun on määritettävä idja forattribuutit suhteuttamaan <input>ja <label>.

Oletus (pinottu)

Oletusarvoisesti mikä tahansa määrä valintaruutuja ja radioita, jotka ovat välittömiä sisaruksia, pinotaan pystysuunnassa ja sopivan välimatkan päässä -merkillä .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">
  <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>

Linjassa

Ryhmittele valintaruudut tai radiot samalle vaakariville lisäämällä .form-check-inlinene mihin tahansa .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>

Ilman etikettejä

Lisää .position-staticsyötteisiin, .form-checkjoissa ei ole tunnistetekstiä. Muista silti antaa jonkinlainen helppokäyttöinen nimi avustaville tekniikoille (esimerkiksi käyttämällä aria-label).

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

Layout

Koska Bootstrap koskee display: blockja width: 100%lähes kaikkia lomakeohjausobjektejamme, lomakkeet pinotaan oletusarvoisesti pystysuunnassa. Lisäluokilla voidaan muuttaa tätä asettelua lomakkeen mukaan.

Muodosta ryhmiä

.form-groupLuokka on helpoin tapa lisätä lomakkeisiin rakennetta . Se tarjoaa joustavan luokan, joka kannustaa ryhmittelemään oikein tarroja, säätimiä, valinnaisia ​​ohjetekstejä ja lomakkeiden vahvistusviestejä. Oletuksena se koskee vain margin-bottom, mutta se poimii .form-inlinetarvittaessa lisätyylejä. Käytä sitä <fieldset>s:n, <div>s:n tai lähes minkä tahansa muun elementin kanssa.

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

Lomake ruudukko

Monimutkaisempia lomakkeita voidaan rakentaa ruudukkoluokillamme. Käytä näitä lomakeasetteluissa, jotka vaativat useita sarakkeita, vaihtelevia leveyksiä ja muita kohdistusvaihtoehtoja.

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

Lomake rivi

Voit myös vaihtaa vakioruudukkorivimme .rowvariaatioon .form-row, joka ohittaa oletusarvoiset sarakkeiden räystäskourut tiukempien ja kompaktimpien asettelujen saamiseksi.

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

Ruudukkojärjestelmällä voidaan luoda myös monimutkaisempia asetteluja.

<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">
    </div>
    <div class="form-group col-md-6">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </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>

Vaakasuora muoto

Luo vaakasuuntaisia ​​lomakkeita ruudukon avulla lisäämällä .rowluokka lomakeryhmiin ja käyttämällä .col-*-*luokkia tarrojen ja säätimien leveyden määrittämiseen. Muista lisätä .col-form-labelmyös <label>s-kirjaimiin, jotta ne ovat pystysuunnassa keskitettyinä niihin liittyvien lomakesäätimien kanssa.

Joskus saatat joutua käyttämään marginaali- tai täyteapuohjelmia luodaksesi tarvitsemasi täydellisen kohdistuksen. Olemme esimerkiksi poistaneet padding-toppinotuista radiotulojen etiketistä tekstin kohdistamiseksi paremmin.

Radiot 
<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">
    </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">
    </div>
  </div>
  <fieldset class="form-group row">
    <legend class="col-form-label col-sm-2 float-sm-left 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>
  </fieldset>
  <div class="form-group row">
    <div class="col-sm-10 offset-sm-2">
      <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>
Vaakasuuntainen etiketin koko

Varmista, että käytät tai .col-form-label-sms- tai s-merkkiäsi noudattaaksesi ja kokoa oikein ..col-form-label-lg<label><legend>.form-control-lg.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>

Sarakkeen mitoitus

Kuten edellisissä esimerkeissä näkyy, ruudukkojärjestelmämme avulla voit sijoittaa minkä tahansa määrän .cols:iä a- .rowtai .form-row. Ne jakavat käytettävissä olevan leveyden tasaisesti keskenään. Voit myös valita osan sarakkeistasi viemään enemmän tai vähemmän tilaa, kun taas loput .cols jakavat loput tasaisesti tietyillä sarakeluokilla, kuten .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>

Automaattinen koon määritys

Alla olevassa esimerkissä flexbox-apuohjelma keskittää sisällön pystysuoraan ja muuttaa .colmuotoon .col-autoniin, että sarakkeet vievät vain niin paljon tilaa kuin tarvitaan. Toisin sanoen sarake kokoaa itsensä sisällön perusteella.

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

Voit sitten miksata sen uudelleen kokokohtaisilla sarakeluokilla.

@ 
<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 tietysti mukautettuja lomakkeiden ohjausobjekteja tuetaan.

<form>
  <div class="form-row align-items-center">
    <div class="col-auto my-1">
      <label class="mr-sm-2 sr-only" 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>

Sisäiset lomakkeet

Käytä .form-inlineluokkaa näyttääksesi sarjan tarroja, lomakesäätimiä ja painikkeita yhdellä vaakasuoralla rivillä. Sisäisten lomakkeiden lomakeohjaimet vaihtelevat hieman oletustiloistaan.

  • Ohjaimet ovat display: flex, kutistavat kaikki HTML-välilyönnit ja mahdollistavat kohdistuksen ohjauksen väli- ja flexbox - apuohjelmilla.
  • Ohjaimet ja syöttöryhmät saavat width: autoohittaa Bootstrapin oletusasetuksen width: 100%.
  • Säätimet näkyvät vain rivissä vain näkymäporteissa, jotka ovat vähintään 576 pikseliä leveät mobiililaitteiden kapeiden kuvaporttien huomioon ottamiseksi.

Saatat joutua käsittelemään yksittäisten lomakesäätimien leveyttä ja kohdistusta manuaalisesti väliapuohjelmien kanssa ( kuten alla on esitetty). Varmista lopuksi, että sisällytät aina <label>jokaisen lomakkeen ohjausobjektin kanssa, vaikka sinun pitäisi piilottaa se vierailijoilta, jotka eivät ole näytönlukijoita .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>

Myös mukautettuja lomakkeiden ohjausobjekteja ja valintoja tuetaan.

<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>
Vaihtoehtoja piilotetuille tarroille

Aputekniikoilla, kuten näytönlukuohjelmilla, on ongelmia lomakkeiden kanssa, jos et lisää tunnistetta jokaiselle syötteelle. Voit piilottaa näiden sisäisten lomakkeiden tarrat .sr-onlyluokan avulla. On olemassa muita vaihtoehtoisia menetelmiä, joilla voidaan antaa nimike aputekniikoille, kuten aria-label, aria-labelledbytai titleattribuutti. Jos mitään näistä ei ole, aputekniikat voivat turvautua placeholderattribuutin käyttöön, jos se on olemassa, mutta huomaa, että sen käyttöä placeholdermuiden merkintämenetelmien korvikkeena ei suositella.

Ohjeteksti

Lohkotason ohjeteksti lomakkeisiin voidaan luoda käyttämällä .form-text(tunnetaan aiemmin nimellä .help-blockv3). Sisäinen ohjeteksti voidaan toteuttaa joustavasti käyttämällä mitä tahansa upotettua HTML-elementtiä ja hyödyllisyysluokkia, kuten .text-muted.

Ohjetekstin liittäminen lomakkeen ohjaimiin

Ohjetekstin tulee olla nimenomaisesti liitetty lomakkeen ohjausobjektiin, johon se liittyy aria-describedbymääritteen käyttöön. Tämä varmistaa, että avustavat tekniikat, kuten näytönlukijat, ilmoittavat tämän ohjetekstin, kun käyttäjä keskittyy tai siirtyy ohjaukseen.

Alla olevat ohjetekstit voidaan muotoilla käyttämällä .form-text. Tämä luokka sisältää display: blockja lisää ylämarginaalia helpottaakseen välilyöntejä yllä olevista tuloista.

Salasanasi tulee olla 8–20 merkkiä pitkä, sisältää kirjaimia ja numeroita, eikä se saa sisältää välilyöntejä, erikoismerkkejä tai hymiöitä. 
<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>

Sisäinen teksti voi käyttää mitä tahansa tyypillistä upotettua HTML-elementtiä (oli se sitten <small>, <span>, tai jotain muuta) ilman muuta kuin hyödyllisyysluokkaa.

Sen tulee olla 8-20 merkkiä pitkä. 
<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>

Vammaiset lomakkeet

Lisää disabledlooginen attribuutti syötteeseen estääksesi käyttäjän vuorovaikutuksen ja tehdäksesi siitä vaaleamman.

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

Lisää disabledattribuutti kohtaan a <fieldset>poistaaksesi kaikki ohjaimet käytöstä.

Esimerkki käytöstä poistetusta kenttäjoukosta 
<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <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-group">
      <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>
Varoitus ankkureilla

Selaimet käsittelevät kaikkia alkuperäisiä lomakesäätimiä ( <input>, <select>, ja <button>elementit) a:n sisällä <fieldset disabled>poissa käytöstä, mikä estää sekä näppäimistön että hiiren vuorovaikutuksen niissä.

Jos lomakkeessasi on kuitenkin myös mukautettuja painikemaisia ​​elementtejä, kuten <a ... class="btn btn-*">, niille annetaan vain tyyli pointer-events: none. Kuten painikkeiden käytöstä poistamista koskevassa osiossa (ja erityisesti ankkurielementtejä koskevassa alaosiossa) todettiin, tätä CSS-ominaisuutta ei ole vielä standardoitu, eikä sitä tueta täysin Internet Explorer 10:ssä. Ankkuripohjaiset ohjaimet ovat myös edelleen käytössä. tarkennettavissa ja käytettävissä näppäimistöllä. Sinun on muokattava näitä säätimiä manuaalisesti lisäämällä tabindex="-1"ne estämään niitä saamasta tarkennusta ja aria-disabled="disabled"ilmoittamaan tilastaan ​​aputekniikoille.

Selainten välinen yhteensopivuus

Vaikka Bootstrap käyttää näitä tyylejä kaikissa selaimissa, Internet Explorer 11 ja sitä vanhemmat versiot eivät täysin tue disabledmääritettä <fieldset>. Käytä mukautettua JavaScriptiä poistaaksesi kenttäjoukon käytöstä näissä selaimissa.

Validointi

Anna käyttäjillesi arvokasta ja hyödyllistä palautetta HTML5-lomakkeen validoinnin avulla – saatavilla kaikissa tuetuissa selaimissamme . Valitse selaimen oletusarvoisesta vahvistuspalautteesta tai toteuta mukautettuja viestejä sisäänrakennetuilla luokilla ja aloitus JavaScriptillä.

Tiedämme, että asiakaspuolen mukautetut vahvistustyypit ja työkaluvinkit eivät tällä hetkellä ole käytettävissä, koska ne eivät ole alttiina aputekniikoille. Kun kehitämme ratkaisua, suosittelemme käyttämään joko palvelinpuolen vaihtoehtoa tai oletusselaimen vahvistusmenetelmää.

Kuinka se toimii

Näin lomakkeiden vahvistus toimii Bootstrapin kanssa:

  • HTML-lomakkeen validointia sovelletaan CSS:n kahden pseudoluokan :invalidja :valid. Se koskee elementtejä <input>, <select>, ja <textarea>.
  • Bootstrap laajentaa :invalidja :validtyylit .was-validatedyläluokkaan, jota yleensä käytetään <form>. Muussa tapauksessa kaikki pakolliset kentät ilman arvoa näkyvät virheellisinä sivun latauksen yhteydessä. Tällä tavalla voit valita, milloin aktivoit ne (yleensä lomakkeen lähettämisen jälkeen).
  • Jos haluat nollata lomakkeen ulkoasun (esimerkiksi dynaamisten lomakelähetysten tapauksessa AJAXilla), poista .was-validatedluokka <form>uudelleen lähettämisen jälkeen.
  • Varavaihtoehtona .is-invalidja .is-validluokkia voidaan käyttää pseudo-luokkien sijasta palvelinpuolen validoinnissa . He eivät vaadi .was-validatedvanhempien luokkaa.
  • CSS:n toimintaa koskevien rajoitusten vuoksi emme voi (tällä hetkellä) käyttää tyylejä <label>DOM:n lomakeohjausobjektin edelle ilman mukautetun JavaScriptin apua.
  • Kaikki nykyaikaiset selaimet tukevat rajoitusten validointisovellusliittymää , joka on sarja JavaScript-menetelmiä lomakeohjausobjektien vahvistamiseen.
  • Palauteviestit voivat käyttää selaimen oletusasetuksia (eri selaimissa ja ei-tyyleillä CSS:n kautta) tai mukautettuja palautetyylejämme HTML:n ja CSS:n lisäksi.
  • Voit antaa mukautettuja kelvollisuusviestejä setCustomValidityJavaScriptissä.

Harkitse tätä ajatellen seuraavia esityksiä mukautettujen lomakkeiden vahvistustyyleistämme, valinnaisista palvelinpuolen luokista ja selaimen oletusasetuksista.

Mukautetut tyylit

Mukautettujen Bootstrap-lomakkeen vahvistusviestien kohdalla sinun on lisättävä novalidateboolean-attribuutti <form>. Tämä poistaa käytöstä selaimen oletuspalautteen työkaluvihjeet, mutta antaa silti pääsyn JavaScriptin lomakkeiden vahvistussovellusliittymiin. Yritä lähettää alla oleva lomake; JavaScript sieppaa lähetyspainikkeen ja välittää palautetta sinulle. Kun yrität lähettää, näet lomakkeen ohjaimissa käytetyt :invalidja tyylit.:valid

Mukautetut palautetyylit käyttävät mukautettuja värejä, reunuksia, tarkennustyylejä ja taustakuvakkeita palautteen välittämiseksi paremmin. Taustakuvakkeet <select>s:lle ovat käytettävissä vain .custom-select, mutta eivät .form-control.

Näyttää hyvältä!
Näyttää hyvältä!
Anna kelvollinen kaupunki.
Valitse kelvollinen osavaltio.
Anna kelvollinen postinumero.
Sinun on hyväksyttävä ennen lähettämistä. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select 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" 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>

Selaimen oletusasetukset

Etkö ole kiinnostunut mukautetuista vahvistuspalauteviesteistä tai JavaScriptin kirjoittamisesta lomakkeiden käyttäytymisen muuttamiseksi? Kaikki hyvin, voit käyttää selaimen oletusasetuksia. Yritä lähettää alla oleva lomake. Selaimestasi ja käyttöjärjestelmästäsi riippuen näet hieman erilaista palautetta.

Vaikka näitä palautetyylejä ei voi muotoilla CSS:llä, voit silti muokata palautetekstiä JavaScriptin avulla.

<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationDefault01">First name</label>
      <input type="text" class="form-control" id="validationDefault01" value="Mark" required>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationDefault02">Last name</label>
      <input type="text" class="form-control" id="validationDefault02" value="Otto" required>
    </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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" 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>

Palvelimen puolella

Suosittelemme käyttämään asiakaspuolen vahvistusta, mutta jos tarvitset palvelinpuolen vahvistusta, voit merkitä virheelliset ja kelvolliset lomakekentät - .is-invalidja -painikkeilla .is-valid. Huomaa, että se .invalid-feedbackon myös tuettu näillä luokilla.

Jos kentät ovat virheellisiä, varmista, että virheellinen palaute/virhesanoma on liitetty asiaankuuluvaan lomakekenttään käyttämällä aria-describedby. Tämän määritteen avulla voidaan viitata useampaan kuin yhteen id, jos kenttä viittaa jo ylimääräiseen lomaketekstiin.

Näyttää hyvältä!
Näyttää hyvältä!
Anna kelvollinen kaupunki.
Valitse kelvollinen osavaltio.
Anna kelvollinen postinumero.
Sinun on hyväksyttävä ennen lähettämistä. 
<form>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationServer02">Last name</label>
      <input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
      <div class="valid-feedback">
        Looks good!
      </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" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div id="validationServer04Feedback" class="invalid-feedback">
        Please select 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" aria-describedby="validationServer05Feedback" required>
      <div id="validationServer05Feedback" 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" aria-describedby="invalidCheck3Feedback" required>
      <label class="form-check-label" for="invalidCheck3">
        Agree to terms and conditions
      </label>
      <div  id="invalidCheck3Feedback" class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Tuetut elementit

Vahvistustyylit ovat saatavilla seuraaville lomakeohjausobjekteille ja komponenteille:

  • <input>s ja <textarea>s kanssa.form-control
  • <select>s .form-controltai.custom-select
  • .form-checks
  • .custom-checkboxs ja .custom-radios
  • .custom-file
Kirjoita viesti tekstialueelle.
Esimerkki virheellisestä palautetekstistä
Lisää esimerkki virheellistä palautetekstiä
Esimerkki virheellisestä muokatun valinnan palaute
Esimerkki virheellisen muokatun tiedoston palaute
@
Esimerkki virheellisestä syöteryhmän palautteesta
Esimerkki virheellisestä syöteryhmän palautteesta
Esimerkki virheellisestä syöteryhmän palautteesta 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <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="mb-3">
    <select class="custom-select" required>
      <option value="">Choose...</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 mb-3">
    <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>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <span class="input-group-text" id="validatedInputGroupPrepend">@</span>
      </div>
      <input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="mb-3">
    <div class="input-group is-invalid">
      <div class="input-group-prepend">
        <label class="input-group-text" for="validatedInputGroupSelect">Options</label>
      </div>
      <select class="custom-select" id="validatedInputGroupSelect" required>
        <option value="">Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
    </div>
    <div class="invalid-feedback">
      Example invalid input group feedback
    </div>
  </div>

  <div class="input-group is-invalid">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
      <label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
    </div>
    <div class="input-group-append">
       <button class="btn btn-outline-secondary" type="button">Button</button>
    </div>
  </div>
  <div class="invalid-feedback">
    Example invalid input group feedback
  </div>
</form>

Työkaluvinkit

Jos lomakkeen asettelu sallii sen, voit vaihtaa .{valid|invalid}-feedbackluokat .{valid|invalid}-tooltipluokkiin näyttääksesi vahvistuspalautteen tyylitellyssä työkaluvihjeessä. Varmista, että vanhempi on position: relativemukana työkaluvihjeiden sijoittamista varten. Alla olevassa esimerkissä sarakeluokissamme on tämä jo, mutta projektisi saattaa vaatia vaihtoehtoisen asennuksen.

Näyttää hyvältä!
Näyttää hyvältä!
Anna kelvollinen kaupunki.
Valitse kelvollinen osavaltio.
Anna kelvollinen postinumero. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationTooltip02">Last name</label>
      <input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
      <div class="valid-tooltip">
        Looks good!
      </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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select 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" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Mukauttaminen

Validointitiloja voidaan mukauttaa Sassin kautta $form-validation-stateskartan avulla. Tämä tiedostossamme sijaitseva Sass-kartta on silmukan päällä oletus- / vahvistustilojen _variables.scssluomiseksi . Mukana on sisäkkäinen kartta kunkin osavaltion värin ja kuvakkeen mukauttamiseen. Vaikka selaimet eivät tue muita tiloja, mukautettuja tyylejä käyttävät käyttäjät voivat helposti lisätä monimutkaisempaa palautetta lomakkeeseen.validinvalid

Huomaa, että emme suosittele näiden arvojen mukauttamista muuttamatta myös form-validation-statemiksausta.

// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    )
  ),
  $form-validation-states
);

// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
  @include form-validation-state($state, map-get($data, color), map-get($data, icon));
}

Syöteryhmän vahvistus

Jotta voidaan havaita, mitkä elementit tarvitsevat pyöristettyjä kulmia validoidun syöttöryhmän sisällä, syöttöryhmä vaatii .has-validationlisäluokan.

<div class="input-group has-validation">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" required>
  <div class="invalid-feedback">
    Please choose a username.
  </div>
</div>
@
Valitse käyttäjätunnus.

Mukautetut lomakkeet

Käytä täysin mukautettuja lomakeelementtejämme korvaamaan selaimen oletusasetukset, jotta saat entistä enemmän räätälöinnin ja selainyhdenmukaisuuden. Ne on rakennettu semanttisten ja helppokäyttöisten merkintöjen päälle, joten ne korvaavat kaikki oletuslomakkeen hallinnan.

Valintaruudut ja radiot

Jokainen valintaruutu ja radio <input>ja <label>pariliitos on kääritty <div>mukautetun ohjausobjektin luomiseksi. Rakenteellisesti tämä on sama lähestymistapa kuin oletusarvomme .form-check.

Käytämme sisarusvalitsinta ( ~) kaikissa <input>osavaltioissamme, kuten :checkedmukautetun lomakkeen ilmaisimen oikean tyylin määrittämiseksi. Yhdistettynä .custom-control-labelluokkaan voimme myös muotoilla kunkin kohteen tekstin <input>tilan perusteella.

Piilotamme oletusarvon <input>ja opacitykäytämme .custom-control-label-merkkiä luodaksesi uuden mukautetun lomakkeen ilmaisimen sen tilalle painikkeella ::beforeja ::after. Valitettavasti emme voi rakentaa mukautettua vain siitä, <input>koska CSS: contentt eivät toimi kyseisellä elementillä.

Valituissa tiloissa käytämme Open Iconicista upotettuja base64-SVG - kuvakkeita . Tämä tarjoaa meille parhaan hallinnan tyyliin ja sijoitteluun eri selaimissa ja laitteissa.

valintaruudut

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

Mukautetut valintaruudut voivat myös käyttää :indeterminatepseudoluokkaa, kun se on asetettu manuaalisesti JavaScriptin kautta (sen määrittämiseen ei ole käytettävissä HTML-attribuuttia).

Jos käytät jQueryä, tämän pitäisi riittää:

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

Radiot

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

Linjassa

<div class="custom-control custom-radio custom-control-inline">
  <input type="radio" id="customRadioInline1" name="customRadioInline" 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="customRadioInline" class="custom-control-input">
  <label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>

Liikuntarajoitteinen

Mukautetut valintaruudut ja radiot voidaan myös poistaa käytöstä. Lisää disabledboolean-attribuutti kohtaan, <input>jolloin mukautettu ilmaisin ja tunnisteen kuvaus muotoillaan automaattisesti.

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

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

Kytkimet

Kytkimessä on mukautetun valintaruudun merkintä, mutta se käyttää .custom-switchluokkaa vaihtokytkimen hahmontamiseen. Kytkimet tukevat myös disabledmääritettä.

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1">
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
  <label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>

Valitse valikko

Mukautetut <select>valikot tarvitsevat vain mukautetun luokan .custom-selectkäynnistääkseen mukautetut tyylit. Mukautetut tyylit rajoittuvat <select>alkuperäiseen ulkoasuun, eivätkä ne voi muokata tyyliä <option>selaimen rajoitusten vuoksi.

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

Voit myös valita pienistä ja suurista mukautetuista valinnoista vastaamaan samankokoisia tekstinsyöttöjämme.

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

Attribuuttia multipletuetaan myös:

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

Kuten sizeattribuutti:

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

Alue

Luo mukautettuja <input type="range">säätimiä käyttämällä .custom-range. Raita (tausta) ja peukalo (arvo) on suunniteltu näyttämään samalta kaikissa selaimissa. Koska vain IE ja Firefox tukevat kappaleiden "täyttämistä" peukalon vasemmalla tai oikealla puolella keinona ilmaista visuaalisesti edistystä, emme tue sitä tällä hetkellä.

<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">

Aluetuloilla on implisiittiset arvot minja max— 0ja 100vastaavasti. Voit määrittää uusia arvoja niille, jotka käyttävät attribuutteja minja .max

<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">

Oletusarvoisesti alueen syötteet "snapsaavat" kokonaislukuarvoihin. Voit muuttaa tätä määrittämällä steparvon. Alla olevassa esimerkissä tuplaamme vaiheiden määrän käyttämällä step="0.5".

<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">

Tiedostoselain

Suositeltu laajennus mukautetun tiedostosyötteen animointiin: bs-custom-file-input , jota käytämme tällä hetkellä täällä asiakirjoissamme.

Tiedoston syöttö on joukosta räikein ja vaatii lisää JavaScriptiä, jos haluat liittää ne toiminnalliseen Valitse tiedosto… ja valitun tiedostonimen tekstiin.

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

Piilotamme oletustiedoston <input>kautta opacityja muotoilemme sen sijaan <label>. Painike luodaan ja sijoitetaan painikkeella ::after. Lopuksi ilmoitamme a- widthja -merkkien heightoikean välityksen <input>varmistamiseksi ympäröivälle sisällölle.

Merkkien kääntäminen tai mukauttaminen SCSS:llä

Pseudoluokkaa :lang()käytetään mahdollistamaan "Selaa"-tekstin kääntäminen muille kielille. Ohita tai lisää merkintöjä $custom-file-textSass-muuttujaan asiaankuuluvalla kielitunnisteella ja lokalisoiduilla merkkijonoilla. Englanninkieliset kielet voidaan mukauttaa samalla tavalla. Esimerkiksi näin voidaan lisätä espanjankielinen käännös (espanjan kielikoodi on es):

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

Tässä on lang(es)toiminnassa espanjankielisen käännöksen mukautettu tiedosto:

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

Sinun on asetettava asiakirjan (tai sen alipuun) kieli oikein, jotta oikea teksti näytetään. Tämä voidaan tehdä käyttämällä elementin attribuuttia langtai<html> HTTP- Content-Languageotsikkoa muiden menetelmien ohella.

Merkkijonojen kääntäminen tai mukauttaminen HTML:llä

Bootstrap tarjoaa myös tavan kääntää "Selaa"-teksti HTML:ssä data-browseattribuutilla, joka voidaan lisätä mukautettuun syöttötunnisteeseen (esimerkki hollanniksi):

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFileLangHTML">
  <label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>