Source

Nkyerɛwee ahorow

Nhwɛsoɔ ne dwumadie akwankyerɛ a ɛfa fom control styles, layout options, ne custom components a wɔde yɛ form ahodoɔ pii.

Nsɛm a Wɔaka abom

Bootstrap no fom controls no trɛw yɛn Rebooted form styles no mu ne adesua ahorow. Fa saa adesua ahorow yi di dwuma fa paw wɔn nkyerɛkyerɛmu a wɔahyɛ da ayɛ no mu ma nkyerɛase a ɛkɔ so daa wɔ browser ne mfiri ahorow nyinaa so.

Hwɛ sɛ wode typesu a ɛfata bedi dwuma wɔ nsɛm a wɔde ahyɛ mu nyinaa so (sɛ nhwɛso no, emailama imel address anaa numberakontaabu ho nsɛm) de anya nsɛm a wɔde hyɛ mu no sohwɛ foforo te sɛ imel nokwaredi, nɔma a wɔpaw, ne nea ɛkeka ho no so mfaso.

Nhwɛsoɔ a ɛyɛ ntɛm a ɛbɛkyerɛ Bootstrap no form styles nie. Kɔ so kenkan ma nsɛm a ɛfa adesua ahorow a wɔhwehwɛ, kratasin nhyehyɛe, ne nea ɛkeka ho ho.

Yɛrenkyɛ wo email no mma obi foforo da. 
<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="form-group form-check">
    <input type="checkbox" class="form-check-input" id="exampleCheck1">
    <label class="form-check-label" for="exampleCheck1">Check me out</label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Fom a wɔde di dwuma

Wɔde adesuakuw no na ɛyɛ nkyerɛwee kwan so tumi ahorow—te sɛ <input>s, <select>s, ne <textarea>s—no sɛnea wɔyɛ .form-controlno. Nea ɛka ho ne ntadehyɛ ahorow a wɔde hwɛ sɛnea ɛte wɔ ɔkwan a ɛkɔ akyiri so, tebea a wɔde wɔn adwene si so, ne kɛseyɛ, ne nea ɛkeka ho.

Hwɛ hu sɛ wobɛhwehwɛ yɛn amanne nkrataa no mu na ama woakɔ so ayɛ style <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>

Sɛ wopɛ fael nsɛm a wɔde hyɛ mu a, sesa .form-controlma .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>

Sizing a wɔde yɛ nneɛma

Fa adesua ahorow te sɛ .form-control-lgne .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>

Akenkan nkutoo

Fa readonlyboolean su no ka ho wɔ input bi so na asiw nsakrae a wɔbɛyɛ wɔ input no bo no mu. Nsɛm a wɔde kenkan nkutoo no da adi sɛ ɛyɛ hare (te sɛ nsɛm a wɔde hyɛ mu a wɔagyae mu no ara pɛ), nanso kura cursor a ɛwɔ hɔ no mu.

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

Nkyerɛwee a ɛnyɛ den nkutoo a wɔkenkan

Sɛ wopɛ sɛ wonya <input readonly>elements wɔ wo fom mu styled sɛ plain text a, fa .form-control-plaintextclass no yi default form field styling no na kora margin ne padding a ɛfata no so.

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

Range Nsɛm a Wɔde Hyehyɛ Mu

Set horizontally scrollable range inputs denam .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>

Nnaka a wɔde hyɛ mu ne radio ahorow

.form-checkWɔde , adesuakuw biako ma nsɛm a wɔde hyɛ mu ahorow abien no nyinaa a ɛma wɔn HTML nneɛma no nhyehyɛe ne wɔn nneyɛe tu mpɔn na ɛma default checkboxes ne radio ahorow no tu mpɔn . Nnaka a wɔde hyɛ mu no yɛ nea wɔde paw nneɛma biako anaa pii wɔ list bi mu, bere a radio ahorow no yɛ nea wɔde paw ɔkwan biako fi pii mu.

Wɔboa checkbox ne radio ahorow a wɔadi dɛm. Attribute no disabledde kɔla a ɛyɛ hann bedi dwuma de aboa akyerɛ input no tebea.

Checkboxes ne radio buttons boa HTML-based form validation na ɛma labels a ɛyɛ tiawa a wotumi nya. Sɛnea ɛte no, yɛn <input>s ne <label>s yɛ anuanom nneɛma a ɛne an <input>within a <label>. Eyi yɛ verbose kakra sɛnea ɛsɛ sɛ wokyerɛ idne forattributes de bata <input>ne <label>.

Default (a wɔaboaboa ano) .

Sɛnea wɔahyɛ no, wɔde checkbox ne radio dodow biara a ɛyɛ anuanom a wɔbɛn no ntɛm ara no bɛhyehyɛ no tẽẽ na wɔde .form-check.

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

Inline no mu

Kuw checkboxes anaa radio ahorow wɔ row koro no ara a ɛkɔ soro no so denam biribiara a wode bɛka ho .form-check-inlineno so .form-check.

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

Sɛ wɔmfa nkyerɛwde biara nka ho

Fa ka .position-staticinputs a ɛwɔ mu .form-checka enni label text biara ho. Kae sɛ wobɛda so ara de nkyerɛwde bi ama mfiridwuma a ɛboa (sɛ nhwɛso no, sɛ wode bedi dwuma 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>

Twa kwan

Esiane sɛ Bootstrap di dwuma display: blockna width: 100%ɛkame ayɛ sɛ ɛyɛ yɛn fom controls nyinaa nti, forms bɛ default stack vertically. Wobetumi de adesua foforo adi dwuma de ayɛ nsakrae wɔ nhyehyɛe yi mu wɔ krataa biara so.

Yɛ akuw ahorow

Adesuakuw .form-groupno ne ɔkwan a ɛyɛ mmerɛw a wɔfa so de nhyehyɛe bi ka nkrataa ahorow ho. Ɛma adesuakuw a ɛyɛ mmerɛw a ɛhyɛ labels, controls, mmoa nsɛm a wobetumi apaw, ne nkrasɛm a wɔde di nkrasɛm a wɔde ma no akuwakuw yiye ho nkuran. By default it only applies margin-bottom, nanso ɛfa styles afoforo wɔ mu .form-inlinesɛnea ɛho hia. Fa di dwuma wɔ <fieldset>s, <div>s, anaa ɛkame ayɛ sɛ ade foforo biara ho.

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

Fom grid no

Wobetumi de yɛn grid adesua ahorow no akyekye nkrataa a ɛyɛ den kɛse. Fa eyinom di dwuma ma fom nhyehyɛe a ɛhwehwɛ sɛ wɔde nkyerɛwde ahorow pii, ntrɛwmu ahorow, ne nhyehyɛe afoforo a wobɛpaw.

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

Nkyerɛwee row

Wubetumi nso sesa .rowama .form-row, yɛn gyinapɛn grid row no mu nsakrae a ɛbɔ default column gutters no so ma nhyehyɛe a ɛyɛ den na ɛyɛ ketewaa.

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

Wobetumi nso de grid nhyehyɛe no ayɛ nhyehyɛe ahorow a ɛyɛ den kɛse.

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

Ɔkwan a wɔfa so yɛ ade a ɛkɔ soro

Fa grid no yɛ horizontal forms denam .rowclass no a wode bɛka form groups ho na wode .col-*-*classes no adi dwuma de akyerɛ wo labels ne controls no trɛw. Hwɛ hu sɛ wode bɛka .col-form-labelwo <label>s nso ho sɛnea ɛbɛyɛ a wɔbɛyɛ vertically centered ne wɔn a ɛbata ho form controls.

Ɛtɔ mmere bi a, ebia ɛho behia sɛ wode margin anaa padding utilities di dwuma de yɛ saa alignment a edi mũ a wuhia no. Sɛ nhwɛso no, yɛayi nea padding-topɛwɔ yɛn stacked radio inputs label no so na ama nsɛm no mfiase no ahyia yiye.

Radio ahorow
Hwɛ adaka no mu 
<form>
  <div class="form-group row">
    <label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3">
    </div>
  </div>
  <div class="form-group row">
    <label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3">
    </div>
  </div>
  <fieldset class="form-group">
    <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>
Horizontal kratasin label no kɛseyɛ

Hwɛ hu sɛ wode .col-form-label-smanaa .col-form-label-lgwo <label>s anaa s bedi dwuma de adi ne <legend>kɛse no akyi yiye ..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>

Kɔla a wɔde yɛ kɛse

Sɛnea wɔakyerɛ wɔ nhwɛso ahorow a atwam no mu no, yɛn grid nhyehyɛe no ma wo kwan ma wode .cols dodow biara gu a .rowanaa .form-row. Wɔbɛkyekyɛ ntrɛwmu a ɛwɔ hɔ no mu pɛpɛɛpɛ wɔ wɔn ntam. Wubetumi nso apaw wo nkyerɛwde ahorow no fã ketewaa bi de agye baabi kɛse anaa kakraa bi, bere a .cols a aka no kyekyɛ nkae no mu pɛpɛɛpɛ, a nkyerɛwde ahorow pɔtee bi te sɛ .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-sizing a wɔde yɛ nneɛma

Nhwɛsoɔ a ɛwɔ aseɛ ha yi de flexbox utility di dwuma de hyɛ emu nsɛm no mfimfini gyina hɔ na ɛsesa .colkɔ .col-autosɛdeɛ ɛbɛyɛ a wo columns no bɛgye baabi dodoɔ a ɛhia nko ara. Sɛ yɛbɛka no ɔkwan foforo so a, kɔla no kɛse gyina emu nsɛm so.

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

Afei wubetumi remix saa bio ne size-specific column classes.

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

Na nokwarem no , wɔboa custom form controls .

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

Nkrataa a ɛwɔ intanɛt so

Fa .form-inlineadesua no kyerɛ label ahorow, fom controls, ne button ahorow a ɛtoatoa so wɔ row biako a ɛkɔ soro so. Fom sohwɛ a ɛwɔ inline fom mu no gu ahorow kakra wɔ wɔn default tebea no ho.

  • Controls yɛ display: flex, a ɛbubu HTML white space biara na ɛma wo kwan ma wode alignment control a ɛwɔ spacing ne flexbox utilities ma.
  • Controls ne input akuw gye width: autode bu Bootstrap default no width: 100%so .
  • Controls no pue wɔ inline mu nkutoo wɔ viewports a anyɛ yiye koraa no ne tɛtrɛtɛ yɛ 576px de bu akontaa ma viewports teateaa wɔ mobile devices so.

Ebia ɛho behia sɛ wode nsa di ankorankoro kratasin sohwɛ ahorow no trɛw ne sɛnea ɛne ntamgyinafo utilities (sɛnea wɔakyerɛ wɔ ase ha no) hyia no ho dwuma. Nea etwa to no, hwɛ hu sɛ wode a <label>bɛka kratasin biara sohwɛ ho bere nyinaa, sɛ ɛho hia mpo sɛ wode sie ahɔho a wɔnyɛ screenreader a wɔde .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>

Wɔboa custom form controls ne selects nso.

<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>
Nneɛma foforo a wɔde besi nkyerɛwde a wɔde asie ananmu

Mfiridwuma a ɛboa te sɛ screen readers benya ɔhaw wɔ wo nkrataa no ho sɛ woamfa label anhyɛ biribiara a wode bɛhyɛ mu no mu a. Wɔ saa inline nkrataa yi ho no, wubetumi de .sr-onlyadesuakuw no asie nkyerɛwde ahorow no. Akwan foforo wɔ hɔ a wɔfa so de ahyɛnsode ma mfiridwuma a ɛboa, te sɛ aria-label, aria-labelledbyanaa titlesu no. Sɛ eyinom mu biara nni hɔ a, mfiridwuma a ɛboa no betumi de placeholdersu no adi dwuma, sɛ ɛwɔ hɔ a, nanso hyɛ no nsow sɛ wɔmfa nni dwuma placeholdersɛ akwan foforo a wɔfa so de nkyerɛwde gu so no ananmu.

Mmoa nsɛm

Wobetumi de .form-text(kan no na wonim no sɛ .help-blockwɔ v3 mu) ayɛ Block-level mmoa nsɛm a ɛwɔ nkrataa mu. Wobetumi de inline mmoa nkyerɛwee adi dwuma wɔ ɔkwan a ɛyɛ mmerɛw so denam inline HTML element biara ne mfaso adesua ahorow te sɛ .text-muted.

Mmoa nsɛm a wɔde bata kratasin sohwɛ ahorow ho

Ɛsɛ sɛ mmoa nsɛm no bata krataa sohwɛ a ɛfa aria-describedbysu no a wɔde bedi dwuma ho no ho pefee. Eyi bɛma wɔahwɛ ahu sɛ mfiridwuma a ɛboa—te sɛ screen readers—bɛbɔ mmoa nsɛm yi ho amanneɛ bere a nea ɔde di dwuma no de n’adwene si so anaasɛ ɔhyɛn control no mu no.

Mmoa nsɛm a ɛwɔ inputs ase no betumi ayɛ styled ne .form-text. Saa adesua yi de bi ka ho display: blockna ɛde top margin bi ka ho ma ɛyɛ mmerɛw sɛ wɔbɛma ntam kwan afi nsɛm a wɔde ahyɛ mu a ɛwɔ atifi hɔ no mu.

Ɛsɛ sɛ wo password no tenten yɛ nkyerɛwde 8-20, nkyerɛwde ne nɔma wom, na ɛnsɛ sɛ ɛwɔ ntam, nkyerɛwde soronko, anaa 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>

Inline text betumi de inline HTML element biara a ɛyɛ nea wɔtaa de di dwuma (sɛ ɛyɛ <small>, <span>, anaa biribi foforo) adi dwuma a biribiara nni mu sɛ utility class.

Ɛsɛ sɛ ne tenten yɛ nkyerɛwde 8-20. 
<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>

Nkrataa a wɔadi dɛm

Fa disabledboolean attribute no ka ho wɔ input bi so na asiw ɔdefo nkitahodi ano na ama ayɛ te sɛ nea ɛyɛ hare.

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

Fa disabledattribute no ka a ho na <fieldset>ama controls a ɛwɔ mu no nyinaa ayɛ adwuma.

<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-group">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
        <label class="form-check-label" for="disabledFieldsetCheck">
          Can't check this
        </label>
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>
Kɔkɔbɔ a wɔde ankora ahorow ahyɛ mu

Sɛnea wɔahyɛ no, browser ahorow no bɛfa native form controls ( <input>, <select>ne <button>elements) a ɛwɔ a mu <fieldset disabled>nyinaa sɛ wɔagyae, na asiw keyboard ne mouse nkitahodi nyinaa ano wɔ wɔn so. Nanso, sɛ wo kratasin no nso de <a ... class="btn btn-*">nneɛma bi ka ho a, wɔbɛma eyinom kwan a ɛyɛ pointer-events: none. Sɛnea wɔahyɛ no nsow wɔ ɔfa a ɛfa disabled state ho ma buttons (na titiriw wɔ ɔfa ketewa a ɛfa anchor elements ho), saa CSS agyapade yi nnya nyɛɛ standardized na wonnya mmoa koraa wɔ Internet Explorer 10 mu, na ɛrensiw keyboard dwumadiefoɔ kwan sɛ wɔbɛyɛ saa tumi twe adwene si nkitahodi ahorow yi so anaasɛ ɛma ɛyɛ adwuma. Enti sɛnea ɛbɛyɛ a wubenya ahobammɔ no, fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma link ahorow a ɛtete saa no nyɛ adwuma.

Cross-browser a ɛne ne ho hyia

Bere a Bootstrap de saa akwan yi bedi dwuma wɔ browser ahorow nyinaa mu no, Internet Explorer 11 ne nea ɛwɔ ase ha no ntumi mmoa disabledsu no koraa wɔ <fieldset>. Fa JavaScript a wɔahyɛ da ayɛ no di dwuma na ma fieldset no nyɛ adwuma wɔ browser ahorow yi mu.

Nneɛma a Wɔde Di Dwuma

Fa nsɛm a ɛsom bo, a ɛyɛ adwuma ma wo dwumadiefoɔ no denam HTML5 kratasin a wɔde di dwuma so– a ɛwɔ yɛn brawsa a yɛboa nyinaa mu . Paw fi browser default validation feedback no mu, anaa fa custom messages di dwuma denam yɛn adesua ahorow a wɔasisi ne JavaScript a wɔde fi ase no so.

Mprempren yɛkamfo kyerɛ sɛ fa custom validation styles di dwuma, efisɛ native browser default validation messages no ntumi nhu mfiridwuma a ɛboa bere nyinaa wɔ browser ahorow nyinaa mu (titiriw no, Chrome wɔ desktop ne mobile so).

Sɛnea ɛyɛ adwuma

Sɛnea fom validation yɛ adwuma wɔ Bootstrap ho ni:

  • HTML kratasin a wɔde di dwuma no yɛ nea wɔde di dwuma denam CSS no pseudo-classes abien no so, :invalidne :valid. Ɛfa <input>, <select>, ne <textarea>element ahorow ho.
  • Bootstrap scopes :invalidne :validstyles to awofo .was-validatedadesua, mpɛn pii no wɔde di dwuma wɔ <form>. Sɛ ɛnte saa a, afuo biara a wɔhwehwɛ a enni botae no bɛda adi sɛ ɛnyɛ adwuma wɔ kratafa a wɔde hyɛ mu. Saa kwan yi so no, wubetumi apaw bere a wode bɛyɛ adwuma (mpɛn pii no bere a wɔabɔ mmɔden sɛ wode kratasin bɛmena akyi).
  • Sɛ wopɛ sɛ wosan siesie kratasin no hwɛbea (sɛ nhwɛso no, wɔ krataa a wɔde mena a ɛyɛ nnam a wɔde AJAX di dwuma ho no), yi .was-validatedadesua no fi <form>bio bere a wɔde amena no akyi.
  • Sɛ́ fallback, .is-invalidna .is-validwobetumi de adesua ahorow adi dwuma sen sɛ wɔde pseudo-klas ahorow no bedi dwuma ama server afã validation . Wɔnhwehwɛ sɛ wɔyɛ .was-validatedawofo adesua.
  • Esiane anohyeto ahorow a ɛwɔ sɛnea CSS yɛ adwuma mu nti, yentumi (mprempren) mfa styles nni dwuma wɔ a <label>a ɛba ansa na form control bi anim wɔ DOM no mu a JavaScript a wɔahyɛ da ayɛ no mmoa nka ho.
  • Nnɛyi brawsa nyinaa boa constraint validation API , JavaScript akwan a ɛtoatoa so a wɔfa so ma fom sohwɛ ahorow di dwuma.
  • Nsɛm a wɔde ma no betumi de browser defaults (sono ma browser biara, na ɛnam CSS so ntumi nkyerɛw) anaa yɛn nsɛm a wɔde ma a wɔahyɛ da ayɛ a HTML ne CSS foforo wom adi dwuma.
  • Wubetumi de nkrasɛm a wɔahyɛ da ayɛ a ɛkyerɛ sɛ ɛyɛ nokware ama setCustomValiditywɔ JavaScript mu.

Bere a ɛno wɔ w’adwenem no, susuw demo ahorow a edidi so yi ho ma yɛn custom form validation styles, optional server side classes, ne browser defaults.

Nneɛma a wɔde yɛ nneɛma a wɔahyɛ da ayɛ

Sɛ wopɛ Bootstrap fom validation nkrasɛm a wɔahyɛ da ayɛ a, ɛho behia sɛ wode novalidateboolean attribute no ka wo <form>. Wei ma browser default feedback adwinnade no nyɛ adwuma, nanso ɛda so ara ma kwan kɔ fom validation API ahorow a ɛwɔ JavaScript mu no so. Bɔ mmɔden sɛ wode kratasin a ɛwɔ ase ha no bɛmena; yɛn JavaScript no bɛtwa submit button no mu na ɛde nsɛm a ɛfa ho akɔma wo. Sɛ worebɔ mmɔden sɛ wode bɛmena a, wubehu :invalidne :validstyles a wɔde adi dwuma wɔ wo form controls no so.

Nsɛm a wɔde ma a wɔahyɛ da ayɛ no de kɔla a wɔahyɛ da ayɛ, ahye, adwene a wɔde si biribi so, ne akyi ahyɛnsode ahorow di dwuma de di nsɛm a wɔde ma no ho nkitaho yiye. Background icons for <select>s no wɔ hɔ ne .custom-select, na ɛnyɛ .form-control.

Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationCustom01">First name</label>
      <input type="text" class="form-control" id="validationCustom01" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom04">State</label>
      <select class="custom-select" id="validationCustom04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Zip</label>
      <input type="text" class="form-control" id="validationCustom05" required>
      <div class="invalid-feedback">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

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

Browser no yɛ nea wɔahyɛ da ayɛ

W’ani nnye custom validation feedback messages anaa JavaScript a wobɛkyerɛw de asesa form suban ho? Ne nyinaa ye, wubetumi de browser no defaults adi dwuma. Bɔ mmɔden sɛ wode kratasin a ɛwɔ ase ha no bɛmena. Ɛgyina wo browser ne OS so no, wobɛhunu ɔkwan soronko kakra a wobɛfa so akyerɛ wo nsɛm.

Bere a wontumi mfa CSS nsiesie saa nsɛm a wɔka fa ho no, woda so ara betumi afa JavaScript so ayɛ nsɛm a wɔka kyerɛ no ho nhyehyɛe.

@ 
<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" 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" 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"  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" required>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault04">State</label>
      <select class="custom-select" id="validationDefault04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationDefault05">Zip</label>
      <input type="text" class="form-control" id="validationDefault05" required>
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
      <label class="form-check-label" for="invalidCheck2">
        Agree to terms and conditions
      </label>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Server afã

Yɛhyɛ nyansa sɛ fa client-side validation di dwuma, nanso sɛ ɛba sɛ wopɛ server-side validation a, wubetumi de .is-invalidne .is-valid. Hyɛ no nsow sɛ .invalid-feedbackwɔboa nso wɔ adesua ahorow yi mu.

Ɛte sɛ nea eye!
Ɛte sɛ nea eye!
@
Yɛsrɛ wo paw edin a wode bedi dwuma.
Yɛsrɛ sɛ momfa kurow a ɛfata mma.
Yɛsrɛ wo paw tebea a ɛfata.
Yɛsrɛ sɛ fa zip a ɛfata ma.
Ɛsɛ sɛ wopene so ansa na wode akɔma. 
<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" 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" 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" 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" required>
      <div class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer04">State</label>
      <select class="custom-select is-invalid" id="validationServer04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-feedback">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationServer05">Zip</label>
      <input type="text" class="form-control is-invalid" id="validationServer05" 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>

Nneɛma a wɔboa

Validation styles wɔ hɔ ma form controls ne components a edidi so yi:

  • <input>s ne <textarea>s a ɛwɔ .form-control(a ɛkɔsi biako .form-controlwɔ nsɛm a wɔde hyɛ mu akuw mu ka ho) .
  • <select>s ne .form-controlanaa.custom-select
  • .form-checks
  • .custom-checkboxs ne .custom-radios
  • .custom-file
Yɛsrɛ wo kyerɛw nkra bi wɔ textarea no mu.
Nhwɛso nsɛm a wɔde ma a ɛnyɛ adwuma
Nhwɛso pii a ɛnyɛ nokware nsɛm a wɔde ma
Nhwɛso a enni mu amanne paw nsɛm a wɔka
Nhwɛso a ɛnyɛ adwuma a wɔahyɛ da ayɛ fael nsɛm a wɔka 
<form class="was-validated">
  <div class="mb-3">
    <label for="validationTextarea">Textarea</label>
    <textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
    <div class="invalid-feedback">
      Please enter a message in the textarea.
    </div>
  </div>

  <div class="custom-control custom-checkbox mb-3">
    <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
    <label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
    <div class="invalid-feedback">Example invalid feedback text</div>
  </div>

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

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

Nnwinnade Ho Afotu

Sɛ wo fom nhyehyeɛ ma ho kwan a, wobɛtumi asesa .{valid|invalid}-feedbackadesua ahodoɔ no ama .{valid|invalid}-tooltipadesua ahodoɔ no de akyerɛ validation feedback wɔ styled tooltip mu. Hwɛ hu sɛ wowɔ ɔwofo bi a position: relativeɔwɔ so ma adwinnade ho nsɛm a wɔde besi hɔ. Wɔ nhwɛsoɔ a ɛwɔ aseɛ ha yi mu no, yɛn column classes no wɔ yei dada, nanso wo project no betumi ahwehwɛ sɛ wobɛhyehyɛ foforɔ.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip. 
<form class="needs-validation" novalidate>
  <div class="form-row">
    <div class="col-md-4 mb-3">
      <label for="validationTooltip01">First name</label>
      <input type="text" class="form-control" id="validationTooltip01" 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" 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" 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" required>
      <div class="invalid-tooltip">
        Please provide a valid city.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip04">State</label>
      <select class="custom-select" id="validationTooltip04" required>
        <option selected disabled value="">Choose...</option>
        <option>...</option>
      </select>
      <div class="invalid-tooltip">
        Please select a valid state.
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationTooltip05">Zip</label>
      <input type="text" class="form-control" id="validationTooltip05" required>
      <div class="invalid-tooltip">
        Please provide a valid zip.
      </div>
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit form</button>
</form>

Nneɛma a Wɔyɛ no Sɛnea Wɔpɛ

Validation states betumi ayɛ customized via Sass ne $form-validation-statesmap no. Ɛwɔ yɛn _variables.scssfael no mu no, wɔde saa Sass map yi ayɛ loop de ayɛ default valid/ invalidvalidation states no. Nea ɛka ho ne nested map a wɔde sesa ɔman biara kɔla ne ahyɛnsode. Bere a aman foforo biara nni hɔ a browser ahorow boa no, wɔn a wɔde custom styles di dwuma no betumi de form feedback a ɛyɛ den kɛse aka ho ntɛm.

Yɛsrɛ wo hyɛ no nsow sɛ yɛnkamfo nkyerɛ sɛ wobɛsesa saa gyinapɛn ahorow yi a form-validation-statewonsakra mixin no nso.

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

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

Nkrataa a wɔahyɛ da ayɛ

Sɛ wopɛ sɛ woyɛ nsakrae pii mpo na ɛma wohu browser no pɛpɛɛpɛ a, fa yɛn form elements a wɔahyɛ da ayɛ no koraa no si browser defaults no ananmu. Wɔasi wɔ semantic ne accessible markup atifi, enti wɔyɛ solid replacements ma default form control biara.

Nnaka a wɔde hyɛ mu ne radio ahorow

Wɔde checkbox ne radio <input>ne <label>pairing biara abɔ mu <div>de ayɛ yɛn custom control. Wɔ nhyehyɛe mu no, eyi yɛ ɔkwan koro no ara a yɛn default no fa so .form-check.

Yɛde sibling selector ( ~) di dwuma ma yɛn <input>aman nyinaa —te sɛ :checked—de yɛ yɛn custom form indicator no sɛnea ɛfata. Sɛ yɛde ka .custom-control-labeladesuakuw no ho a, yebetumi nso ayɛ nsɛm a wɔakyerɛw ama ade biara a egyina <input>'s tebea so.

Yɛde default no sie <input>ne opacityna yɛde di dwuma .custom-control-labelde si custom form indicator foforo wɔ ne ananmu ne ::beforene ::after. Awerɛhosɛm ne sɛ yentumi nsi custom biako mfi kɛkɛ <input>efisɛ CSS's contentnyɛ adwuma wɔ saa element no so.

Wɔ tebea horow a wɔahwɛ mu no, yɛde base64 embedded SVG ahyɛnsode ahorow a efi Open Iconic . Eyi ma yenya tumi a eye sen biara ma styling ne positioning wɔ browser ne mfiri ahorow nyinaa so.

Nnaka a wɔde hyɛ mu

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

Custom checkboxes nso betumi de :indeterminatepseudo class no adi dwuma bere a wɔde nsa ahyɛ mu denam JavaScript so (HTML su biara nni hɔ a wɔde bɛkyerɛ).

Sɛ wode jQuery redi dwuma a, ɛsɛ sɛ biribi te sɛ eyi dɔɔso:

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

Radio ahorow

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

Inline no mu

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

Dɛmdie

Wobetumi asiw nnaka a wɔahyɛ da ayɛ ne radio ahorow nso ano. Fa disabledboolean attribute no ka ho <input>na custom indicator ne label nkyerɛkyerɛmu no bɛyɛ automatically styled.

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

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

Nsakrae ahorow

Switch bi wɔ markup a ɛwɔ custom checkbox nanso ɛde .custom-switchclass no di dwuma de kyerɛ toggle switch. Switches nso boa disabledattribute no.

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

Paw menu no

Custom <select>menus hia custom class nkutoo, .custom-selectna ama woatumi akanyan custom styles no. Custom styles no yɛ <select>'s mfiase anim nkutoo na entumi nsakra <option>s no esiane browser anohyeto ahorow nti.

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

Wubetumi nso apaw afi nketewa ne akɛse a wɔahyɛ da apaw mu ma ɛne yɛn nsɛm a wɔde hyɛ mu a ne kɛse yɛ pɛ no ahyia.

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

Wɔsan multiplenso boa su no:

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

Sɛnea sizesu no te no:

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

Dodoɔ

Yɛ custom <input type="range">controls a wode .custom-range. Wɔayɛ track (akyi) ne thumb (bo no) nyinaa sɛnea ɛbɛyɛ a ɛbɛda adi sɛ ɛyɛ pɛ wɔ browser ahorow no nyinaa so. Sɛnea IE ne Firefox nkutoo boa “hyɛ” wɔn track no ma fi nsateaa no benkum anaa nifa so sɛ ɔkwan a wɔfa so de aniwa kyerɛ nkɔso no, mprempren yɛnboa.

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

Range inputs wɔ implicit values ​​ma minne max— 0ne 100, sɛnea ɛte biara. Wubetumi akyerɛ gyinapɛn foforo ama wɔn a wɔde minne maxsu ahorow no di dwuma no.

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

Sɛnea wɔahyɛ no, range inputs “snap” kɔ integer values ​​so. Sɛ wopɛ sɛ wosakra eyi a, wubetumi akyerɛ stepbotae bi. Wɔ nhwɛso a ɛwɔ ase ha no mu no, yɛde anammɔn dodow no mmɔho abien denam step="0.5".

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

Fael browser no

Plugin a wɔkamfo kyerɛ sɛ ɛbɛma custom file input ayɛ adwuma: bs-custom-file-input , ɛno ne nea yɛde redi dwuma mprempren wɔ ha wɔ yɛn docs mu.

Fael input no yɛ gnarly sen biara wɔ bunch no mu na ɛhwehwɛ JavaScript foforo sɛ wopɛ sɛ wode hook wɔn ne functional Choose file... ne fael din text a woapaw.

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

Yɛde default fael no sie <input>via opacityna mmom yɛ style no <label>. Wɔyɛ bɔtn no na wɔde si hɔ ne ::after. Nea etwa to no, yɛpae mu ka sɛ a widthne heightwɔ so <input>ma ntam kwan a ɛfata ma nsɛm a atwa ho ahyia.

Nhama no a wɔde SCSS rekyerɛ ase anaasɛ wɔresakra no

Wɔde :lang()pseudo-class no di dwuma de ma kwan ma wɔkyerɛ “Browse” nsɛm no ase kɔ kasa afoforo mu. Fa kasa tag a ɛfa ho ne localized strings no to so anaa fa nsɛm a wɔakyerɛw no ka $custom-file-textSass variable no ho . Wobetumi ayɛ Engiresi nhama no ho nhyehyɛe saa ara. Sɛ nhwɛso no, sɛnea obi betumi de Spania nkyerɛase bi aka ho ni (Spanish kasa mmara ne ):es

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

Ɛha na lang(es)ɛreyɛ adwuma wɔ fael a wɔahyɛ da ahyɛ mu ama Spania nkyerɛase:

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

Ɛho behia sɛ wode wo krataa no kasa (anaasɛ ne dua ketewa) no si hɔ yiye sɛnea ɛbɛyɛ a wɔbɛda nsɛm a ɛteɛ adi. Wobetumi de attribute langa ɛwɔ <html>element no so anaa Content-LanguageHTTP header , ne akwan afoforo ayɛ eyi.

Nhama no a wobɛkyerɛ ase anaa wobɛsesa no denam HTML so

Bootstrap nso ma ɔkwan a wɔfa so kyerɛ “Browse” nkyerɛwee no ase wɔ HTML mu a data-browsesu a wobetumi de aka ahyɛnsode input label no ho (nhwɛso wɔ Dutch kasa mu):

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