Source

ഇൻപുട്ട് ഗ്രൂപ്പ്

ടെക്‌സ്‌റ്റ്, ബട്ടണുകൾ, അല്ലെങ്കിൽ ബട്ടൺ ഗ്രൂപ്പുകൾ എന്നിവ ചേർത്തുകൊണ്ട് ഫോം നിയന്ത്രണങ്ങൾ എളുപ്പത്തിൽ വിപുലീകരിക്കുക, ടെക്‌സ്‌റ്റ് ഇൻപുട്ടുകൾ, ഇഷ്‌ടാനുസൃത തിരഞ്ഞെടുക്കലുകൾ, ഇഷ്‌ടാനുസൃത ഫയൽ ഇൻപുട്ടുകൾ എന്നിവയ്‌ക്ക് ഇരുവശത്തും.

അടിസ്ഥാന ഉദാഹരണം

ഒരു ഇൻപുട്ടിന്റെ ഇരുവശത്തും ഒരു ആഡ്-ഓൺ അല്ലെങ്കിൽ ബട്ടൺ സ്ഥാപിക്കുക. നിങ്ങൾക്ക് ഒരു ഇൻപുട്ടിന്റെ ഇരുവശത്തും ഒരെണ്ണം സ്ഥാപിക്കാം. <label>ഇൻപുട്ട് ഗ്രൂപ്പിന് പുറത്ത് കൾ സ്ഥാപിക്കാൻ ഓർക്കുക .

@
@example.com
https://example.com/users/
$
.00
ടെക്സ്റ്റ് ഏരിയയോടൊപ്പം 
<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>

പൊതിയുന്നു

flex-wrap: wrapഒരു ഇൻപുട്ട് ഗ്രൂപ്പിനുള്ളിൽ ഇഷ്‌ടാനുസൃത ഫോം ഫീൽഡ് മൂല്യനിർണ്ണയം ഉൾക്കൊള്ളുന്നതിനായി ഇൻപുട്ട് ഗ്രൂപ്പുകൾ സ്ഥിരസ്ഥിതിയായി പൊതിയുന്നു . ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഇത് പ്രവർത്തനരഹിതമാക്കാം .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>

വലിപ്പം

ആപേക്ഷിക ഫോം സൈസിംഗ് ക്ലാസുകൾ അതിലേക്ക് ചേർക്കുക, .input-groupഉള്ളിലുള്ള ഉള്ളടക്കങ്ങൾ സ്വയമേവ വലുപ്പം മാറ്റും-ഓരോ ഘടകത്തിലും ഫോം കൺട്രോൾ സൈസ് ക്ലാസുകൾ ആവർത്തിക്കേണ്ട ആവശ്യമില്ല.

വ്യക്തിഗത ഇൻപുട്ട് ഗ്രൂപ്പ് ഘടകങ്ങളുടെ വലുപ്പം പിന്തുണയ്ക്കുന്നില്ല.

ചെറുത്
സ്ഥിരസ്ഥിതി
വലിയ 
<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>

ചെക്ക്ബോക്സുകളും റേഡിയോകളും

ടെക്‌സ്‌റ്റിന് പകരം ഇൻപുട്ട് ഗ്രൂപ്പിന്റെ ആഡ്‌ഓണിൽ ഏതെങ്കിലും ചെക്ക്‌ബോക്‌സോ റേഡിയോ ഓപ്ഷനോ സ്ഥാപിക്കുക.

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

ഒന്നിലധികം ഇൻപുട്ടുകൾ

ഒന്നിലധികം <input>സെകൾ ദൃശ്യപരമായി പിന്തുണയ്ക്കുമ്പോൾ, ഒരൊറ്റ ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്ക് മാത്രമേ മൂല്യനിർണ്ണയ ശൈലികൾ ലഭ്യമാകൂ <input>.

ആദ്യ, അവസാന നാമം 
<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>

ഒന്നിലധികം ആഡോണുകൾ

ഒന്നിലധികം ആഡ്-ഓണുകൾ പിന്തുണയ്ക്കുന്നു കൂടാതെ ചെക്ക്ബോക്‌സ്, റേഡിയോ ഇൻപുട്ട് പതിപ്പുകൾ എന്നിവയുമായി മിക്സ് ചെയ്യാം.

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

ബട്ടൺ ആഡോണുകൾ

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

ഡ്രോപ്പ്ഡൗൺ ഉള്ള ബട്ടണുകൾ

ആക്ഷൻ മറ്റൊരു പ്രവർത്തനം ഇവിടെ മറ്റെന്തെങ്കിലും വേർതിരിച്ച ലിങ്ക്
ആക്ഷൻ മറ്റൊരു പ്രവർത്തനം ഇവിടെ മറ്റെന്തെങ്കിലും വേർതിരിച്ച ലിങ്ക് 
<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>

സെഗ്മെന്റഡ് ബട്ടണുകൾ

ആക്ഷൻ മറ്റൊരു പ്രവർത്തനം ഇവിടെ മറ്റെന്തെങ്കിലും വേർതിരിച്ച ലിങ്ക്
ആക്ഷൻ മറ്റൊരു പ്രവർത്തനം ഇവിടെ മറ്റെന്തെങ്കിലും വേർതിരിച്ച ലിങ്ക് 
<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>

ഇഷ്ടാനുസൃത ഫോമുകൾ

ഇഷ്‌ടാനുസൃത തിരഞ്ഞെടുക്കലുകൾക്കും ഇഷ്‌ടാനുസൃത ഫയൽ ഇൻപുട്ടുകൾക്കുമുള്ള പിന്തുണ ഇൻപുട്ട് ഗ്രൂപ്പുകളിൽ ഉൾപ്പെടുന്നു. ഇവയുടെ ബ്രൗസർ ഡിഫോൾട്ട് പതിപ്പുകൾ പിന്തുണയ്ക്കുന്നില്ല.

ഇഷ്ടാനുസൃത തിരഞ്ഞെടുപ്പ്

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

ഇഷ്‌ടാനുസൃത ഫയൽ ഇൻപുട്ട്

അപ്‌ലോഡ് ചെയ്യുക
അപ്‌ലോഡ് ചെയ്യുക 
<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>

പ്രവേശനക്ഷമത

ഓരോ ഇൻപുട്ടിനും നിങ്ങൾ ഒരു ലേബൽ ഉൾപ്പെടുത്തിയില്ലെങ്കിൽ നിങ്ങളുടെ ഫോമുകളിൽ സ്‌ക്രീൻ റീഡർമാർക്ക് പ്രശ്‌നമുണ്ടാകും. ഈ ഇൻപുട്ട് ഗ്രൂപ്പുകൾക്ക്, ഏതെങ്കിലും അധിക ലേബലോ പ്രവർത്തനമോ സഹായ സാങ്കേതിക വിദ്യകളിലേക്ക് എത്തിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക.

ഉപയോഗിക്കേണ്ട കൃത്യമായ സാങ്കേതികത ( ക്ലാസ് <label>ഉപയോഗിച്ച് മറച്ച ഘടകങ്ങൾ , അല്ലെങ്കിൽ ആട്രിബ്യൂട്ടുകളുടെ ഉപയോഗം , ഒരുപക്ഷേ സംയോജിപ്പിച്ച് ) കൂടാതെ എന്ത് അധിക വിവരങ്ങൾ കൈമാറണം എന്നത് നിങ്ങൾ നടപ്പിലാക്കുന്ന കൃത്യമായ ഇന്റർഫേസ് വിജറ്റിനെ ആശ്രയിച്ച് വ്യത്യാസപ്പെടും. ഈ വിഭാഗത്തിലെ ഉദാഹരണങ്ങൾ കുറച്ച് നിർദ്ദേശിച്ച, കേസ്-നിർദ്ദിഷ്ട സമീപനങ്ങൾ നൽകുന്നു..sr-onlyaria-labelaria-labelledbyaria-describedby