Mafomu

Zitsanzo ndi malangizo ogwiritsira ntchito masitayelo owongolera mafomu, zosankha zamasanjidwe, ndi zida zomwe zimapangidwira kupanga mitundu yosiyanasiyana.

Mwachidule

Kuwongolera mawonekedwe a Bootstrap kumakulitsa masitayilo athu a Rebooted mawonekedwe ndi makalasi. Gwiritsani ntchito makalasiwa kuti mulowe m'mawonekedwe awo makonda kuti aziwonetsa mosasinthasintha pamasakatuli ndi zida.

Onetsetsani kuti mukugwiritsa ntchito malingaliro oyenera typepazolowetsa zonse (monga emailma adilesi a imelo kapena numbermanambala) kuti mutengere mwayi pazowongolera zatsopano monga kutsimikizira imelo, kusankha manambala, ndi zina zambiri.

Nachi chitsanzo chachangu chowonetsera masitayilo a Bootstrap. Pitilizani kuwerenga zolemba pamakalasi ofunikira, masanjidwe a fomu, ndi zina zambiri.

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

Kuwongolera mawonekedwe

Maulamuliro a malembedwe - monga <input>s, <select>s, ndi <textarea>s - amapangidwa ndi .form-controlkalasi. Kuphatikizidwa ndi masitayelo amawonekedwe wamba, mawonekedwe, kukula, ndi zina zambiri.

Onetsetsani kuti mwafufuza mafomu athu kuti mupititse patsogolo masitayilo <select>a 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>

Kuti mulowetse mafayilo, sinthanani .form-controlndi .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>

Kukula

Khazikitsani utali pogwiritsa ntchito makalasi monga .form-control-lgndi .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>

Kuwerenga kokha

Onjezani mawonekedwe a readonlyboolean pazolowetsa kuti mupewe kusintha kwa mtengo wake. Zolowetsa zowerengera zokha zimawoneka zopepuka (monga zolowetsa zozimitsidwa), koma sungani cholozera chokhazikika.

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

Werengani mawu osavuta

Ngati mukufuna kukhala ndi <input readonly>zinthu m'mawonekedwe anu olembedwa ngati mawu osavuta, gwiritsani ntchito .form-control-plaintextkalasi kuti muchotse masitayelo amtundu wokhazikika ndikusunga malire olondola ndi padding.

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

Zolowetsa zosiyanasiyana

Khazikitsani zolowera zoyenda mozungulira pogwiritsa ntchito .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>

Mabokosi ndi mawailesi

Mabokosi osasinthika ndi mawayilesi amasinthidwa mothandizidwa ndi .form-check, kalasi imodzi yamitundu yonse yolowetsa yomwe imawongolera masanjidwe ndi machitidwe azinthu zawo za HTML . Mabokosi amasankha chimodzi kapena zingapo pamndandanda, pomwe mawayilesi ndi osankha njira imodzi kuchokera ambiri.

Mabokosi oyendera ndi mawayilesi olemala amathandizidwa, koma kuti mupereke not-allowedcholozera pa hover ya kholo <label>, mufunika kuwonjezera disabledtanthauzo ku .form-check-input. Zomwe zidayimitsidwa zipanga utoto wopepuka kuti zithandizire kuwonetsa zomwe zalowetsedwa.

Mabokosi ndi mawailesi omwe amagwiritsidwa ntchito amapangidwa kuti athandizire kutsimikizika kwa mawonekedwe a HTML ndikupereka zilembo zazifupi, zopezeka. Chifukwa chake, <input>s ndi <label>s ndi abale athu motsutsana ndi <input>mkati mwa <label>. Izi ndizowonjezera pang'ono monga momwe muyenera kufotokozera idndi forzikhumbo kuti mugwirizane <input>ndi <label>.

Zofikira (zosanjikiza)

Mwachisawawa, chiwerengero chilichonse cha mabokosi ndi mawailesi omwe ndi abale apamtima azisakanizidwa molunjika ndikusiyanitsidwa moyenerera ndi .form-check.

Bokosi lofikira

Cholembera choyimitsidwa

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

Wailesi yofikira

Wailesi yokhazikika yachiwiri

Wailesi yoyimitsa

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

Motsatana

Gulu mabokosi kapena mawayilesi pamzere wopingasa womwewo powonjezera .form-check-inline..form-check

3 (wolumala)

<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 (wolumala)

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

Popanda zilembo

Onjezani .position-staticpazolowetsa .form-checkzomwe zilibe mawu aliwonse. Kumbukirani kuperekabe mtundu wina wa zilembo zamatekinoloje othandizira (mwachitsanzo, kugwiritsa ntchito 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>

Kamangidwe

Popeza Bootstrap imagwira ntchito display: blockndipo width: 100%pafupifupi pafupifupi mawonekedwe athu onse amawongolera, mafomu amangounjika mokhazikika. Makalasi owonjezera angagwiritsidwe ntchito kusinthira masinthidwe awa pamtundu uliwonse.

Pangani magulu

Kalasi .form-groupndiyo njira yosavuta yowonjezeramo mawonekedwe. Zimapereka kalasi yosinthika yomwe imalimbikitsa kusanjika koyenera kwa malembo, zowongolera, mawu ofunikira, ndi mauthenga otsimikizira mawonekedwe. Mwachikhazikitso imagwira ntchito margin-bottom, koma imatenga masitayelo owonjezera .form-inlinemomwe ikufunikira. Gwiritsani ntchito ndi <fieldset>s, <div>s, kapena pafupifupi chinthu china chilichonse.

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

Fomu ya grid

Mafomu ovuta kwambiri amatha kupangidwa pogwiritsa ntchito makalasi athu a gridi. Gwiritsani ntchito izi pamapangidwe amafomu omwe amafunikira mizati ingapo, m'lifupi mwake mosiyanasiyana, ndi njira zina zoyankhulirana zina.

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

Mzere wa fomu

Mutha kusinthiranso , kusinthika .rowkwa .form-rowmzere wathu wa gridi womwe umapitilira machulukidwe osasinthika kuti akhale olimba komanso ophatikizika.

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

Mapangidwe ovuta kwambiri amathanso kupangidwa ndi grid system.

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

Chopingasa mawonekedwe

Pangani mafomu opingasa ndi gululi powonjezera .rowkalasi kuti mupange magulu ndikugwiritsa ntchito .col-*-*makalasiwo kuti mutchule m'lifupi mwamalebulo ndi zowongolera zanu. Onetsetsani kuti muwonjezenso .col-form-labelku ma <label>s anu kuti akhazikike molunjika ndikuwongolera mawonekedwe awo.

Nthawi zina, mungafunike kugwiritsa ntchito maginito kapena ma padding zida kuti mupange mawonekedwe abwino omwe mukufuna. Mwachitsanzo, padding-toptachotsa lebulo yapawailesi yosanjidwa kuti tigwirizane bwino ndi zoyambira.

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

Kukula kwa zilembo zopingasa

Onetsetsani kuti mukugwiritsa ntchito .col-form-label-smkapena s kapena s kuti mutsatire molondola kukula kwa ndi ..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>

Kukula kwa mizati

Monga tawonera m'zitsanzo zam'mbuyomu, makina athu a gridi amakulolani kuyika nambala iliyonse ya .cols mkati mwa a .rowkapena .form-row. Adzagawaniza kukula komwe kulipo mofanana pakati pawo. Mukhozanso kusankha kagawo kakang'ono kamipingo yanu kuti mutenge malo ochulukirapo kapena ochepa, pamene otsalawo .colamagawanitsa ena onse, ndi makalasi apadera monga .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>

Auto-saizi

Chitsanzo chomwe chili pansipa chimagwiritsa ntchito chida cha flexbox kuti chikhazikike pakati pazomwe zili mkati ndikusintha kotero .colkuti .col-automizati yanu imangotenga malo ochulukirapo momwe mungafunire. Mwa njira ina, ndime imadzikulitsa yokha kutengera zomwe zili mkati.

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

Kenako mutha kusakanizanso izi ndi makalasi otengera kukula kwake.

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

Ndipo ndithudi kuwongolera mawonekedwe kumathandizidwa.

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

Mafomu apaintaneti

Gwiritsani ntchito .form-inlinekalasi kuti muwonetse zolemba zingapo, zowongolera mafomu, ndi mabatani pamzere umodzi wopingasa. Kuwongolera mafomu mkati mwa mafomu apaintaneti kumasiyana pang'ono ndi momwe amakhalira.

Zowongolera ndi display: flex, kugwetsa malo oyera a HTML ndikukulolani kuti muzitha kuyang'anira masitayilo ndi zida zosinthira .
Maulamuliro ndi magulu olowetsa amalandila width: autokuti apitirire kusakhazikika kwa Bootstrap width: 100%.
Zowongolera zimangowoneka pamzere pamawonekedwe omwe ali osachepera 576px m'lifupi kuti awerengere malo ocheperako pazida zam'manja.

Mungafunike kuthana ndi m'lifupi ndi kuyanitsidwa kwa mawonekedwe amtundu uliwonse ndi zida zolekanitsa (monga momwe ziliri pansipa). Pomaliza, onetsetsani kuti nthawi zonse mumaphatikiza <label>mawonekedwe amtundu uliwonse, ngakhale mungafunike kubisa kwa alendo osawerenga skrini omwe ali ndi .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>

Kuwongolera mafomu ndi zosankha kumathandizidwanso.

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

Njira zina zolembera zobisika

Tekinoloje zothandizira monga zowerengera skrini zitha kukhala ndi vuto ndi mafomu anu ngati simuphatikiza zilembo zilizonse. Pama fomu apaintaneti, mutha kubisa zilembo pogwiritsa ntchito .sr-onlykalasi. Palinso njira zina zoperekera chizindikiro chaukadaulo wothandizira, monga aria-label, aria-labelledbykapena mawonekedwe title. Ngati palibe chimodzi mwa izi, matekinoloje othandizira amatha kugwiritsa ntchito mawonekedwewo placeholder, ngati alipo, koma dziwani kuti kugwiritsa placeholderntchito m'malo mwa njira zina zolembera sikulangizidwa.

Thandizani mawu

Zolemba zothandizira mu block-level mu mafomu zitha kupangidwa pogwiritsa ntchito .form-text(omwe kale ankadziwika kuti .help-blockmu v3). Zolemba zothandizira pa intaneti zitha kukhazikitsidwa mosavuta pogwiritsa ntchito chinthu chilichonse chamkati cha HTML ndi makalasi othandizira ngati .text-muted.

Kuphatikiza mawu othandizira ndi zowongolera mawonekedwe

Mawu othandizira akuyenera kulumikizidwa momveka bwino ndi mawonekedwe omwe akukhudzana ndi kugwiritsa ntchito mawonekedwe aria-describedby. Izi ziwonetsetsa kuti matekinoloje othandizira-monga owerenga skrini-alengeza mawu othandizira pamene wogwiritsa ntchitoyo ayang'ana kapena ayamba kuyang'anira.

Mawu othandizira omwe ali pansipa akhoza kulembedwa ndi .form-text. Kalasi iyi imaphatikizanso display: blockndikuwonjezera malire apamwamba kuti muzikhala momasuka kuchokera pazolowetsa pamwambapa.

Mawu achinsinsi Mawu anu achinsinsi akuyenera kukhala aatali a zilembo 8-20, azikhala ndi zilembo ndi manambala, ndipo asakhale ndi mipata, zilembo zapadera, kapena 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>

Zolemba zapaintaneti zitha kugwiritsa ntchito chinthu chilichonse chamkati cha HTML (chikhale <small>, <span>, kapena china) popanda china chilichonse koma gulu lothandizira.

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

Mafomu olumala

Onjezani adisabled boolean pazolowetsa kuti mupewe kulumikizana ndi ogwiritsa ntchito ndikupangitsa kuti ziwonekere zopepuka.

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

Onjezani zomwe zili disabledku a <fieldset>kuti muletse zowongolera zonse mkati.

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

Caveat ndi anangula

Mwachikhazikitso, asakatuli azitha kuyang'anira mawonekedwe onse ( <input>, <select>ndi <button>zinthu) mkati <fieldset disabled>mwazolephereka, kulepheretsa kuyanjana kwa kiyibodi ndi mbewa pa iwo. Komabe, ngati mawonekedwe anu alinso ndi <a ... class="btn btn-*">zinthu, izi zidzangopatsidwa kalembedwe ka pointer-events: none. Monga tafotokozera m'chigawo chokhudza mabatani olemala (ndipo makamaka mugawo lazinthu za nangula), katundu wa CSS sanakhazikitsidwebe ndipo sakuthandizidwa mokwanira mu Internet Explorer 10, ndipo sangalepheretse ogwiritsa ntchito kiyibodi kukhala. amatha kuyang'ana kapena kuyambitsa maulalo awa. Chifukwa chake kuti mukhale otetezeka, gwiritsani ntchito JavaScript kuti mulepheretse maulalo oterowo.

Kugwirizana kwa msakatuli

Ngakhale Bootstrap idzagwiritsa ntchito masitayelo awa mu asakatuli onse, Internet Explorer 11 ndi pansipa sizigwirizana ndi disabledmawonekedwe a <fieldset>. Gwiritsani ntchito JavaScript yokhazikika kuti muyimitse gawo la asakatuli awa.

Kutsimikizira

Perekani mayankho ofunika, otheka kwa ogwiritsa ntchito anu potsimikizira mafomu a HTML5- omwe amapezeka m'masakatuli athu onse othandizidwa . Sankhani kuchokera pa msakatuli wotsimikizira zotsimikizira, kapena gwiritsani ntchito mauthenga okhazikika ndi makalasi athu omangidwira ndikuyambitsa JavaScript.

Tikukulimbikitsani kugwiritsa ntchito masitayelo otsimikizira, popeza mauthenga otsimikizira osasintha a msakatuli samawonetsedwa nthawi zonse ndi matekinoloje othandizira m'masakatuli onse (makamaka, Chrome pakompyuta ndi m'manja).

Momwe zimagwirira ntchito

Umu ndi momwe kutsimikizira mawonekedwe kumagwirira ntchito ndi Bootstrap:

Kutsimikizika kwa mawonekedwe a HTML kumagwiritsidwa ntchito kudzera m'makalasi awiri achinyengo a CSS, :invalidndi :valid. Zimakhudza <input>, <select>, ndi <textarea>zinthu.
Bootstrap imayang'ana :invalidndi :validmasitayelo ku .was-validatedkalasi ya makolo, nthawi zambiri amagwiritsidwa ntchito ku <form>. Kupanda kutero, gawo lililonse lofunikira lopanda mtengo likuwoneka ngati losavomerezeka pamasamba. Mwanjira iyi, mutha kusankha nthawi yoti muyambitse (nthawi zambiri mukayesa kutumiza fomu).
Kuti mukonzenso mawonekedwe a fomuyo (mwachitsanzo, popereka mawonekedwe osinthika pogwiritsa ntchito AJAX), chotsani .was-validatedkalasiyo <form>pambuyo popereka.
Monga kubweza, .is-invalidndipo .is-validmakalasi atha kugwiritsidwa ntchito m'malo mwa pseudo-class pakutsimikizira mbali ya seva . Iwo safuna a.was-validated kalasi ya makolo.
Chifukwa cha zopinga momwe CSS imagwirira ntchito, sitingathe (pakali pano) kugwiritsa ntchito masitayelo ku <label>omwe amabwera patsogolo pa mawonekedwe mu DOM popanda kuthandizidwa ndi JavaScript.
Asakatuli onse amakono amathandizira API yotsimikizira zoletsa , njira zingapo za JavaScript zotsimikizira kuwongolera mawonekedwe.
Mauthenga oyankha atha kugwiritsa ntchito zosasintha za msakatuli (zosiyana pa msakatuli uliwonse, komanso zosalembedwera kudzera pa CSS) kapena masitayelo athu oyankha omwe ali ndi HTML ndi CSS yowonjezera.
Mutha kupereka mauthenga ovomerezeka ndi setCustomValidityJavaScript.

Poganizira izi, lingalirani za ma demo otsatirawa a masitayelo athu otsimikizira mawonekedwe, makalasi am'mbali mwa seva, ndi kusasintha kwa msakatuli.

Masitayelo mwamakonda

Kwa mauthenga otsimikizira mawonekedwe a Bootstrap, muyenera kuwonjezera mawonekedwe a novalidateboolean ku fayilo yanu ya <form>. Izi zimayimitsa zida zosinthira msakatuli, komabe zimapereka mwayi wopeza ma API otsimikizira mu JavaScript. Yesani kutumiza fomu ili pansipa; JavaScript yathu idumpha batani lotumiza ndikutumiza ndemanga kwa inu.

Mukayesa kutumiza, muwona mawonekedwe :invalidndi :validmasitayelo akugwiritsidwa ntchito pazowongolera mafomu anu.

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

Zosasintha za msakatuli

Simukufuna kumva mauthenga otsimikizira kapena kulemba JavaScript kuti musinthe machitidwe? Zabwino zonse, mutha kugwiritsa ntchito osasintha osatsegula. Yesani kutumiza fomu ili pansipa. Kutengera msakatuli wanu ndi OS, muwona mayankho osiyanasiyana.

Ngakhale masitayelo oyankhawa sangalembedwe ndi CSS, mutha kusinthanso zolemba zanu kudzera mu 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>

Mbali ya seva

Tikukulimbikitsani kugwiritsa ntchito kutsimikizira mbali ya kasitomala, koma ngati mukufuna mbali ya seva, mutha kuwonetsa magawo osayenera ndi ovomerezeka .is-invalidndi .is-valid. Dziwani kuti .invalid-feedbackamathandizidwanso ndi makalasi awa.

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

Zinthu zothandizira

Mafomu athu a zitsanzo amawonetsa zolemba <input>zachikale pamwambapa, koma masitayelo otsimikizira akupezekanso pakuwongolera mafomu athu.

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

Malangizo

Ngati masanjidwe anu amaloleza, mutha kusintha .{valid|invalid}-feedbackmakalasiwo .{valid|invalid}-tooltipkuti awonetse mayankho otsimikizira mu chida cholembedwa. Onetsetsani kuti muli ndi kholo lomwe lili ndi position: relativechida chothandizira. Muchitsanzo chomwe chili pansipa, makalasi athu ali ndi izi kale, koma polojekiti yanu ingafunike kukhazikitsidwa kwina.

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

Mafomu achizolowezi

Kuti musinthe makonda anu komanso kusasinthika kwa msakatuli, gwiritsani ntchito mawonekedwe athu amitundu yonse kuti mulowe m'malo mwa osatsegula. Amamangidwa pamwamba pa semantic komanso kupezeka mosavuta, kotero ndikusintha kokhazikika kwa mawonekedwe aliwonse osasinthika.

Mabokosi ndi mawailesi

Bokosi lililonse ndi wailesi zimakutidwa <div>ndi mchimwene <span>wathu kuti tipange zowongolera zathu komanso zolemba <label>zomwe zili patsambali. Mwamakhalidwe, iyi ndi njira yofanana ndi yosasinthika yathu .form-check.

Timagwiritsa ntchito chosankha cha abale athu ( ~) m'maboma athu <input>onse-monga- :checkedkuti tisinthe bwino chizindikiro chathu. Tikaphatikiza ndi .custom-control-labelkalasi, tithanso kupanga masitayilo a chinthu chilichonse motengera momwe <input>'s state.

Timabisa zosasinthika <input>ndikugwiritsa opacityntchito .custom-control-labelkupanga chizindikiro chatsopano m'malo mwake ::beforendi ::after. Tsoka ilo sitingathe kupanga chizolowezi kuchokera <input>chifukwa ma CSS contentsagwira ntchito pa chinthucho.

M'magawo osankhidwa , timagwiritsa ntchito zithunzi za SVG zophatikizidwa ndi base64 kuchokera ku Open Iconic . Izi zimatipatsa mwayi wowongolera masitayelo ndi mawonekedwe pa asakatuli ndi zida zonse.

Mabokosi

Chongani kabokosi kameneka

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

Mabokosi a makonda amathanso kugwiritsa ntchito :indeterminatekalasi yabodza ikakhazikitsidwa pamanja kudzera pa JavaScript (palibe mawonekedwe a HTML ofotokozera).

Chongani kabokosi kameneka

Ngati mukugwiritsa ntchito jQuery, chinthu chonga ichi chiyenera kukhala chokwanira:

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

Wailesi

Sinthani wailesi yokonda izi

Kapena sinthani wailesi ina iyi

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

Motsatana

Sinthani wailesi yokonda izi

Kapena sinthani wailesi ina iyi

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

Wolumala

Mabokosi osankhidwa ndi mawayilesi amathanso kuzimitsidwa. Onjezani mawonekedwe a disabledboolean ku <input>ndipo chizindikiro cha makonda ndi mafotokozedwe a zilembo zidzasinthidwa zokha.

Chongani kabokosi kameneka

Sinthani wailesi yokonda izi

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

Mindandanda <select>yazakudya imafunikira kalasi yokhayokha, .custom-selectkuti muyambitse masitayelo achikhalidwe. Masitayelo anthawi zonse amangokhala ndi <select>mawonekedwe oyambira ndipo sangathe kusintha ma <option>s chifukwa chakulephera kwa msakatuli.

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

Mutha kusankhanso pazosankha zazing'ono kapena zazikulu kuti zigwirizane ndi zolemba zathu zofananira.

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

Khalidweli multiplelimathandizidwanso:

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

Monga momwe zilili size:

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

Mtundu

Pangani zowongolera <input type="range">makonda ndi .custom-range. Nyimboyi (kumbuyo) ndi chala chachikulu (mtengo) zonse zidalembedwa kuti ziwonekere mofanana pakusakatula. Monga IE ndi Firefox okha amathandizira "kudzaza" njanji yawo kuchokera kumanzere kapena kumanja kwa chala chachikulu monga njira yowonetsera kupita patsogolo, sitikuchirikiza pano.

Zitsanzo zosiyanasiyana

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

Zolowetsa zosiyanasiyana zimakhala ndi zikhalidwe za minndi max- 0ndi 100, motsatana. Mutha kufotokoza zatsopano za omwe akugwiritsa ntchito minndi mawonekedwe max.

Zitsanzo zosiyanasiyana

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

Mwachikhazikitso, zolowetsa zamitundu "zimasintha" kumagulu onse. Kuti musinthe izi, mutha kufotokoza stepmtengo. Muchitsanzo chomwe chili pansipa, tikuwirikiza kuchuluka kwa masitepe pogwiritsa ntchito step="0.5".

Zitsanzo zosiyanasiyana

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

Msakatuli wapamwamba

Kuyika kwamafayilo ndikovuta kwambiri pagululi ndipo kumafunikira JavaScript yowonjezera ngati mungafune kuwalumikiza ndi magwiridwe antchito Sankhani fayilo …

Sankhani wapamwamba

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

Timabisa fayilo yokhazikika <input>kudzera opacitym'malo mwake ndikusintha mawonekedwe a <label>. Batani limapangidwa ndikuyikidwa ndi ::after. Pomaliza, tikulengeza a widthndi heightpa malo <input>oyenera a zinthu zozungulira.

Kumasulira kapena kusintha zingwe

Gulu :lang()lachinyengo limagwiritsidwa ntchito kulola kumasulira mawu a "Sakatulani" m'zilankhulo zina. Sonyezani kapena onjezani zosintha za $custom-file-textSass ndi tagi yogwirizana ndi zilankhulo ndi zingwe zam'deralo. Zingwe za Chingerezi zitha kusinthidwa mwanjira yomweyo. Mwachitsanzo, umu ndi momwe munthu angawonjezere zomasulira za Chisipanishi (kodi ya chilankhulo cha Chisipanishi ndi es):

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

Nazi zomwe lang(es)zikuchitika pamafayilo osinthidwa mwamakonda pa zomasulira za Chisipanishi:

Seleccionar Archivo

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

Muyenera kukhazikitsa chilankhulo cha chikalata chanu (kapena subtree yake) molondola kuti mawu olondola awonetsedwe. Izi zitha kuchitika pogwiritsa ntchito zomwe zili langpatsamba kapena <html>mutu wa Content-LanguageHTTP , mwa njira zina.

Mafomu

Mwachidule

Kuwongolera mawonekedwe

Kukula

Kuwerenga kokha

Werengani mawu osavuta

Zolowetsa zosiyanasiyana

Mabokosi ndi mawailesi

Zofikira (zosanjikiza)

Motsatana

Popanda zilembo

Kamangidwe

Pangani magulu

Fomu ya grid

Mzere wa fomu

Chopingasa mawonekedwe

Kukula kwa zilembo zopingasa

Kukula kwa mizati

Auto-saizi

Mafomu apaintaneti

Njira zina zolembera zobisika

Thandizani mawu

Kuphatikiza mawu othandizira ndi zowongolera mawonekedwe

Mafomu olumala

Caveat ndi anangula

Kugwirizana kwa msakatuli

Kutsimikizira

Momwe zimagwirira ntchito

Masitayelo mwamakonda

Zosasintha za msakatuli

Mbali ya seva

Zinthu zothandizira

Malangizo

Mafomu achizolowezi

Mabokosi ndi mawailesi

Mabokosi

Wailesi

Motsatana

Wolumala

Sankhani menyu

Mtundu

Msakatuli wapamwamba

Kumasulira kapena kusintha zingwe