Source

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ötteiden ohjauksia, 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" 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>

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äyttö 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" 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>

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

Poistettuja valintaruutuja ja radioita tuetaan, mutta jos haluat siirtää not-allowedosoittimen ylätason kohdalle <label>, sinun on lisättävä disabledmäärite .form-check-input. Poistettu attribuutti käyttää vaaleampaa väriä syötteen tilan ilmaisemiseksi.

Valintaruudut ja radiot on suunniteltu tukemaan HTML-pohjaista lomakkeiden validointia ja tarjoamaan 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 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>

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 etiketti aputekniikoille (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">
  </div>
  <div class="form-group">
    <label for="formGroupExampleInput2">Another label</label>
    <input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input">
  </div>
</form>

Lomake ruudukko

Monimutkaisempia muotoja 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 .rowmuunnelmaan .form-row, joka ohittaa oletusarvoiset sarakkeiden kourut 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" 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>

Vaakasuora muoto

Luo vaakasuuntaisia ​​lomakkeita ruudukon avulla lisäämällä .rowluokka lomakeryhmiin ja .col-*-*määrittämällä tarrojen ja säätimien leveyden luokkien avulla. Muista lisätä .col-form-labelmyös <label>s-tietoihisi, 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
Valintaruutu 
<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>
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" 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>

Inline-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, jotka 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, joiden leveys on vähintään 576 pikseliä , jotta mobiililaitteiden kapeita kuvaportteja voidaan ottaa huomioon.

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 ohjausobjektiin, 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ämarginaalin helpottamaan 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ä.

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

Selaimet käsittelevät oletusarvoisesti kaikkia alkuperäisiä lomakesäätimiä ( ja <input>elementtejä ) a:n sisällä poistettuina, mikä estää sekä näppäimistön että hiiren käytön. Jos lomakkeessasi on kuitenkin myös elementtejä, niille annetaan vain tyyli . Kuten painikkeiden käytöstä poistamista koskevassa osiossa (ja erityisesti ankkurielementtien alaosiossa) mainittiin, tätä CSS-ominaisuutta ei ole vielä standardoitu eikä sitä tueta täysin Opera 18:ssa ja sitä vanhemmissa versioissa tai Internet Explorer 10:ssä, ja se voitti. Älä estä näppäimistön käyttäjiä keskittymästä tai aktivoimasta näitä linkkejä. Joten varmuuden vuoksi poista tällaiset linkit käytöstä mukautetulla JavaScriptillä.<select><button><fieldset disabled><a ... class="btn btn-*">pointer-events: none

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 disabledattribuuttia <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 luokillamme ja aloitus JavaScriptillä.

Suosittelemme mukautettuja vahvistustyylejä, sillä alkuperäisiä selaimen oletusasetuksia ei ilmoiteta näytönlukuohjelmille.

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).
  • 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, joissa on ylimääräistä HTML- ja CSS-koodia.
  • 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

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>

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 tyylittää CSS:llä, voit silti muokata palautetekstiä JavaScriptin avulla.

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

Palvelimen puolella

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

Näyttää hyvältä!
Näyttää hyvältä!
@
Valitse käyttäjätunnus.
Anna kelvollinen kaupunki.
Anna kelvollinen tila.
Anna kelvollinen postinumero.
Sinun on hyväksyttävä ennen lähettämistä. 
<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>

Tuetut elementit

Esimerkkilomakkeissamme näkyvät natiivitekstit <input>yllä, mutta lomakkeiden vahvistustyylejä on saatavana myös mukautetuille lomakeohjaimillemme.

Esimerkki virheellisestä palautetekstistä
Lisää esimerkki virheellistä palautetekstiä
Esimerkki virheellisestä muokatun valinnan palautetta
Esimerkki virheellisen muokatun tiedoston palaute 
<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>

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.

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>

Mukautetut lomakkeet

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

Valintaruudut ja radiot

Jokainen valintaruutu ja radio on kääritty <div>sisaruksen <span>kanssa mukautetun ohjausobjektin luomiseksi ja a <label>liitetylle tekstille. 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-labelluomaan 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="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>

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

Valitse valikko

Mukautetut <select>valikot tarvitsevat vain mukautetun luokan .custom-selectkäynnistääkseen mukautetut tyylit.

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

Tiedostoselain

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

Pseudoluokkaa käytetään "Selaa"-tekstin kääntämiseen muille kielille :lang(). 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.