Source

Nuŋɔŋlɔ ƒe ƒuƒoƒo

Keke nuŋlɔɖiwo dzi kpɔkpɔwo ɖe enu bɔbɔe to nuŋɔŋlɔ, abɔtawo, alo abɔta ƒuƒoƒowo tsɔtsɔ kpe ɖe nuŋɔŋlɔwo ƒe nyawo, tiatia tɔxɛwo, kple faɛlwo ƒe nuŋɔŋlɔ siwo wowɔ ɖe ɖoɖo nu ƒe akpa eveawo ŋu me.

Kpɔɖeŋu vevi aɖe

Da kpeɖeŋutɔ alo abɔta ɖeka ɖe nyawo tsɔtsɔ de eme ƒe akpa eveawo. Àte ŋu atsɔ ɖeka hã ade nya aɖe si wotsɔ de eme ƒe akpa eveawo. Míedoa alɔ nɔnɔme-dziɖuɖu geɖewo le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo ɖeka me o eye <label>ele be s nado le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒoa godo.

@ .
@kpɔɖeŋu.com
https://kpɔɖeŋu.com/zãlawo/
$
.00 ƒe xexlẽme
Kple 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>

Agbɔsɔsɔme ƒe lolome

Tsɔ nɔnɔme ƒe lolome ƒe hatsotso siwo sɔ kple wo nɔewo kpe ɖe .input-groupeya ŋutɔ ŋu eye emenyawo le eme atrɔ woƒe lolome le eɖokui si—mehiã be nàgbugbɔ nuŋlɔɖi ƒe lolome dzi kpɔkpɔ ƒe hatsotsowo agbugbɔ le nu ɖesiaɖe dzi o.

Womedo alɔ lolomewɔwɔ ɖe ame ɖekaɖekawo ƒe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo ƒe akpawo dzi o.

Sue
Gᴐmedzeƒe
Lolo 
<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="Small" 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="Default" 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="Large" aria-describedby="inputGroup-sizing-sm">
</div>

Dzesiɖakawo kple radiowo

De dzesiɖaka alo radio ƒe tiatia ɖesiaɖe ɖe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo aɖe ƒe kpeɖeŋutɔ me ɖe nuŋɔŋlɔ teƒe.

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

Nu geɖe siwo wotsɔ de eme

Togbɔ be <input>wodoa alɔ s geɖewo le nukpɔkpɔ me hã la, kpeɖodzi ƒe atsyãwo li na nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo siwo si . ɖeka le ko <input>.

Ŋkɔ gbãtɔ kple mamlɛtɔ 
<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="">First and last name</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

Addons geɖe

Wodoa alɔ kpeɖeŋutɔ geɖewo eye woate ŋu atsaka wo kple dzesideɖaka kple radio dzi nyawo tsɔtsɔ de eme ƒe tɔtrɔwo.

$ 0.00 ƒe xexlẽme
$ 0.00 ƒe xexlẽme 
<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="Amount (to the nearest dollar)">
</div>

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

Button ƒe kpeɖeŋutɔwo

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="" 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">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <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="" aria-describedby="basic-addon1">
</div>

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

Abɔta siwo dzi woŋlɔ nu ɖo

Action Another action Something else here Separated link
Action Another action Something else here Separated link 
<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-haspopup="true" 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-haspopup="true" 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>

Abɔta siwo woma ɖe akpa vovovowo me

Action Another action Something else here Separated link
Action Another action Something else here Separated link 
<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-haspopup="true" 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-haspopup="true" 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>

Agbalẽvi siwo wowɔ ɖe ɖoɖo nu

Nusiwo wotsɔ de eme ƒe ƒuƒoƒowo dometɔ aɖewoe nye kpekpeɖeŋu na tiatia siwo wowɔ ɖe ɖoɖo nu kple faɛl ƒe nyawo tsɔtsɔ de eme. Womewɔa esiawo ƒe gɔmeɖeɖe siwo woɖo ɖi le browser la me o.

Tiatia si wowɔ ɖe ɖoɖo nu

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

Fail ƒe nuŋɔŋlɔ si wowɔ ɖe ɖoɖo nu

Tsɔe da ɖe Internet dzi
Tsɔe da ɖe Internet dzi 
<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01">
    <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">Choose file</label>
  </div>
  <div class="input-group-append">
    <span class="input-group-text" id="">Upload</span>
  </div>
</div>

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile03">
    <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">
    <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
  </div>
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Button</button>
  </div>
</div>

Mɔnukpɔkpɔwo ƒe Mɔnukpɔkpɔ

Screen readers akpɔ kuxi le wò agbalẽviwo ŋu ne mède dzesidenu ɖesiaɖe si nèŋlɔ la ŋu o. Le nyawo tsɔtsɔ de eme ƒe ƒuƒoƒo siawo gome la, kpɔ egbɔ be wotsɔ dzeside alo dɔwɔwɔ bubu ɖesiaɖe si kpe ɖe eŋu la yi na kpekpeɖeŋunamɔ̃ɖaŋunuwo.

Mɔnu si tututu woazã ( <label>elements hidden using the .sr-onlyclass, or use of the aria-labeland aria-labelledbyattributes, possibly in combination with aria-describedby) kple nyatakaka bubu siwo wòahiã be woatsɔ ayi na amewo la ato vovo le interface widget ƒomevi si tututu nèle dɔ wɔm la nu. Kpɔɖeŋu siwo le akpa sia me na mɔnu ʋɛ aɖewo siwo wodo ɖa, siwo ku ɖe nya aɖewo koŋ ŋu.