فارم کنٹرولز

متنی شکل کے کنٹرول جیسے کہ <input>s اور <textarea>s کو حسب ضرورت اسٹائلز، سائزنگ، فوکس سٹیٹس اور مزید کے ساتھ اپ گریڈ دیں۔

اس صفحہ پر

مثال

ای میل اڈریس

ٹیکسٹیریا کی مثال

html

<div class="mb-3">
  <label for="exampleFormControlInput1" class="form-label">Email address</label>
  <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="mb-3">
  <label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
  <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

سائز کرنا

.form-control-lgاور جیسے کلاسز کا استعمال کرتے ہوئے اونچائیاں سیٹ کریں .form-control-sm۔

html

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
<input class="form-control" type="text" placeholder="Default input" aria-label="default input example">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">

معذور

ان پٹ پر بولین انتساب شامل کریں disabledتاکہ اسے خاکستری شکل دینے، پوائنٹر ایونٹس کو ہٹانے اور توجہ مرکوز کرنے سے روکنے کے لیے۔

html

<input class="form-control" type="text" placeholder="Disabled input" aria-label="Disabled input example" disabled>
<input class="form-control" type="text" value="Disabled readonly input" aria-label="Disabled input example" disabled readonly>

صرف پڑھو

readonlyان پٹ کی قدر میں ترمیم کو روکنے کے لیے ان پٹ پر بولین وصف شامل کریں ۔ readonlyان پٹ کو اب بھی فوکس کیا جا سکتا ہے اور منتخب کیا جا سکتا ہے، جبکہ disabledان پٹ نہیں کر سکتے۔

html

<input class="form-control" type="text" value="Readonly input here..." aria-label="readonly input example" readonly>

صرف پڑھنے والا سادہ متن

اگر آپ <input readonly>اپنے فارم میں عناصر کو سادہ متن کے طور پر اسٹائل کرنا چاہتے ہیں، تو پہلے سے طے شدہ فارم فیلڈ اسٹائل کو ہٹانے کے لیے اس کی جگہ تبدیل کریں اور صحیح کو .form-controlمحفوظ کریں اور.form-control-plaintextmarginpadding

ای میل

پاس ورڈ

html

  <div class="mb-3 row">
    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
    <div class="col-sm-10">
      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="[email protected]">
    </div>
  </div>
  <div class="mb-3 row">
    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword">
    </div>
  </div>

html

<form class="row g-3">
  <div class="col-auto">
    <label for="staticEmail2" class="visually-hidden">Email</label>
    <input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
  </div>
  <div class="col-auto">
    <label for="inputPassword2" class="visually-hidden">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="btn btn-primary mb-3">Confirm identity</button>
  </div>
</form>

فائل ان پٹ

پہلے سے طے شدہ فائل ان پٹ کی مثال

متعدد فائلوں کے ان پٹ کی مثال

غیر فعال فائل ان پٹ کی مثال

چھوٹی فائل ان پٹ کی مثال

بڑی فائل ان پٹ کی مثال

html

<div class="mb-3">
  <label for="formFile" class="form-label">Default file input example</label>
  <input class="form-control" type="file" id="formFile">
</div>
<div class="mb-3">
  <label for="formFileMultiple" class="form-label">Multiple files input example</label>
  <input class="form-control" type="file" id="formFileMultiple" multiple>
</div>
<div class="mb-3">
  <label for="formFileDisabled" class="form-label">Disabled file input example</label>
  <input class="form-control" type="file" id="formFileDisabled" disabled>
</div>
<div class="mb-3">
  <label for="formFileSm" class="form-label">Small file input example</label>
  <input class="form-control form-control-sm" id="formFileSm" type="file">
</div>
<div>
  <label for="formFileLg" class="form-label">Large file input example</label>
  <input class="form-control form-control-lg" id="formFileLg" type="file">
</div>

رنگ

کو سیٹ کریں type="color"اور اس میں شامل .form-control-colorکریں <input>۔ heightہم فکسڈ s سیٹ کرنے اور براؤزرز کے درمیان کچھ تضادات کو اوور رائڈ کرنے کے لیے موڈیفائر کلاس کا استعمال کرتے ہیں۔

رنگ چننا

html

<label for="exampleColorInput" class="form-label">Color picker</label>
<input type="color" class="form-control form-control-color" id="exampleColorInput" value="#563d7c" title="Choose your color">

ڈیٹالسٹ

ڈیٹالسٹ آپ کو <option>s کا ایک گروپ بنانے کی اجازت دیتے ہیں جس تک رسائی حاصل کی جاسکتی ہے (اور خود بخود مکمل) <input>۔ یہ عناصر سے ملتے جلتے <select>ہیں، لیکن زیادہ مینو اسٹائل کی حدود اور اختلافات کے ساتھ آتے ہیں۔ اگرچہ زیادہ تر براؤزرز اور آپریٹنگ سسٹم میں <datalist>عناصر کے لیے کچھ سپورٹ شامل ہے، لیکن ان کا اسٹائل بہترین طور پر متضاد ہے۔

ڈیٹا لسٹ عناصر کی حمایت کے بارے میں مزید جانیں ۔

ڈیٹالسٹ مثال

html

<label for="exampleDataList" class="form-label">Datalist example</label>
<input class="form-control" list="datalistOptions" id="exampleDataList" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="San Francisco">
  <option value="New York">
  <option value="Seattle">
  <option value="Los Angeles">
  <option value="Chicago">
</datalist>

سس

متغیرات

$input-*ہمارے زیادہ تر فارم کنٹرولز (اور بٹنوں پر نہیں) پر مشترکہ ہیں۔

$input-padding-y:                       $input-btn-padding-y;
$input-padding-x:                       $input-btn-padding-x;
$input-font-family:                     $input-btn-font-family;
$input-font-size:                       $input-btn-font-size;
$input-font-weight:                     $font-weight-base;
$input-line-height:                     $input-btn-line-height;

$input-padding-y-sm:                    $input-btn-padding-y-sm;
$input-padding-x-sm:                    $input-btn-padding-x-sm;
$input-font-size-sm:                    $input-btn-font-size-sm;

$input-padding-y-lg:                    $input-btn-padding-y-lg;
$input-padding-x-lg:                    $input-btn-padding-x-lg;
$input-font-size-lg:                    $input-btn-font-size-lg;

$input-bg:                              $body-bg;
$input-disabled-color:                  null;
$input-disabled-bg:                     $gray-200;
$input-disabled-border-color:           null;

$input-color:                           $body-color;
$input-border-color:                    $gray-400;
$input-border-width:                    $input-btn-border-width;
$input-box-shadow:                      $box-shadow-inset;

$input-border-radius:                   $border-radius;
$input-border-radius-sm:                $border-radius-sm;
$input-border-radius-lg:                $border-radius-lg;

$input-focus-bg:                        $input-bg;
$input-focus-border-color:              tint-color($component-active-bg, 50%);
$input-focus-color:                     $input-color;
$input-focus-width:                     $input-btn-focus-width;
$input-focus-box-shadow:                $input-btn-focus-box-shadow;

$input-placeholder-color:               $gray-600;
$input-plaintext-color:                 $body-color;

$input-height-border:                   $input-border-width * 2;

$input-height-inner:                    add($input-line-height * 1em, $input-padding-y * 2);
$input-height-inner-half:               add($input-line-height * .5em, $input-padding-y);
$input-height-inner-quarter:            add($input-line-height * .25em, $input-padding-y * .5);

$input-height:                          add($input-line-height * 1em, add($input-padding-y * 2, $input-height-border, false));
$input-height-sm:                       add($input-line-height * 1em, add($input-padding-y-sm * 2, $input-height-border, false));
$input-height-lg:                       add($input-line-height * 1em, add($input-padding-y-lg * 2, $input-height-border, false));

$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out;

$form-color-width:                      3rem;

$form-label-*اور $form-text-*ہمارے <label>s اور .form-textجزو کے لیے ہیں۔

$form-label-margin-bottom:              .5rem;
$form-label-font-size:                  null;
$form-label-font-style:                 null;
$form-label-font-weight:                null;
$form-label-color:                      null;

$form-text-margin-top:                  .25rem;
$form-text-font-size:                   $small-font-size;
$form-text-font-style:                  null;
$form-text-font-weight:                 null;
$form-text-color:                       $text-muted;

$form-file-*فائل ان پٹ کے لیے ہیں۔

$form-file-button-color:          $input-color;
$form-file-button-bg:             $input-group-addon-bg;
$form-file-button-hover-bg:       shade-color($form-file-button-bg, 5%);