in English

Pab pawg nkag

Yooj yim txuas daim ntawv tswj hwm los ntawm kev ntxiv cov ntawv, nyees khawm, lossis pawg khawm ntawm ob sab ntawm cov ntawv nkag, kev cai xaiv, thiab cov ntaub ntawv kev cai nkag.

Piv txwv

Muab ib qho add-on los yog khawm ntawm ob sab ntawm ib qho kev tawm tswv yim. Koj tseem tuaj yeem tso ib qho ntawm ob sab ntawm kev nkag. Nco ntsoov tso <label>s sab nraum pawg tswv yim.

@
@example.com
https://example.com/users/
$
.00
Nrog textarea 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">With textarea</span>
  </div>
  <textarea class="form-control" aria-label="With textarea"></textarea>
</div>

qhwv

Input pab pawg qhwv los ntawm lub neej ntawd los ntawm flex-wrap: wraptxhawm rau kom haum raws li kev cai daim ntawv teb validation nyob rau hauv ib pawg tswv yim. Koj tuaj yeem kaw qhov no nrog .flex-nowrap.

@ 
<div class="input-group flex-nowrap">
  <div class="input-group-prepend">
    <span class="input-group-text" id="addon-wrapping">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
</div>

Qhov loj me

Ntxiv cov txheeb ze daim ntawv sizing chav kawm rau .input-groupnws tus kheej thiab cov ntsiab lus nyob rau hauv yuav cia li hloov pauv - tsis tas yuav rov ua dua daim ntawv tswj cov chav kawm ntawm txhua lub caij.

Tsis txaus siab qhov loj me ntawm tus kheej cov tswv yim pab pawg.

Me me
Default
Loj 
<div class="input-group input-group-sm mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg">
</div>

Checkboxes thiab xov tooj cua

Muab ib lub checkbox lossis xov tooj cua xaiv nyob rau hauv ib pab pawg neeg lub addon es tsis txhob ntawv.

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox" aria-label="Checkbox for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with checkbox">
</div>

<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="radio" aria-label="Radio button for following text input">
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with radio button">
</div>

Ntau qhov kev nkag

Thaum ntau <input>qhov kev txhawb nqa pom, cov qauv siv tau tsuas yog muaj rau cov tswv yim pab pawg nrog ib leeg xwb <input>.

Lub npe thiab lub xeem 
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text">First and last name</span>
  </div>
  <input type="text" aria-label="First name" class="form-control">
  <input type="text" aria-label="Last name" class="form-control">
</div>

Ntau addons

Ntau yam add-ons tau txais kev txhawb nqa thiab tuaj yeem sib xyaw nrog cov checkbox thiab xov tooj cua input versions.

$ 0.00 Nws
$ 0.00 Nws 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Dollar amount (with dot and two decimal places)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

Khawm addons

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="button-addon1">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend" id="button-addon3">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="Example text with two button addons" aria-describedby="button-addon3">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username with two button addons" aria-describedby="button-addon4">
  <div class="input-group-append" id="button-addon4">
    <button class="btn btn-outline-secondary" type="button">Button</button>
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Khawm nrog dropdowns

Kev ua Lwm qhov kev ua Lwm yam ntawm no Sib cais
Kev ua Lwm qhov kev ua Lwm yam ntawm no Sib cais 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">Dropdown</button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Segmented nyees khawm

Kev ua Lwm qhov kev ua Lwm yam ntawm no Sib cais
Kev ua Lwm qhov kev ua Lwm yam ntawm no Sib cais 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

<div class="input-group">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-secondary">Action</button>
    <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
      <span class="sr-only">Toggle Dropdown</span>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </div>
</div>

Cov qauv kev cai

Cov pab pawg tswv yim suav nrog kev txhawb nqa rau kev xaiv kev cai thiab kev cai cov ntaub ntawv nkag. Browser default versions ntawm cov no tsis txaus siab.

Kev cai xaiv

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <label class="input-group-text" for="inputGroupSelect01">Options</label>
  </div>
  <select class="custom-select" id="inputGroupSelect01">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group mb-3">
  <select class="custom-select" id="inputGroupSelect02">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <label class="input-group-text" for="inputGroupSelect02">Options</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <select class="custom-select" id="inputGroupSelect03" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
</div>

<div class="input-group">
  <select class="custom-select" id="inputGroupSelect04" aria-label="Example select with button addon">
    <option selected>Choose...</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Custom file input

Qhov piv txwv no siv cov ntaub ntawv kev cai browser tivthaiv, uas tso siab rau qhov cais bs-custom-file-input plugin.
Upload
Upload 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01" aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01">Choose file</label>
  </div>
</div>

<div class="input-group mb-3">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile02">
    <label class="custom-file-label" for="inputGroupFile02" aria-describedby="inputGroupFileAddon02">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="inputGroupFileAddon02">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon03">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03">
    <label class="custom-file-label" for="inputGroupFile03">Choose file</label>
  </div>
</div>

<div class="input-group">
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
  </div>
</div>

Kev siv tau

Xyuas kom meej tias txhua daim ntawv tswj hwm muaj lub npe tsim nyog siv tau kom lawv lub hom phiaj tuaj yeem xa mus rau cov neeg siv khoom siv thev naus laus zis. Txoj hauv kev yooj yim tshaj plaws kom ua tiav qhov no yog siv lub <label>ntsiab lus, lossis - nyob rau hauv rooj plaub ntawm cov nyees khawm - kom suav nrog cov lus piav qhia txaus ua ib feem ntawm cov <button>...</button>ntsiab lus.

Rau cov xwm txheej uas nws tsis tuaj yeem suav nrog <label>cov ntsiab lus pom lossis tsim nyog, muaj lwm txoj hauv kev tseem muab lub npe siv tau, xws li:

  • <label>cov ntsiab lus zais siv cov .sr-onlychav kawm
  • Taw tes rau cov khoom uas twb muaj lawm uas tuaj yeem ua raws li daim ntawv lo sivaria-labelledby
  • Muab tus titlecwj pwm
  • Qhia meej txog kev teeb tsa lub npe siv tau ntawm ib qho khoom sivaria-label

Yog tias tsis muaj ib qho ntawm cov no, cov thev naus laus zis tuaj yeem siv los siv tus placeholdercwj pwm ua ib qho kev poob rau lub npe siv tau rau ntawm <input>thiab <textarea>cov ntsiab lus. Cov piv txwv nyob rau hauv nqe lus no muab ob peb qhov kev pom zoo, cov xwm txheej tshwj xeeb.

Thaum siv cov ntsiab lus zais qhov muag ( .sr-only, aria-label, thiab txawm tias placeholdercov ntsiab lus, uas ploj mus ib zaug hauv daim ntawv teb muaj cov ntsiab lus) yuav muaj txiaj ntsig zoo rau cov neeg siv thev naus laus zis, qhov tsis pom cov ntawv nyeem tseem yuav muaj teeb meem rau qee cov neeg siv. Qee daim ntawv pom daim ntawv lo feem ntau yog txoj hauv kev zoo tshaj plaws, ob qho tib si rau kev siv tau thiab siv tau.