Source

Eyðublöð

Dæmi og notkunarleiðbeiningar fyrir formstýringarstíla, útlitsvalkosti og sérsniðna íhluti til að búa til fjölbreytt úrval eyðublaða.

Yfirlit

Formstýringar Bootstrap stækka við endurræst formstíla okkar með flokkum. Notaðu þessa flokka til að velja sérsniðna skjái þeirra til að fá samkvæmari birtingu á milli vafra og tækja.

Vertu viss um að nota viðeigandi typeeiginleika á öllum innsendum (td emailfyrir netfang eða numberfyrir tölulegar upplýsingar) til að nýta nýrri innsláttarstýringar eins og staðfestingu tölvupósts, númeraval og fleira.

Hér er fljótlegt dæmi til að sýna fram á formstíl Bootstrap. Haltu áfram að lesa til að fá skjöl um nauðsynlega flokka, uppsetningu eyðublaða og fleira.

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

Formstýringar

Textaformstýringar - eins og <input>s, <select>s og <textarea>s - eru stílaðar með .form-controlbekknum. Innifalið eru stíll fyrir almennt útlit, fókusstöðu, stærð og fleira.

Vertu viss um að skoða sérsniðin eyðublöð okkar til að auka stíl <select>s.

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

Fyrir skráarinnslátt skaltu skipta um .form-controlfyrir .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>

Stærð

Stilltu hæðir með því að nota flokka eins .form-control-lgog og .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>

Lesið aðeins

Bættu readonlyboolean eigindinni við inntak til að koma í veg fyrir breytingar á gildi inntaksins. Lesinntak virðist léttari (alveg eins og óvirkt inntak), en heldur venjulegum bendili.

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

Skrifvarinn venjulegur texti

Ef þú vilt hafa <input readonly>þætti á eyðublaðinu þínu stílaða sem venjulegan texta, notaðu .form-control-plaintextflokkinn til að fjarlægja sjálfgefna formreitsnið og varðveita rétta spássíu og fyllingu.

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

Range-inntak

Stilltu inntak sem hægt er að fletta lárétt með því að nota .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>

Gátreitir og útvarp

Sjálfgefin gátreitir og útvarpstæki eru endurbætt með hjálp .form-checkeins flokks fyrir báðar inntakstegundir sem bætir útlit og hegðun HTML þátta þeirra . Gátreitir eru til að velja einn eða fleiri valmöguleika á lista, en útvarp eru til að velja einn valmöguleika af mörgum.

Óvirkir gátreitir og útvarpstæki eru studd, en til að gefa not-allowedbendilinn á foreldri <label>, þarftu að bæta disabledeigindinni við .form-check-input. Óvirkja eigindin mun nota ljósari lit til að hjálpa til við að gefa til kynna stöðu inntaksins.

Gátreitir og útvarpstæki eru byggð til að styðja við HTML-undirstaða eyðublaðsprófun og veita hnitmiðaða, aðgengilega merkimiða. Sem slík eru <input>s og <label>s okkar systkinaþættir öfugt við <input>innan <label>. Þetta er örlítið orðrétt þar sem þú verður að tilgreina idog foreiginleika til að tengja <input>og <label>.

Sjálfgefið (staflað)

Sjálfgefið er að hvaða fjölda gátreita og útvarpsstöðva sem eru strax systkini verða lóðrétt staflað og á viðeigandi bili með .form-check.

Sjálfgefinn gátreitur

Óvirkur gátreitur

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

Sjálfgefið útvarp

Annað sjálfgefið útvarp

Óvirkt útvarp

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

Í línu

Flokkaðu gátreiti eða útvarpstæki í sömu láréttu röðina með því að bæta .form-check-inlinevið hvaða .form-check.

3 (óvirkur)

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

3 (óvirkur)

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

Án merkimiða

Bæta .position-staticvið inntak innan .form-checksem eru ekki með neinn merkitexta. Mundu að gefa samt upp einhvers konar merki fyrir hjálpartækni (til dæmis með því að nota 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>

Skipulag

Þar sem Bootstrap á við display: blockog width: 100%fyrir næstum allar formstýringar okkar munu eyðublöð sjálfgefið stafla lóðrétt. Hægt er að nota fleiri flokka til að breyta þessu skipulagi eftir formi.

Myndaðu hópa

Bekkurinn .form-grouper auðveldasta leiðin til að bæta einhverri uppbyggingu við form. Það býður upp á sveigjanlegan flokk sem hvetur til réttrar flokkunar merkimiða, stýringa, valfrjáls hjálpartexta og eyðublaðsstaðfestingarskilaboða. Sjálfgefið gildir það aðeins margin-bottom, en það tekur upp viðbótarstíla .form-inlineeftir þörfum. Notaðu það með <fieldset>s, <div>s eða næstum hvaða öðrum þáttum sem er.

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

Myndaðu rist

Hægt er að búa til flóknari form með því að nota grid flokkana okkar. Notaðu þetta fyrir eyðublaðaútlit sem krefjast margra dálka, fjölbreyttrar breiddar og viðbótarjöfnunarvalkosta.

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

Myndaröð

Þú getur líka skipt út .rowfyrir .form-row, afbrigði af stöðluðu línunetslínunni okkar sem hnekkir sjálfgefnum dálkarrennum fyrir þéttari og þéttari skipulag.

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

Einnig er hægt að búa til flóknari skipulag með ristkerfinu.

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

Lárétt form

Búðu til lárétt eyðublöð með hnitanetinu með því að bæta .rowbekknum við mynda hópa og nota .col-*-*flokka til að tilgreina breidd merkimiða og stýringa. Gakktu úr skugga um að þú bætir .col-form-labellíka við <label>skjölin þín svo þau séu lóðrétt í miðju með tilheyrandi formstýringum.

Stundum þarftu kannski að nota spássíu- eða fyllingartæki til að búa til þá fullkomnu röðun sem þú þarft. Til dæmis höfum við fjarlægt padding-topmerkimiðann á staflaðri útvarpsinntak okkar til að samræma grunnlínuna betur.

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

Lárétt stærð merkimiða

Vertu viss um að nota .col-form-label-smeða .col-form-label-lgtil þín <label>eða <legend>s til að fylgja réttri stærð .form-control-lgog .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>

Stærð súlu

Eins og sýnt er í fyrri dæmunum, gerir töflukerfið okkar þér kleift að setja hvaða fjölda .cols sem er innan a .roweða .form-row. Þeir munu skipta tiltækri breidd jafnt á milli sín. Þú getur líka valið hlutmengi af dálkunum þínum til að taka meira eða minna pláss, en hinir dálkarnir .colskipta jafnt afganginum, með sérstökum dálkaflokkum eins og .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>

Sjálfvirk stærð

Dæmið hér að neðan notar flexbox tól til að miðja innihaldið lóðrétt og breytist .colþannig .col-autoað dálkarnir þínir taka aðeins eins mikið pláss og þarf. Sagt á annan hátt, dálkurinn stærðir sjálfan sig út frá innihaldi.

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

Þú getur síðan endurblandað það aftur með stærðarsértækum dálkaflokkum.

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

Og auðvitað eru sérsniðnar formstýringar studdar.

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

Innbyggð eyðublöð

Notaðu .form-inlinebekkinn til að sýna röð af merkjum, eyðublaðastýringum og hnöppum á einni láréttri röð. Eyðublaðastýringar innan innbyggðra eyðublaða eru örlítið frábrugðnar sjálfgefnum stöðu þeirra.

Stýringar eru display: flex, draga saman hvaða HTML hvíta bil sem er og leyfa þér að veita jöfnunarstýringu með bili og flexbox tólum.
Stýringar og inntakshópar fá width: autotil að hnekkja sjálfgefnu Bootstrap width: 100%.
Stýringar birtast aðeins innbyggðar í útsýnisgluggum sem eru að minnsta kosti 576px á breidd til að taka tillit til þröngra útsýnisgátta í fartækjum.

Þú gætir þurft að takast á handvirkt við breidd og röðun einstakra eyðublaðastýringa með biltólum (eins og sýnt er hér að neðan). Að lokum, vertu viss um að hafa alltaf a <label>með hverri eyðublaðastýringu, jafnvel þótt þú þurfir að fela það fyrir gestum sem ekki eru skjálesarar með .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>

Sérsniðnar formstýringar og val eru einnig studd.

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

Val við falin merki

Hjálpartækni eins og skjálesarar munu eiga í vandræðum með eyðublöðin þín ef þú hefur ekki merki fyrir hvert inntak. Fyrir þessi innbyggðu eyðublöð geturðu falið merkimiðana með því að nota .sr-onlybekkinn. Það eru aðrar aðrar aðferðir til að útvega merki fyrir hjálpartækni, svo sem aria-label, aria-labelledbyeða titleeigindina. Ef ekkert af þessu er til staðar gæti hjálpartækni gripið til þess að nota placeholdereiginleikann, ef hann er til staðar, en athugaðu að placeholderekki er mælt með því að nota það í staðinn fyrir aðrar merkingaraðferðir.

Hjálpartexti

Hægt er að búa til hjálpartexta á blokkum á eyðublöðum með því að nota .form-text(áður þekkt sem .help-blockí v3). Hægt er að útfæra innbyggðan hjálpartexta á sveigjanlegan hátt með því að nota hvaða innbyggða HTML frumefni og gagnsemisflokka eins og .text-muted.

Að tengja hjálpartexta við formstýringar

Hjálpartexti ætti að vera beinlínis tengdur við formstýringuna sem hann tengist með því að nota aria-describedbyeigindina. Þetta mun tryggja að hjálpartækni – eins og skjálesarar – tilkynni þennan hjálpartexta þegar notandinn einbeitir sér eða fer inn í stýringuna.

Hægt er að stilla hjálpartexta fyrir neðan inntak með .form-text. Þessi flokkur inniheldur display: blockog bætir við nokkrum efstu framlegð til að auðvelda bilið frá inntakunum hér að ofan.

Lykilorð Lykilorðið þitt verður að vera 8-20 stafir að lengd, innihalda bókstafi og tölustafi og má ekki innihalda bil, sérstafi eða emoji.

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

Innbyggður texti getur notað hvaða dæmigerða innbyggða HTML-einingu sem er (hvort sem það er <small>, <span>, eða eitthvað annað) með ekkert annað en gagnsemisflokk.

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

Óvirk eyðublöð

Bættu disabledboolean eigindinni við inntak til að koma í veg fyrir samskipti notenda og láta það virðast léttara.

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

Bættu disabledeigindinni við a <fieldset>til að slökkva á öllum stjórntækjum innan.

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

Fyrirvari með akkerum

Sjálfgefið er að vafrar meðhöndla allar innbyggðar formstýringar ( <input>, <select>og <button>þættir) inni í a <fieldset disabled>sem óvirka, sem kemur í veg fyrir samskipti bæði með lyklaborði og mús á þeim. Hins vegar, ef eyðublaðið þitt inniheldur einnig <a ... class="btn btn-*">þætti, munu þessir aðeins fá stíllinn pointer-events: none. Eins og fram kemur í hlutanum um óvirkt ástand fyrir hnappa (og sérstaklega í undirkaflanum fyrir akkerisþætti), er þessi CSS eign ekki enn staðlað og er ekki að fullu studd í Internet Explorer 10 og mun ekki koma í veg fyrir að lyklaborðsnotendur séu fær um að einbeita sér eða virkja þessa tengla. Svo til öryggis skaltu nota sérsniðið JavaScript til að slökkva á slíkum hlekkjum.

Samhæfni í gegnum vafra

Þó að Bootstrap muni beita þessum stílum í öllum vöfrum, styðja Internet Explorer 11 og neðar ekki að fullu disabledeiginleikann á <fieldset>. Notaðu sérsniðið JavaScript til að slökkva á reitsettinu í þessum vöfrum.

Staðfesting

Gefðu notendum þínum verðmæta og hagnýta endurgjöf með HTML5 eyðublaði – fáanlegt í öllum studdum vöfrum okkar . Veldu úr sjálfgefnum staðfestingarviðbrögðum vafrans, eða settu í notkun sérsniðin skilaboð með innbyggðum flokkum okkar og byrjunar-JavaScript.

Eins og er mælum við með því að nota sérsniðna staðfestingarstíl, þar sem sjálfgefin staðfestingarskilaboð í innfæddum vafra eru ekki stöðugt útsett fyrir hjálpartækni í öllum vöfrum (einkum Chrome á skjáborði og farsímum).

Hvernig það virkar

Svona virkar formprófun með Bootstrap:

Staðfesting HTML forms er beitt í gegnum tvo gerviflokka CSS :invalidog :valid. Það á við um <input>, <select>, og <textarea>þætti.
Bootstrap nær yfir :invalidog :validstíla í foreldraflokk .was-validated, venjulega notað á <form>. Annars birtast allir nauðsynlegir reitir án gildis sem ógildir við hleðslu síðu. Þannig geturðu valið hvenær þú vilt virkja þau (venjulega eftir að reynt er að senda inn eyðublað).
Til að endurstilla útlit eyðublaðsins (td þegar um er að ræða kraftmikla eyðublaðasendingar með AJAX) skaltu fjarlægja .was-validatedbekkinn <form>aftur eftir innsendingu.
Sem varaflokkur .is-invalidog .is-validhægt er að nota flokka í stað gerviflokka fyrir staðfestingu á netþjóni . Þeir þurfa ekki .was-validatedforeldraflokk.
Vegna takmarkana á því hvernig CSS virkar, getum við (sem stendur) ekki beitt stílum á a <label>sem kemur á undan formstýringu í DOM án hjálpar sérsniðins JavaScript.
Allir nútíma vafrar styðja þvingunarprófunar-API , röð JavaScript-aðferða til að staðfesta formstýringar.
Ábendingaskilaboð kunna að nota sjálfgefnar stillingar vafrans (mismunandi fyrir hvern vafra og óstílfærðar í gegnum CSS) eða sérsniðna endurgjöfarstíla okkar með viðbótar HTML og CSS.
Þú getur útvegað sérsniðin gildisskilaboð með setCustomValidityJavaScript.

Með það í huga skaltu íhuga eftirfarandi kynningar fyrir sérsniðna löggildingarstíla okkar, valfrjálsa miðlaraflokka og sjálfgefna vafra.

Sérsniðin stíll

Fyrir sérsniðin staðfestingarskilaboð fyrir Bootstrap form þarftu að bæta novalidateboolean eigindinni við <form>. Þetta slekkur á sjálfgefnum ábendingum um endurgjöf vafrans, en veitir samt aðgang að eyðublaðaprófunarforritaskilum í JavaScript. Reyndu að senda inn eyðublaðið hér að neðan; JavaScript okkar mun stöðva sendingarhnappinn og senda endurgjöf til þín.

Þegar þú reynir að senda inn, muntu sjá :invalidog :validstíll notaður á eyðublaðastýringum þínum.

Fyrsta nafn

Looks good!

Eftirnafn

Looks good!

Notendanafn

Please choose a username.

Borg

Please provide a valid city.

Ríki

Please provide a valid state.

Rennilás

Please provide a valid zip.

Samþykkja skilmála og skilyrði

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>

Sjálfgefnar stillingar vafra

Hefur þú ekki áhuga á sérsniðnum staðfestingarskilaboðum eða að skrifa JavaScript til að breyta hegðun eyðublaða? Allt í lagi, þú getur notað sjálfgefnar stillingar vafrans. Prófaðu að senda inn eyðublaðið hér að neðan. Það fer eftir vafranum þínum og stýrikerfi, þú munt sjá aðeins mismunandi stíl af endurgjöf.

Þó að ekki sé hægt að stíla þessa endurgjöf með CSS, geturðu samt sérsniðið endurgjöfartextann í gegnum JavaScript.

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

Server hlið

Við mælum með því að nota staðfestingu viðskiptavinarhliðar, en ef þú þarfnast netþjónshliðar geturðu gefið til kynna ógilda og gilda eyðublaðareiti með .is-invalidog .is-valid. Athugaðu að það .invalid-feedbacker einnig stutt með þessum flokkum.

Fyrsta nafn

Lítur vel út!

Eftirnafn

Lítur vel út!

Notendanafn

Vinsamlegast veldu notendanafn.

Borg

Vinsamlegast gefðu upp gilda borg.

Ríki

Vinsamlegast gefðu upp gilt ástand.

Rennilás

Vinsamlegast gefðu upp gilt zip.

Samþykkja skilmála og skilyrði

Þú verður að samþykkja áður en þú sendir inn.

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

Stuðningsþættir

Dæmieyðublöðin okkar sýna innfædda texta <input>hér að ofan, en eyðublaðsstílar eru einnig fáanlegir fyrir sérsniðna formstýringar okkar.

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

Verkfæraráð

Ef útlit eyðublaðsins þíns leyfir það geturðu skipt um .{valid|invalid}-feedbackflokka fyrir .{valid|invalid}-tooltipflokka til að sýna staðfestingarviðbrögð í stíluðum verkfæraleiðbeiningum. Vertu viss um að hafa foreldri með position: relativeá því til að staðsetja tól. Í dæminu hér að neðan eru dálkaflokkarnir okkar með þetta nú þegar, en verkefnið þitt gæti þurft aðra uppsetningu.

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

Sérsniðin eyðublöð

Til að sérsníða enn frekar og samkvæmni þvert yfir vafra skaltu nota algjörlega sérsniðna eyðublaðseiningar okkar til að skipta út sjálfgefnum vafrastillingum. Þau eru byggð ofan á merkingarfræðilegri og aðgengilegri merkingu, svo þau koma í staðin fyrir hvaða sjálfgefna formstýringu sem er.

Gátreitir og útvarp

Hver gátreitur og útvarp er pakkað inn í <div>með systkini <span>til að búa til sérsniðna stjórn og a <label>fyrir meðfylgjandi texta. Skipulega séð er þetta sama nálgun og sjálfgefið okkar .form-check.

Við notum systkinavalið ( ~) fyrir öll <input>fylki okkar - eins og :checked- til að stilla sérsniðna eyðublaðið okkar rétt. Þegar það er sameinað .custom-control-labelbekknum getum við líka stílað textann fyrir hvert atriði út frá <input>ástandinu 's.

Við felum sjálfgefið <input>með opacityog notum til .custom-control-labelað búa til nýjan sérsniðna eyðublaðsvísi í staðinn með ::beforeog ::after. Því miður getum við ekki smíðað sérsniðna af <input>því að CSS contentvirkar ekki á þeim þætti.

Í merktum ríkjum notum við base64 innbyggð SVG tákn frá Open Iconic . Þetta veitir okkur bestu stjórnina fyrir stíl og staðsetningu milli vafra og tækja.

Gátreitir

Hakaðu við þennan sérsniðna gátreit

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

Sérsniðnir gátreitir geta einnig notað :indeterminategerviflokkinn þegar hann er stilltur handvirkt í gegnum JavaScript (engin HTML eiginleiki er tiltækur til að tilgreina hann).

Hakaðu við þennan sérsniðna gátreit

Ef þú ert að nota jQuery ætti eitthvað eins og þetta að duga:

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

Útvarpstæki

Kveiktu á þessu sérsniðna útvarpi

Eða kveiktu á þessu öðru sérsniðna útvarpi

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

Í línu

Kveiktu á þessu sérsniðna útvarpi

Eða kveiktu á þessu öðru sérsniðna útvarpi

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

Öryrkjar

Einnig er hægt að slökkva á sérsniðnum gátreitum og útvörpum. Bættu disabledboolean eigindinni við <input>og sérsniðinn vísir og merkimiðalýsing verður sjálfkrafa stíluð.

Hakaðu við þennan sérsniðna gátreit

Kveiktu á þessu sérsniðna útvarpi

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

Sérsniðnar <select>valmyndir þurfa aðeins sérsniðinn flokk .custom-selecttil að kveikja á sérsniðnum stílum. Sérsniðnar stílar takmarkast við <select>upphaflegt útlit og geta ekki breytt <option>s vegna takmarkana vafra.

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

Þú getur líka valið úr litlum og stórum sérsniðnum valkostum til að passa við textainnslátt okkar í svipaðri stærð.

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

Eigindin multipleer einnig studd:

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

Eins er sizeeiginleiki:

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

Svið

Búðu til sérsniðnar <input type="range">stýringar með .custom-range. Lagið (bakgrunnurinn) og þumalfingur (gildið) eru báðir stílaðir til að birtast eins í vöfrum. Þar sem aðeins IE og Firefox styðja að „fylla“ lag sitt frá vinstri eða hægri á þumalfingri sem leið til að sýna framfarir sjónrænt styðjum við það ekki eins og er.

Dæmisvið

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

Sviðsinntak hafa óbein gildi fyrir minog max— 0og 100, í sömu röð. Þú getur tilgreint ný gildi fyrir þá sem nota minog maxeiginleikana.

Dæmisvið

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

Sjálfgefið er að sviðsinntak "smella" við heiltölugildi. Til að breyta þessu geturðu tilgreint stepgildi. Í dæminu hér að neðan tvöföldum við fjölda skrefa með því að nota step="0.5".

Dæmisvið

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

Skráavafri

Skráarinnslátturinn er snjallastur af hópnum og krefst viðbótar JavaScript ef þú vilt tengja þau við virka Veldu skrá ... og valinn texta skráarheita.

Veldu skrá

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

Við felum sjálfgefna skrána <input>í gegnum opacityog stílum í staðinn <label>. Hnappurinn er búinn til og staðsettur með ::after. Að lokum lýsum við yfir a widthog heightá <input>fyrir rétt bil fyrir nærliggjandi efni.

Þýða eða sérsníða strengina

Gerviflokkurinn :lang()er notaður til að leyfa þýðingu á „Browse“ textanum á önnur tungumál. Hneka eða bæta við færslum við $custom-file-textSass breytuna með viðeigandi tungumálamerki og staðfærðum strengjum. Ensku strengina er hægt að aðlaga á sama hátt. Til dæmis, hér er hvernig hægt er að bæta við spænskri þýðingu (tungumálakóði spænsku er es):

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

Hér er lang(es)í aðgerð á sérsniðnu skráarinntaki fyrir spænska þýðingu:

Valið skjalasafn

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

Þú þarft að stilla tungumál skjalsins þíns (eða undirtré þess) rétt til að réttur texti birtist. Þetta er hægt að gera með því að nota langeigindina á <html>frumefninu eða Content-LanguageHTTP hausnum , meðal annarra aðferða.

Eyðublöð

Yfirlit

Formstýringar

Stærð

Lesið aðeins

Skrifvarinn venjulegur texti

Range-inntak

Gátreitir og útvarp

Sjálfgefið (staflað)

Í línu

Án merkimiða

Skipulag

Myndaðu hópa

Myndaðu rist

Myndaröð

Lárétt form

Lárétt stærð merkimiða

Stærð súlu

Sjálfvirk stærð

Innbyggð eyðublöð

Val við falin merki

Hjálpartexti

Að tengja hjálpartexta við formstýringar

Óvirk eyðublöð

Fyrirvari með akkerum

Samhæfni í gegnum vafra

Staðfesting

Hvernig það virkar

Sérsniðin stíll

Sjálfgefnar stillingar vafra

Server hlið

Stuðningsþættir

Verkfæraráð

Sérsniðin eyðublöð

Gátreitir og útvarp

Gátreitir

Útvarpstæki

Í línu

Öryrkjar

Veldu valmynd

Svið

Skráavafri

Þýða eða sérsníða strengina