بوت اسٹرپ 5 فرم

پيلي فرم

تمامي جي سي فرم کلاس والي <input> اور <textarea> عناصر صحیح فرم نمونو ں حاصل کرسکتا آهي:

مثال

<form action="/action_page.php">
  <div class="mb-3 mt-3">
    <label for="email" class="form-label">پوسٽال پتا:</label>
    <input type="email" class="form-control" id="email" placeholder="پيشنهادي برائے پوسٽال پتا" name="email">
  </div>
  <div class="mb-3">
    <label for="pwd" class="form-label">پسوورد:</label>
    <input type="password" class="form-control" id="pwd" placeholder="پسوورد بھیجئے" name="pswd">
  </div>
  <div class="form-check mb-3">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="remember"> یاد رکھیجئے
    </label>
  </div>
  <button type="submit" class="btn btn-primary">پیشکش</button>
</form>

آپ خود چوبارو

ایک بار دیگر آپ کا دقت رکھئے، ہم نے ہر label عنصر کو .form-label کلاس میں سیٹ کئے گئے ہیں تاکہ صحیح پرتون کا اطمینان حاصل کیا جائے۔

چیک باکس مختلف علامات کا حامل ہیں۔ وہ .form-check کلاس کا محفظ عناصر کے لئے استعمال کیا جاتا ہے۔label سیٹ اپ .form-check-label کلاس، اور چیک باکس اور رادیو بٹن کو .form-check-input。

Textarea

مثال

<label for="comment">کامنٹ:</label>
<textarea class="form-control" rows="5" id="comment" name="text"></textarea>

آپ خود چوبارو

فرم سطر / گرید (سطر فرم)

اگر آپ چاہتے ہیں کہ فرم عناصر کا نمائش افقی طور پر ہو، تو .row اور .col:

مثال

<form>
  <div class="row">
    <div class="col">
      <input type="text" class="form-control" placeholder="ای میل آدرس بھیجئے" name="email">
    </div>
    <div class="col">
      <input type="password" class="form-control" placeholder="پسوورد بھیجئے" name="pswd">
    </div>
  </div>
</form>

آپ خود چوبارو

آپ کوئی جگہ میں لے جائیگا Bootstrap 网格 章节中学到有关列和行的更多内容。

فرم کنٹرول کی سائز

آپ استعمال کرسکتے ہیں .form-control-lg یا .form-control-sm تبدیل .form-control انٹرپوٹ کنٹرول کی سائز:

مثال

<input type="text" class="form-control form-control-lg" placeholder="بڑا انٹرپوٹ کنٹرول">
<input type="text" class="form-control" placeholder="عادی انٹرپوٹ کنٹرول">
<input type="text" class="form-control form-control-sm" placeholder="چھوٹا انٹرپوٹ کنٹرول">

آپ خود چوبارو

غیر استعمال شدہ اور صرف پڑھنا والا

لطفاً disabled اور/یا readonly پرزنشن استعمال کریں تاکہ انٹرپوٹ فیلڈ کو غیر استعمال شدہ بنائیں:

مثال

<input type="text" class="form-control" placeholder="عادی انٹرپوٹ کنٹرول">
<input type="text" class="form-control" placeholder="غیر استعمال شدہ انٹرپوٹ کنٹرول" disabled>
<input type="text" class="form-control" placeholder="صرف پڑھنا والا انٹرپوٹ کنٹرول" readonly>

آپ خود چوبارو

صرف متن انٹرپوٹ

لطفاً استعمال کریں .form-control-plaintext کلاس استعمال کریں تاکہ بغیر فریم کی انٹرپوٹ فیلڈ کی طرح کو سیٹ کریں، لیکن مناسب کیڈجنگ اور اندرون کیڈجنگ رکھیں:

مثال

<input type="text" class="form-control-plaintext" placeholder="صرف متن انٹرپوٹ">
<input type="text" class="form-control" placeholder="عادی انٹرپوٹ کنٹرول">

آپ خود چوبارو

چوئر سیکٹر

type="color" کی انٹرپوٹ کی طرح کو صحیح طور پر سیٹ کرنے کے لئے، لطفاً استعمال کریں .form-control-color کلاس:

مثال

<input type="color" class="form-control form-control-color" value="#CCCCCC">

آپ خود چوبارو