in English

Ntlawa wa swingheniso

Hi ku olova andlala vulawuri bya fomo hi ku engetela tsalwa, swikomba-nkarhi, kumbe mintlawa ya swikomba-nkarhi eka matlhelo hamambirhi ya swingheniso swa matsalwa, swihlawulekisi swa ntolovelo, na swingheniso swa fayili ya ntolovelo.

Xikombiso xa xisekelo

Veka xiengetelo xin’we kumbe buti eka matlhelo hamambirhi ya input. U nga ha tlhela u veka yin’we ematlhelo hamambirhi ya xingheniso. Tsundzuka ku veka <label>s ehandle ka ntlawa wa swingheniso.

@
@xikombiso.com
https://xikombiso.com/vatirhisi/
$
.00
Hi ndhawu ya matsalwa 
<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>

Ku phutsela

Mintlawa ya swingheniso yi phutsela hi ku tiyimisela hi ku tirhisa flex-wrap: wrapleswaku yi ta amukela ku tiyisisiwa ka nsimu ya fomo ya ntolovelo endzeni ka ntlawa wa swingheniso. U nga ha tshikisa leswi hi .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>

Ku pima mpimo

Engetelani titlilasi ta vukulu bya xivumbeko lexi yelanaka eka yona .input-grouphi yoxe naswona leswi nga endzeni swi ta cinca mpimo hi ku tisungulela—ku hava xilaveko xo phindha-phindha titlilasi ta vukulu bya vulawuri bya fomo eka elemente yin’wana ni yin’wana.

Ku pima mpimo eka swiaki swa ntlawa wa swingheniso swa munhu hi xiyexe a swi seketeriwi.

Xitsongo
Ku tlula
Lexikulu 
<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>

Mabokisi yo kambela ni swiya-ni-moya

Veka bokisi rin’wana na rin’wana ro kambela kumbe nhlawulo wa xiya-ni-moya endzeni ka addon ya ntlawa wo nghenisa ematshan’wini ya tsalwa.

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

Swilo swo tala leswi nghenisiwaka

Loko ti- <input>s to tala ti seketeriwa hi ku vona, switayele swa ku tiyisisa swi kumeka ntsena eka mintlawa ya swingheniso leyi nga na <input>.

Vito ro sungula ni ro hetelela 
<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>

Swiengetelo swo tala

Swiengetelo swo tala swa seketeriwa naswona swi nga hlanganisiwa na bokisi ro kambela na tivhidiyo ta ku nghenisa ka xiya-ni-moya.

$ 0.00 hi ku
$ 0.00 hi ku 
<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>

Swiengetelo swa button

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

Swikomba-nkarhi leswi nga ni swilo leswi nga ehansi

Goza Xiendlo xin’wana Xin’wana laha Xihlanganisi lexi hambanisiweke
Goza Xiendlo xin’wana Xin’wana laha Xihlanganisi lexi hambanisiweke 
<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>

Swikomba-nkarhi leswi hambanisiweke

Goza Xiendlo xin’wana Xin’wana laha Xihlanganisi lexi hambanisiweke
Goza Xiendlo xin’wana Xin’wana laha Xihlanganisi lexi hambanisiweke 
<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>

Tifomo ta ntolovelo

Mintlawa ya swingheniso yi katsa nseketelo wa ku hlawula ka ntolovelo na ku nghenisa ka fayili ya ntolovelo. Tivhidiyo ta xiviri ta browser ta leswi a ti seketeriwi.

Ku hlawula ka ntolovelo

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

Ku nghenisa fayili ya ntolovelo

Xikombiso lexi xi tirhisa xiphemu xa xihlamusela-marito xa fayili ya ntolovelo , lexi titshegeke hi xiengetelo xa bs-custom-file-input lexi hambaneke.
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>

Ku fikelela

Tiyisisa leswaku vulawuri hinkwabyo bya tifomo byi na vito leri faneleke leri fikelelaka leswaku xikongomelo xa byona xi ta hundziseriwa eka vatirhisi va thekinoloji yo pfuneta. Ndlela yo olova yo fikelela leswi i ku tirhisa <label>xiaki, kumbe—eka swikomba-nkarhi—ku katsa tsalwa leri hlamuselaka hi laha ku eneleke tanihi xiphemu xa leswi <button>...</button>nga endzeni.

Eka swiyimo leswi swi nga kotekiki ku katsa <label>nhundzu ya tsalwa leyi vonakaka kumbe leyi faneleke, ku na tindlela tin’wana to ha nyika vito leri fikelelaka, to tanihi:

  • <label>swiaki leswi fihliweke hi ku tirhisa .sr-onlytlilasi
  • Ku kombetela eka elemente leyi nga kona leyi nga tirhaka tanihi lebula hi ku tirhisaaria-labelledby
  • Ku nyika titlexihlawulekisi
  • Ku veka hi ku kongoma vito leri fikelelaka eka elemente hi ku tirhisaaria-label

Loko ku nga ri na xin’we xa leswi lexi nga kona, thekinoloji yo pfuneta yi nga ha tirhisa placeholderxihlawulekisi tanihi ku tlhelela endzhaku eka vito leri fikelelaka eka <input>na <textarea>swiaki. Swikombiso leswi nga eka xiyenge lexi swi nyika maendlelo ma nga ri mangani lama ringanyetiweke, lama kongomeke eka xiyimo.

Loko ku tirhisa swilo leswi fihliweke hi mahlo ( .sr-only, aria-label, hambi ku ri placeholderswilo, leswi nyamalaka loko nsimu ya fomo yi ri na nhundzu) swi nga ta vuyerisa vatirhisi va thekinoloji leyi pfunaka, ku pfumaleka ka tsalwa ra lebula leri vonakaka swi nga ha va xiphiqo eka vatirhisi vo karhi. Xivumbeko xin’wana xa lebula leyi vonakaka hi ntolovelo i ndlela leyinene ngopfu, eka ku fikelela na ku tirhiseka.