in English

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ɔwo ƒ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. Ðo ŋku edzi nàda <label>s ɖe nyawo tsɔtsɔ de eme ƒe ƒuƒoƒoa godo.

@ .

@kpɔɖeŋu.com

Wò tofloko URL

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>

Agbalẽxatsaxatsa

Input ƒuƒoƒowo xatsa to default dzi flex-wrap: wrapbe woateŋu awɔ ɖe custom form field validation le input group me. Àte ŋu awɔ esia nuwɔametɔe kple .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>

Sizing ƒ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="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>

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 ɖeka le ko <input>.

Ŋkɔ gbãtɔ kple mamlɛtɔ

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

Addons geɖe

Wodoa alɔ kpeɖeŋutɔ geɖe 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

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

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

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

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

Abɔta siwo woma ɖe akpa vovovowo me

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

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

Tiatiawɔblɔɖewo

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

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

Kpɔɖeŋu sia zãa custom file browser ƒe akpa aɖe, si nɔa te ɖe bs-custom-file-input plugin si le vovo la dzi.

Tsɔe da ɖe Internet dzi

Tia faɛl

Tsɔe da ɖe Internet dzi

Tia faɛl

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

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

Kpɔ egbɔ be ŋkɔ si sɔ si ŋu woate ŋu aɖo la le agbalẽviwo dzi kpɔkpɔwo katã si ale be woate ŋu agblɔ woƒe taɖodzinu na kpekpeɖeŋunamɔ̃wo zãlawo. Mɔ bɔbɔetɔ kekeake si dzi woato awɔ esiae nye be woazã nu <label>vevi aɖe, alo—le abɔtawo gome la—be woade nuŋɔŋlɔ si ɖɔ nu wòade eme la eme abe <button>...</button>emenyawo ƒe akpa aɖe ene.

Le nɔnɔme siwo me manya wɔ be woatsɔ <label>nuŋɔŋlɔ si woate ŋu akpɔ alo si sɔ ade eme o gome la, mɔ bubuwo li siwo dzi woato ana ŋkɔ si ŋu woate ŋu ake ɖo kokoko, abe:

<label>nusiwo woɣla to .sr-onlyklass la zazã me
Fia asi nusi li xoxo si ate ŋu awɔ dɔ abe dzeside ene zazãaria-labelledby
titleNɔnɔme aɖe nana
Ðo ŋkɔ si ŋu woate ŋu age ɖo la ɖe element aɖe dzi tẽe to zazã mearia-label

Ne esiawo dometɔ aɖeke mele afima o la, kpekpeɖeŋunamɔ̃wo ateŋu azã placeholdernɔnɔmea abe fallback na ŋkɔ si woateŋu akpɔ le <input>kple <textarea>elements. Kpɔɖeŋu siwo le akpa sia me na mɔnu ʋɛ aɖewo siwo wodo ɖa, siwo ku ɖe nya aɖewo koŋ ŋu.

Togbɔ be nyatakaka siwo woɣla ɖe nukpɔkpɔ me zazã ( .sr-only, aria-label, kple placeholdernyatakakawo gɔ̃ hã, siwo nu yina ne nyatakakawo le agbalẽvi aɖe ƒe akpa aɖe me ko) aɖe vi na mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu zãlawo hã la, nuŋɔŋlɔ si woate ŋu akpɔ ƒe anyimanɔmanɔ ate ŋu anye kuxi na ezãla aɖewo kokoko. Zi geɖe la, dzesidenu si wokpɔna ƒomevi aɖee nye mɔnu nyuitɔ kekeake, le alesi woate ŋu akpɔe kple alesi woate ŋu azãe siaa gome.