in English

ان پٹ گروپ

متنی ان پٹس، حسب ضرورت سلیکٹس، اور کسٹم فائل ان پٹس کے دونوں طرف ٹیکسٹ، بٹن، یا بٹن گروپس شامل کرکے فارم کنٹرول کو آسانی سے بڑھا دیں۔

بنیادی مثال

ان پٹ کے دونوں طرف ایک ایڈ آن یا بٹن رکھیں۔ آپ ان پٹ کے دونوں طرف ایک بھی رکھ سکتے ہیں۔ <label>s کو ان پٹ گروپ کے باہر رکھنا یاد رکھیں ۔

@
@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>s کو بصری طور پر تعاون کیا جاتا ہے، توثیق کی طرزیں صرف ایک کے ساتھ ان پٹ گروپس کے لیے دستیاب ہیں <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-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>

منقسم بٹن

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

حسب ضرورت فارم

ان پٹ گروپس میں حسب ضرورت سلیکٹس اور کسٹم فائل ان پٹس کے لیے سپورٹ شامل ہے۔ ان کے براؤزر ڈیفالٹ ورژن تعاون یافتہ نہیں ہیں۔

حسب ضرورت منتخب کریں۔

<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>عنصر کا استعمال کیا جائے، یا بٹنوں کے معاملے میں- مواد کے حصے کے طور پر کافی وضاحتی متن کو شامل کیا جائے <button>...</button>۔

ایسے حالات کے لیے جہاں مرئی یا مناسب متن کا مواد شامل کرنا ممکن نہ ہو <label>، پھر بھی قابل رسائی نام فراہم کرنے کے متبادل طریقے ہیں، جیسے:

  • <label>.sr-onlyکلاس کا استعمال کرتے ہوئے چھپے ہوئے عناصر
  • ایک موجودہ عنصر کی طرف اشارہ کرنا جو استعمال کرتے ہوئے لیبل کے طور پر کام کر سکتا ہے۔aria-labelledby
  • titleایک وصف فراہم کرنا
  • استعمال کرتے ہوئے کسی عنصر پر قابل رسائی نام کو واضح طور پر ترتیب دیناaria-label

اگر ان میں سے کوئی بھی موجود نہیں ہے تو، معاون ٹیکنالوجیز placeholderقابل رسائی نام <input>اور <textarea>عناصر کے لیے فال بیک کے طور پر انتساب کو استعمال کرنے کا سہارا لے سکتی ہیں۔ اس سیکشن میں دی گئی مثالیں چند تجویز کردہ، کیس سے متعلق مخصوص نقطہ نظر فراہم کرتی ہیں۔

اگرچہ بصری طور پر پوشیدہ مواد ( .sr-only, aria-label, اور یہاں تک کہ placeholderمواد کا استعمال کرتے ہوئے، جو فارم فیلڈ میں مواد ہونے کے بعد غائب ہو جاتا ہے) معاون ٹیکنالوجی کے صارفین کو فائدہ پہنچے گا، کچھ صارفین کے لیے مرئی لیبل متن کی کمی اب بھی پریشانی کا باعث ہو سکتی ہے۔ مرئی لیبل کی کچھ شکلیں عام طور پر قابل رسائی اور قابل استعمال دونوں کے لیے بہترین طریقہ ہے۔