فارمز
فارم کنٹرول کے انداز، ترتیب کے اختیارات، اور فارم کی وسیع اقسام بنانے کے لیے حسب ضرورت اجزاء کے لیے مثالیں اور استعمال کے رہنما خطوط۔
جائزہ
بوٹسٹریپ کے فارم کنٹرول کلاسز کے ساتھ ہمارے ریبوٹ شدہ فارم اسٹائل پر پھیلتے ہیں۔ ان کلاسز کو براؤزرز اور ڈیوائسز پر زیادہ مستقل رینڈرنگ کے لیے ان کے حسب ضرورت ڈسپلے کا انتخاب کرنے کے لیے استعمال کریں۔
نئے ان پٹ کنٹرولز جیسے ای میل کی توثیق، نمبر کا انتخاب، وغیرہ سے فائدہ اٹھانے کے لیے تمام ان پٹس (مثلاً ای میل ایڈریس یا عددی معلومات کے لیے) پر ایک مناسب type
وصف استعمال کرنا یقینی بنائیں۔email
number
بوٹسٹریپ کے فارم اسٹائل کو ظاہر کرنے کے لیے یہاں ایک فوری مثال ہے۔ مطلوبہ کلاسز، فارم لے آؤٹ، اور مزید پر دستاویزات کے لیے پڑھتے رہیں۔
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1">
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
فارم کنٹرولز
متنی شکل کے کنٹرول جیسے کہ <input>
s، <select>
s، اور s — کلاس <textarea>
کے ساتھ اسٹائل کیے گئے ہیں ۔ .form-control
عام ظاہری شکل، فوکس سٹیٹ، سائزنگ اور مزید کے لیے طرزیں شامل ہیں۔
مزید اسٹائل کے لیے ہمارے حسب ضرورت فارمز کو ضرور دریافت کریں <select>
۔
<form>
<div class="form-group">
<label for="exampleFormControlInput1">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="[email protected]">
</div>
<div class="form-group">
<label for="exampleFormControlSelect1">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlSelect2">Example multiple select</label>
<select multiple class="form-control" id="exampleFormControlSelect2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>
</form>
فائل ان پٹ کے لیے، کے لیے تبدیل .form-control
کریں .form-control-file
۔
<form>
<div class="form-group">
<label for="exampleFormControlFile1">Example file input</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1">
</div>
</form>
سائز کرنا
.form-control-lg
اور جیسے کلاسز کا استعمال کرتے ہوئے اونچائیاں سیٹ کریں .form-control-sm
۔
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
<select class="form-control form-control-lg">
<option>Large select</option>
</select>
<select class="form-control">
<option>Default select</option>
</select>
<select class="form-control form-control-sm">
<option>Small select</option>
</select>
صرف پڑھو
readonly
ان پٹ کی قدر میں ترمیم کو روکنے کے لیے ان پٹ پر بولین وصف شامل کریں ۔ صرف پڑھنے کے ان پٹ ہلکے دکھائی دیتے ہیں (بالکل غیر فعال ان پٹس کی طرح)، لیکن معیاری کرسر کو برقرار رکھتے ہیں۔
<input class="form-control" type="text" placeholder="Readonly input here..." readonly>
صرف پڑھنے والا سادہ متن
اگر آپ <input readonly>
اپنے فارم میں عناصر کو سادہ متن کے طور پر اسٹائل کرنا چاہتے ہیں، .form-control-plaintext
تو پہلے سے طے شدہ فارم فیلڈ اسٹائل کو ہٹانے اور درست مارجن اور پیڈنگ کو محفوظ کرنے کے لیے کلاس کا استعمال کریں۔
<form>
<div class="form-group 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="form-group 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>
</form>
<form class="form-inline">
<div class="form-group mb-2">
<label for="staticEmail2" class="sr-only">Email</label>
<input type="text" readonly class="form-control-plaintext" id="staticEmail2" value="[email protected]">
</div>
<div class="form-group mx-sm-3 mb-2">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-primary mb-2">Confirm identity</button>
</form>
رینج ان پٹس
افقی طور پر اسکرول ایبل رینج ان پٹ کو استعمال کرکے سیٹ کریں .form-control-range
۔
<form>
<div class="form-group">
<label for="formControlRange">Example Range input</label>
<input type="range" class="form-control-range" id="formControlRange">
</div>
</form>
چیک باکس اور ریڈیو
پہلے سے طے شدہ چیک باکسز اور ریڈیوز کی مدد سے بہتر کیے جاتے ہیں .form-check
، دونوں قسم کے ان پٹ کے لیے ایک کلاس جو ان کے HTML عناصر کی ترتیب اور رویے کو بہتر بناتی ہے ۔ چیک باکسز ایک فہرست میں سے ایک یا کئی اختیارات کو منتخب کرنے کے لیے ہیں، جبکہ ریڈیو بہت سے اختیارات میں سے ایک اختیار کو منتخب کرنے کے لیے ہیں۔
غیر فعال چیک باکسز اور ریڈیو تعاون یافتہ ہیں۔ ان disabled
پٹ کی حالت کو ظاہر کرنے میں مدد کے لیے وصف ہلکے رنگ کا اطلاق کرے گا۔
چیک باکسز اور ریڈیو بٹن HTML پر مبنی فارم کی توثیق کی حمایت کرتے ہیں اور مختصر، قابل رسائی لیبل فراہم کرتے ہیں۔ اس طرح، ہمارے <input>
s اور <label>
s بہن بھائی عناصر ہیں جیسا کہ <input>
a کے اندر موجود ہے <label>
۔ یہ قدرے زیادہ لفظی ہے کیونکہ آپ کو اور سے متعلق ہونے کے لیے انتساب id
اور خصوصیات کی وضاحت کرنی ہوگی ۔for
<input>
<label>
ڈیفالٹ (اسٹیکڈ)
پہلے سے طے شدہ طور پر، کسی بھی تعداد میں چیک باکسز اور ریڈیو جو فوری طور پر بہن بھائی ہیں عمودی طور پر اسٹیک کیے جائیں گے اور مناسب طور پر اس کے ساتھ فاصلہ رکھیں .form-check
گے۔
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
<label class="form-check-label" for="defaultCheck2">
Disabled checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
<label class="form-check-label" for="exampleRadios1">
Default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
<label class="form-check-label" for="exampleRadios2">
Second default radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
<label class="form-check-label" for="exampleRadios3">
Disabled radio
</label>
</div>
لائن میں
.form-check-inline
کسی بھی میں شامل کرکے ایک ہی افقی قطار میں چیک باکسز یا ریڈیوز کو گروپ کریں .form-check
۔
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
<label class="form-check-label" for="inlineCheckbox1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
<label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
<label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
<label class="form-check-label" for="inlineRadio1">1</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
<label class="form-check-label" for="inlineRadio2">2</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3" disabled>
<label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
</div>
لیبل کے بغیر
.position-static
ان پٹس میں شامل کریں .form-check
جس میں کوئی لیبل ٹیکسٹ نہیں ہے۔ aria-label
معاون ٹیکنالوجیز (مثال کے طور پر، استعمال کرتے ہوئے ) کے لیے قابل رسائی نام کی کچھ شکل فراہم کرنا یاد رکھیں ۔
<div class="form-check">
<input class="form-check-input position-static" type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</div>
<div class="form-check">
<input class="form-check-input position-static" type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</div>
ترتیب
چونکہ بوٹسٹریپ لاگو ہوتا ہے display: block
اور width: 100%
ہمارے تقریباً تمام فارم کنٹرولز پر، فارمز بطور ڈیفالٹ عمودی طور پر اسٹیک ہوں گے۔ فی فارم کی بنیاد پر اس ترتیب کو تبدیل کرنے کے لیے اضافی کلاسز کا استعمال کیا جا سکتا ہے۔
گروپس بنائیں
.form-group
کلاس فارم میں کچھ ڈھانچہ شامل کرنے کا سب سے آسان طریقہ ہے ۔ یہ ایک لچکدار کلاس فراہم کرتا ہے جو لیبلز، کنٹرولز، اختیاری مدد کے متن، اور فارم کی توثیق کے پیغامات کی مناسب گروپ بندی کی حوصلہ افزائی کرتا ہے۔ پہلے سے طے شدہ طور پر یہ صرف لاگو ہوتا ہے margin-bottom
، لیکن یہ ضرورت کے مطابق اضافی شیلیوں کو چنتا .form-inline
ہے۔ اسے <fieldset>
s، <div>
s، یا تقریباً کسی دوسرے عنصر کے ساتھ استعمال کریں۔
<form>
<div class="form-group">
<label for="formGroupExampleInput">Example label</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Example input placeholder">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Another label</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="Another input placeholder">
</div>
</form>
فارم گرڈ
ہماری گرڈ کلاسز کا استعمال کرتے ہوئے مزید پیچیدہ فارم بنائے جا سکتے ہیں۔ ان فارم لے آؤٹس کے لیے استعمال کریں جن کے لیے متعدد کالم، مختلف چوڑائی اور اضافی سیدھ کے اختیارات درکار ہیں۔
<form>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
فارم قطار
.row
آپ ہماری معیاری گرڈ قطار کی ایک ایسی تبدیلی کے لیے بھی تبادلہ کر سکتے ہیں .form-row
جو سخت اور زیادہ کمپیکٹ لے آؤٹ کے لیے پہلے سے طے شدہ کالم گٹر کو اوور رائیڈ کرتی ہے۔
<form>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name">
</div>
</div>
</form>
گرڈ سسٹم کے ساتھ مزید پیچیدہ لے آؤٹ بھی بنائے جا سکتے ہیں۔
<form>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputEmail4">Email</label>
<input type="email" class="form-control" id="inputEmail4">
</div>
<div class="form-group col-md-6">
<label for="inputPassword4">Password</label>
<input type="password" class="form-control" id="inputPassword4">
</div>
</div>
<div class="form-group">
<label for="inputAddress">Address</label>
<input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
</div>
<div class="form-group">
<label for="inputAddress2">Address 2</label>
<input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="inputCity">City</label>
<input type="text" class="form-control" id="inputCity">
</div>
<div class="form-group col-md-4">
<label for="inputState">State</label>
<select id="inputState" class="form-control">
<option selected>Choose...</option>
<option>...</option>
</select>
</div>
<div class="form-group col-md-2">
<label for="inputZip">Zip</label>
<input type="text" class="form-control" id="inputZip">
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck">
<label class="form-check-label" for="gridCheck">
Check me out
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
افقی شکل
.row
گروپس بنانے کے لیے کلاس کو شامل کرکے اور .col-*-*
اپنے لیبلز اور کنٹرولز کی چوڑائی بتانے کے لیے کلاسز کا استعمال کرکے گرڈ کے ساتھ افقی شکلیں بنائیں ۔ .col-form-label
اپنے s میں بھی شامل کرنا یقینی بنائیں <label>
تاکہ وہ اپنے متعلقہ فارم کنٹرولز کے ساتھ عمودی طور پر مرکز میں ہوں۔
بعض اوقات، آپ کو مطلوبہ کامل سیدھ بنانے کے لیے مارجن یا پیڈنگ یوٹیلیٹیز استعمال کرنے کی ضرورت پڑ سکتی ہے۔ مثال کے طور پر، ہم نے padding-top
ٹیکسٹ بیس لائن کو بہتر طریقے سے سیدھ میں کرنے کے لیے اپنے اسٹیک شدہ ریڈیو ان پٹس کے لیبل کو ہٹا دیا ہے۔
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3">
</div>
</div>
<fieldset class="form-group row">
<legend class="col-form-label col-sm-2 float-sm-left pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
<div class="form-check disabled">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
<label class="form-check-label" for="gridRadios3">
Third disabled radio
</label>
</div>
</div>
</fieldset>
<div class="form-group row">
<div class="col-sm-10 offset-sm-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="gridCheck1">
<label class="form-check-label" for="gridCheck1">
Example checkbox
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-10">
<button type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
افقی فارم لیبل سائزنگ
اور کے سائز کو درست طریقے سے فالو کرنے کے لیے یا اپنے s یا s .col-form-label-sm
کو .col-form-label-lg
استعمال <label>
کرنا یقینی بنائیں ۔<legend>
.form-control-lg
.form-control-sm
<form>
<div class="form-group row">
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
</div>
</div>
<div class="form-group row">
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
</div>
</div>
<div class="form-group row">
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
</div>
</div>
</form>
کالم کا سائز
جیسا کہ پچھلی مثالوں میں دکھایا گیا ہے، ہمارا گرڈ سسٹم آپ کو a یا .col
کے اندر s کی کوئی بھی تعداد رکھنے کی اجازت دیتا ہے ۔ وہ دستیاب چوڑائی کو ان کے درمیان برابر تقسیم کریں گے۔ آپ کم یا زیادہ جگہ لینے کے لیے اپنے کالموں کا ایک ذیلی سیٹ بھی چن سکتے ہیں، جب کہ بقیہ کو مخصوص کالم کی کلاسوں کے ساتھ یکساں طور پر تقسیم کیا جاتا ہے ۔.row
.form-row
.col
.col-7
<form>
<div class="form-row">
<div class="col-7">
<input type="text" class="form-control" placeholder="City">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="State">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip">
</div>
</div>
</form>
خودکار سائز کرنا
.col
ذیل کی مثال عمودی طور پر مواد کو مرکز کرنے اور اس میں تبدیلی کرنے کے لیے فلیکس باکس یوٹیلیٹی کا استعمال کرتی ہے .col-auto
تاکہ آپ کے کالم صرف ضرورت کے مطابق زیادہ جگہ لے سکیں۔ دوسرے طریقے سے دیکھیں، کالم کا سائز خود مواد کی بنیاد پر ہوتا ہے۔
<form>
<div class="form-row align-items-center">
<div class="col-auto">
<label class="sr-only" for="inlineFormInput">Name</label>
<input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
</div>
<div class="col-auto">
<label class="sr-only" for="inlineFormInputGroup">Username</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
</div>
</div>
<div class="col-auto">
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="autoSizingCheck">
<label class="form-check-label" for="autoSizingCheck">
Remember me
</label>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</div>
</div>
</form>
اس کے بعد آپ اسے ایک بار پھر سائز کے ساتھ مخصوص کالم کلاسز کے ساتھ ریمکس کر سکتے ہیں۔
<form>
<div class="form-row align-items-center">
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputName">Name</label>
<input type="text" class="form-control" id="inlineFormInputName" placeholder="Jane Doe">
</div>
<div class="col-sm-3 my-1">
<label class="sr-only" for="inlineFormInputGroupUsername">Username</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>
</div>
<div class="col-auto my-1">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="autoSizingCheck2">
<label class="form-check-label" for="autoSizingCheck2">
Remember me
</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
اور بلاشبہ کسٹم فارم کنٹرولز کی حمایت کی جاتی ہے۔
<form>
<div class="form-row align-items-center">
<div class="col-auto my-1">
<label class="mr-sm-2 sr-only" for="inlineFormCustomSelect">Preference</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="col-auto my-1">
<div class="custom-control custom-checkbox mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlAutosizing">
<label class="custom-control-label" for="customControlAutosizing">Remember my preference</label>
</div>
</div>
<div class="col-auto my-1">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
ان لائن فارم
.form-inline
ایک ہی افقی قطار پر لیبلز، فارم کنٹرولز، اور بٹنوں کی سیریز کو ظاہر کرنے کے لیے کلاس کا استعمال کریں ۔ ان لائن فارمز کے اندر فارم کنٹرولز ان کی ڈیفالٹ حالتوں سے قدرے مختلف ہوتے ہیں۔
- کنٹرولز ہیں
display: flex
، کسی بھی HTML وائٹ اسپیس کو ختم کرنا اور آپ کو اسپیسنگ اور فلیکس باکس یوٹیلیٹیز کے ساتھ الائنمنٹ کنٹرول فراہم کرنے کی اجازت دیتے ہیں ۔ width: auto
بوٹسٹریپ ڈیفالٹ کو اوور رائیڈ کرنے کے لیے کنٹرولز اور ان پٹ گروپس موصول ہوتے ہیںwidth: 100%
۔- کنٹرول صرف ان ویو پورٹس میں ظاہر ہوتے ہیں جو موبائل آلات پر تنگ ویو پورٹ کے حساب سے کم از کم 576px چوڑے ہوتے ہیں ۔
آپ کو دستی طور پر اسپیسنگ یوٹیلیٹیز (جیسا کہ نیچے دکھایا گیا ہے) کے ساتھ انفرادی فارم کنٹرولز کی چوڑائی اور سیدھ میں کرنے کی ضرورت پڑسکتی ہے۔ آخر میں، ہر فارم کنٹرول کے ساتھ ہمیشہ ایک کو شامل کرنا یقینی بنائیں <label>
، یہاں تک کہ اگر آپ کو اسے غیر اسکرین ریڈر دیکھنے والوں سے چھپانے کی ضرورت ہو .sr-only
۔
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
حسب ضرورت فارم کنٹرولز اور سلیکٹس بھی معاون ہیں۔
<form class="form-inline">
<label class="my-1 mr-2" for="inlineFormCustomSelectPref">Preference</label>
<select class="custom-select my-1 mr-sm-2" id="inlineFormCustomSelectPref">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-checkbox my-1 mr-sm-2">
<input type="checkbox" class="custom-control-input" id="customControlInline">
<label class="custom-control-label" for="customControlInline">Remember my preference</label>
</div>
<button type="submit" class="btn btn-primary my-1">Submit</button>
</form>
پوشیدہ لیبلز کے متبادل
اگر آپ ہر ان پٹ کے لیے لیبل شامل نہیں کرتے ہیں تو معاون ٹیکنالوجیز جیسے کہ اسکرین ریڈرز کو آپ کے فارمز میں پریشانی کا سامنا کرنا پڑے گا۔ ان ان لائن فارمز کے لیے، آپ .sr-only
کلاس کا استعمال کرتے ہوئے لیبلز کو چھپا سکتے ہیں۔ معاون ٹیکنالوجیز کے لیے لیبل فراہم کرنے کے مزید متبادل طریقے ہیں، جیسے کہ aria-label
، aria-labelledby
یا title
وصف۔ اگر ان میں سے کوئی بھی موجود نہیں ہے، تو معاون ٹیکنالوجیز اس placeholder
وصف کو استعمال کرنے کا سہارا لے سکتی ہیں، اگر موجود ہوں، لیکن یاد رکھیں کہ placeholder
لیبلنگ کے دیگر طریقوں کے متبادل کے طور پر استعمال کی سفارش نہیں کی جاتی ہے۔
مدد کا متن
فارمز میں بلاک لیول ہیلپ ٹیکسٹ (پہلے v3 .form-text
کے نام ��ے جانا جاتا تھا) کا استعمال کرتے ہوئے بنایا جا سکتا ہے۔ .help-block
ان لائن ہیلپ ٹیکسٹ کو کسی بھی ان لائن ایچ ٹی ایم ایل ایلیمنٹ اور یوٹیلیٹی کلاسز جیسے استعمال کرتے ہوئے لچکدار طریقے سے لاگو کیا جا سکتا ہے .text-muted
۔
مدد کے متن کو فارم کنٹرولز کے ساتھ منسلک کرنا
مدد کا متن واضح طور پر اس فارم کنٹرول کے ساتھ منسلک ہونا چاہیے جس کا تعلق aria-describedby
انتساب کے استعمال سے ہے۔ یہ اس بات کو یقینی بنائے گا کہ معاون ٹیکنالوجیز — جیسے کہ اسکرین ریڈرز — اس مدد کے متن کا اعلان کریں گے جب صارف توجہ مرکوز کرے گا یا کنٹرول میں داخل ہوگا۔
مدد کے متن کے نیچے ان پٹ کو کے ساتھ اسٹائل کیا جاسکتا ہے .form-text
۔ اس کلاس میں display: block
مندرجہ بالا ان پٹس سے آسان وقفہ کاری کے لیے کچھ ٹاپ مارجن شامل اور شامل کیا جاتا ہے۔
<label for="inputPassword5">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<small id="passwordHelpBlock" class="form-text text-muted">
Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</small>
ان لائن ٹیکسٹ کسی بھی عام ان لائن HTML عنصر کو استعمال کر سکتا ہے (خواہ وہ ایک <small>
, <span>
یا کچھ اور ہو) جس میں یوٹیلیٹی کلاس سے زیادہ کچھ نہیں ہے۔
<form class="form-inline">
<div class="form-group">
<label for="inputPassword6">Password</label>
<input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline">
<small id="passwordHelpInline" class="text-muted">
Must be 8-20 characters long.
</small>
</div>
</form>
غیر فعال فارم
شامل کریں۔disabled
صارف کے تعاملات کو روکنے اور اسے ہلکا دکھانے کے لیے ان پٹ پر بولین وصف
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
تمام کنٹرولز کو غیر فعال disabled
کرنے کے لیے a میں وصف شامل کریں ۔<fieldset>
<form>
<fieldset disabled>
<legend>Disabled fieldset example</legend>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
<label class="form-check-label" for="disabledFieldsetCheck">
Can't check this
</label>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>
اینکرز کے ساتھ انتباہ
براؤزرز تمام مقامی فارم کنٹرولز ( <input>
, <select>
اور <button>
عناصر) کو ایک کے اندر <fieldset disabled>
غیر فعال سمجھتے ہیں، ان پر کی بورڈ اور ماؤس کے تعامل کو روکتے ہیں۔
تاہم، اگر آپ کے فارم میں حسب ضرورت بٹن نما عناصر بھی شامل ہیں جیسے کہ <a ... class="btn btn-*">
، ان کو صرف کا ایک انداز دیا جائے گا pointer-events: none
۔ جیسا کہ بٹنوں کے لیے غیر فعال حالت کے بارے میں سیکشن میں بتایا گیا ہے (اور خاص طور پر اینکر عناصر کے لیے ذیلی سیکشن میں)، یہ CSS پراپرٹی ابھی تک معیاری نہیں ہے اور انٹرنیٹ ایکسپلورر 10 میں مکمل طور پر تعاون یافتہ نہیں ہے۔ اینکر پر مبنی کنٹرولز اب بھی ہوں گے۔ کی بورڈ کا استعمال کرتے ہوئے توجہ مرکوز کرنے کے قابل اور قابل عمل۔ آپ کو ان کنٹرولز کو tabindex="-1"
فوکس حاصل کرنے سے روکنے اور aria-disabled="disabled"
ان کی حالت کو معاون ٹیکنالوجیز کی طرف اشارہ کرنے کے لیے شامل کر کے دستی طور پر ان میں ترمیم کرنی چاہیے۔
کراس براؤزر مطابقت
جبکہ بوٹسٹریپ ان اسٹائلز کو تمام براؤزرز میں لاگو کرے گا، انٹرنیٹ ایکسپلورر 11 اور اس سے نیچے والے disabled
انتساب کو مکمل طور پر سپورٹ نہیں کرتے <fieldset>
۔ ان براؤزرز میں فیلڈ سیٹ کو غیر فعال کرنے کے لیے حسب ضرورت جاوا اسکرپٹ استعمال کریں۔
توثیق
HTML5 فارم کی توثیق کے ساتھ اپنے صارفین کو قابل قدر، قابل عمل تاثرات فراہم کریں- ہمارے تمام تعاون یافتہ براؤزرز میں دستیاب ہے ۔ براؤزر کے پہلے سے طے شدہ توثیق کے تاثرات میں سے انتخاب کریں، یا ہماری بلٹ ان کلاسز اور سٹارٹر JavaScript کے ساتھ حسب ضرورت پیغامات کو نافذ کریں۔
یہ کیسے کام کرتا ہے
یہاں یہ ہے کہ بوٹسٹریپ کے ساتھ فارم کی توثیق کیسے کام کرتی ہے:
- HTML فارم کی توثیق کا اطلاق CSS کی دو سیڈو کلاسز،
:invalid
اور:valid
. یہ , اور عناصر پر لاگو<input>
ہوتا<select>
ہے<textarea>
۔ - بوٹسٹریپ اسکوپ
:invalid
اور:valid
اسٹائل کو پیرنٹ.was-validated
کلاس میں دیتا ہے، جو عام طور پر پر لاگو ہوتا ہے<form>
۔ بصورت دیگر، کوئی بھی مطلوبہ فیلڈ بغیر کسی قدر کے صفحہ لوڈ پر غلط ظاہر ہوتا ہے۔ اس طرح، آپ انتخاب کر سکتے ہیں کہ انہیں کب چالو کرنا ہے (عام طور پر فارم جمع کرانے کی کوشش کے بعد)۔ - فارم کی ظاہری شکل کو دوبارہ ترتیب دینے کے لیے (مثال کے طور پر، AJAX کا استعمال کرتے ہوئے متحرک فارم جمع کرانے کی صورت میں)، جمع کرانے کے بعد دوبارہ
.was-validated
سے کلاس کو ہٹا دیں۔<form>
- فال بیک کے طور پر،
.is-invalid
اور سرور سائڈ کی توثیق.is-valid
کے لیے سیوڈو کلاسز کے بجائے کلاسز کا استعمال کیا جا سکتا ہے ۔ انہیں والدین کی کلاس کی ضرورت نہیں ہے ۔.was-validated
- CSS کے کام کرنے کے طریقے میں رکاوٹوں کی وجہ سے، ہم (فی الحال)
<label>
اپنی مرضی کے مطابق JavaScript کی مدد کے بغیر DOM میں فارم کنٹرول سے پہلے آنے والے اسٹائلز کو لاگو نہیں کر سکتے۔ - تمام جدید براؤزرز Constraint validation API کی حمایت کرتے ہیں ، فارم کنٹرولز کی توثیق کرنے کے لیے JavaScript طریقوں کی ایک سیریز۔
- تاثرات کے پیغامات براؤزر ڈیفالٹس (ہر براؤزر کے لیے مختلف، اور CSS کے ذریعے غیر اسٹائلبل) یا اضافی HTML اور CSS کے ساتھ ہماری حسب ضرورت فیڈ بیک اسٹائلز کا استعمال کر سکتے ہیں۔
setCustomValidity
آپ JavaScript میں اپنی مرضی کے مطابق درست پیغامات فراہم کر سکتے ہیں ۔
اس کو ذہن میں رکھتے ہوئے، ہمارے حسب ضرورت فارم کی توثیق کے انداز، اختیاری سرور سائڈ کلاسز، اور براؤزر ڈیفالٹس کے لیے درج ذیل ڈیمو پر غور کریں۔
اپنی مرضی کے انداز
حسب ضرورت بوٹسٹریپ فارم کی توثیق کے پیغامات کے لیے، آپ novalidate
کو اپنے میں بولین وصف شامل کرنے کی ضرورت ہوگی <form>
۔ یہ براؤزر کے ڈیفالٹ فیڈ بیک ٹول ٹپس کو غیر فعال کر دیتا ہے، لیکن پھر بھی JavaScript میں فارم کی توثیق APIs تک رسائی فراہم کرتا ہے۔ ذیل میں فارم جمع کرانے کی کوشش کریں؛ ہمارا JavaScript جمع کرانے کے بٹن کو روکے گا اور آپ کو تاثرات فراہم کرے گا۔ جمع کرانے کی کوشش کرتے وقت، آپ اپنے فارم کنٹرولز پر لاگو کردہ :invalid
اور طرزیں دیکھیں گے۔:valid
حسب ضرورت فیڈ بیک اسٹائلز حسب ضرورت رنگ، بارڈرز، فوکس اسٹائلز، اور بیک گراؤنڈ آئیکنز کو تاثرات کو بہتر طریقے سے پہنچانے کے لیے لاگو کرتے ہیں۔ s کے لیے پس منظر کی شبیہیں <select>
صرف کے ساتھ دستیاب ہیں .custom-select
، اور نہیں .form-control
۔
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom01">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom04">State</label>
<select class="custom-select" id="validationCustom04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationCustom05">Zip</label>
<input type="text" class="form-control" id="validationCustom05" required>
<div class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
براؤزر ڈیفالٹس
اپنی مرضی کے مطابق توثیق کے تاثرات کے پیغامات یا فارم کے طرز عمل کو تبدیل کرنے کے لیے جاوا اسکرپٹ لکھنے میں دلچسپی نہیں ہے؟ سب اچھا ہے، آپ براؤزر ڈیفالٹس استعمال کر سکتے ہیں۔ ذیل میں فارم جمع کرانے کی کوشش کریں۔ آپ کے براؤزر اور OS پر منحصر ہے، آپ کو تاثرات کا تھوڑا سا مختلف انداز نظر آئے گا۔
اگرچہ ان فیڈ بیک اسٹائلز کو CSS کے ساتھ اسٹائل نہیں کیا جا سکتا، پھر بھی آپ JavaScript کے ذریعے فیڈ بیک ٹیکسٹ کو اپنی مرضی کے مطابق بنا سکتے ہیں۔
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault01">First name</label>
<input type="text" class="form-control" id="validationDefault01" value="Mark" required>
</div>
<div class="col-md-6 mb-3">
<label for="validationDefault02">Last name</label>
<input type="text" class="form-control" id="validationDefault02" value="Otto" required>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationDefault03">City</label>
<input type="text" class="form-control" id="validationDefault03" required>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault04">State</label>
<select class="custom-select" id="validationDefault04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3 mb-3">
<label for="validationDefault05">Zip</label>
<input type="text" class="form-control" id="validationDefault05" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>
<label class="form-check-label" for="invalidCheck2">
Agree to terms and conditions
</label>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
سرور سائیڈ
ہم کلائنٹ سائیڈ کی توثیق کا استعمال کرنے کی تجویز کرتے ہیں، لیکن اگر آپ کو سرور سائیڈ کی توثیق کی ضرورت ہو تو، آپ اور کے ساتھ غلط اور درست فارم فیلڈز کی نشاندہی کر سکتے .is-invalid
ہیں .is-valid
۔ نوٹ کریں کہ .invalid-feedback
ان کلاسوں کے ساتھ بھی تعاون کیا جاتا ہے۔
غلط فیلڈز کے لیے، اس بات کو یقینی بنائیں کہ غلط فیڈ بیک/غلطی کا پیغام متعلقہ فارم فیلڈ سے منسلک ہے aria-describedby
۔ یہ وصف ایک سے زیادہ id
حوالہ دینے کی اجازت دیتا ہے، اگر فیلڈ پہلے سے ہی اضافی فارم ٹیکسٹ کی طرف اشارہ کرتا ہے۔
<form>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer01">First name</label>
<input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationServer02">Last name</label>
<input type="text" class="form-control is-valid" id="validationServer02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
<input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
<div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
<select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
<input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
<div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
<div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
معاون عناصر
درج ذیل فارم کنٹرولز اور اجزاء کے لیے توثیق کی طرزیں دستیاب ہیں:
<input>
s اور<textarea>
s کے ساتھ.form-control
<select>
s کے ساتھ.form-control
یا.custom-select
.form-check
s.custom-checkbox
s اور.custom-radio
s.custom-file
<form class="was-validated">
<div class="mb-3">
<label for="validationTextarea">Textarea</label>
<textarea class="form-control is-invalid" id="validationTextarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
Please enter a message in the textarea.
</div>
</div>
<div class="custom-control custom-checkbox mb-3">
<input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
<label class="custom-control-label" for="customControlValidation1">Check this custom checkbox</label>
<div class="invalid-feedback">Example invalid feedback text</div>
</div>
<div class="custom-control custom-radio">
<input type="radio" class="custom-control-input" id="customControlValidation2" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation2">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio mb-3">
<input type="radio" class="custom-control-input" id="customControlValidation3" name="radio-stacked" required>
<label class="custom-control-label" for="customControlValidation3">Or toggle this other custom radio</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="custom-select" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">Example invalid custom select feedback</div>
</div>
<div class="custom-file mb-3">
<input type="file" class="custom-file-input" id="validatedCustomFile" required>
<label class="custom-file-label" for="validatedCustomFile">Choose file...</label>
<div class="invalid-feedback">Example invalid custom file feedback</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<span class="input-group-text" id="validatedInputGroupPrepend">@</span>
</div>
<input type="text" class="form-control is-invalid" aria-describedby="validatedInputGroupPrepend" required>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="mb-3">
<div class="input-group is-invalid">
<div class="input-group-prepend">
<label class="input-group-text" for="validatedInputGroupSelect">Options</label>
</div>
<select class="custom-select" id="validatedInputGroupSelect" required>
<option value="">Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</div>
<div class="input-group is-invalid">
<div class="custom-file">
<input type="file" class="custom-file-input" id="validatedInputGroupCustomFile" required>
<label class="custom-file-label" for="validatedInputGroupCustomFile">Choose file...</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<div class="invalid-feedback">
Example invalid input group feedback
</div>
</form>
ٹول ٹپس
اگر آپ کا فارم لے آؤٹ اس کی اجازت دیتا ہے، تو آپ ایک اسٹائل شدہ ٹول ٹپ میں توثیق کے تاثرات ظاہر کرنے .{valid|invalid}-feedback
کے لیے کلاسوں کے لیے کلاسز کو تبدیل کر سکتے ہیں۔ ٹول ٹپ پوزیشننگ کے لیے اس کے .{valid|invalid}-tooltip
ساتھ والدین کا ہونا یقینی بنائیں ۔ position: relative
ذیل کی مثال میں، ہماری کالم کلاسوں میں یہ پہلے سے موجود ہے، لیکن آپ کے پروجیکٹ کو متبادل سیٹ اپ کی ضرورت پڑ سکتی ہے۔
<form class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip01">First name</label>
<input type="text" class="form-control" id="validationTooltip01" value="Mark" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
<div class="col-md-6 mb-3">
<label for="validationTooltip02">Last name</label>
<input type="text" class="form-control" id="validationTooltip02" value="Otto" required>
<div class="valid-tooltip">
Looks good!
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationTooltip03">City</label>
<input type="text" class="form-control" id="validationTooltip03" required>
<div class="invalid-tooltip">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip04">State</label>
<select class="custom-select" id="validationTooltip04" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationTooltip05">Zip</label>
<input type="text" class="form-control" id="validationTooltip05" required>
<div class="invalid-tooltip">
Please provide a valid zip.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
تخصیص کرنا
$form-validation-states
توثیق ریاستوں کو نقشہ کے ساتھ ساس کے ذریعے اپنی مرضی کے مطابق بنایا جا سکتا ہے ۔ ہماری _variables.scss
فائل میں موجود، یہ ساس نقشہ ڈیفالٹ valid
/ invalid
توثیق کی حالتوں کو بنانے کے لیے لوپ کر دیا گیا ہے۔ ہر ریاست کے رنگ اور آئیکن کو اپنی مرضی کے مطابق بنانے کے لیے ایک نیسٹڈ نقشہ شامل ہے۔ اگرچہ کوئی دوسری ریاستیں براؤزرز کے ذریعے سپورٹ نہیں کرتی ہیں، لیکن وہ لوگ جو حسب ضرورت اسٹائلز استعمال کرتے ہیں وہ آسانی سے زیادہ پیچیدہ فارم فیڈ بیک شامل کر سکتے ہیں۔
براہ کرم نوٹ کریں کہ ہم form-validation-state
مکسین میں ترمیم کیے بغیر ان اقدار کو حسب ضرورت بنانے کی سفارش نہیں کرتے ہیں۔
// Sass map from `_variables.scss`
// Override this and recompile your Sass to generate different states
$form-validation-states: map-merge(
(
"valid": (
"color": $form-feedback-valid-color,
"icon": $form-feedback-icon-valid
),
"invalid": (
"color": $form-feedback-invalid-color,
"icon": $form-feedback-icon-invalid
)
),
$form-validation-states
);
// Loop from `_forms.scss`
// Any modifications to the above Sass map will be reflected in your compiled
// CSS via this loop.
@each $state, $data in $form-validation-states {
@include form-validation-state($state, map-get($data, color), map-get($data, icon));
}
ان پٹ گروپ کی توثیق
توثیق کے ساتھ ان پٹ گروپ کے اندر کن عناصر کو گول کونوں کی ضرورت ہے اس کا پتہ لگانے کے لیے، ایک ان پٹ گروپ کو ایک اضافی .has-validation
کلاس کی ضرورت ہوتی ہے۔
<div class="input-group has-validation">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
حسب ضرورت فارم
مزید حسب ضرورت اور کراس براؤزر کی مستقل مزاجی کے لیے، براؤزر کے ڈیفالٹس کو تبدیل کرنے کے لیے ہمارے مکمل طور پر حسب ضرورت فارم عناصر کا استعمال کریں۔ وہ سیمنٹک اور قابل رسائی مارک اپ کے اوپر بنائے گئے ہیں، لہذا یہ کسی بھی ڈیفالٹ فارم کنٹرول کے لیے ٹھوس متبادل ہیں۔
چیک باکس اور ریڈیو
ہمارا حسب ضرورت کنٹرول بنانے کے لیے ہر چیک باکس اور ریڈیو <input>
اور <label>
جوڑی کو ایک میں لپیٹا جاتا ہے ۔ <div>
ساختی طور پر، یہ وہی طریقہ ہے جو ہمارے پہلے سے طے شدہ .form-check
ہے۔
ہم اپنی تمام ریاستوں کے لیے سِبلنگ سلیکٹر ( ~
) کا استعمال کرتے ہیں — جیسے — اپنے حسب ضرورت فارم اشارے کو صحیح طریقے سے اسٹائل کرنے کے لیے۔ جب کلاس کے ساتھ ملایا جاتا ہے، تو ہم ہر آئٹم کی حالت کی بنیاد پر متن کو اسٹائل بھی کر سکتے ہیں ۔<input>
:checked
.custom-control-label
<input>
ہم پہلے سے طے شدہ کو چھپاتے ہیں اور اس کے <input>
ساتھ اس کی جگہ پر ایک نیا کسٹم فارم انڈیکیٹر بنانے opacity
کے لیے استعمال کرتے ہیں ۔ بدقسمتی سے ہم صرف اس وجہ سے اپنی مرضی کے مطابق نہیں بنا سکتے کیونکہ CSS اس عنصر پر کام نہیں کرتا ہے۔.custom-control-label
::before
::after
<input>
content
چیک شدہ ریاستوں میں، ہم Open Iconic سے base64 ایمبیڈڈ SVG آئیکنز استعمال کرتے ہیں ۔ یہ ہمیں براؤزرز اور آلات پر اسٹائل اور پوزیشننگ کے لیے بہترین کنٹرول فراہم کرتا ہے۔
چیک باکسز
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
جب جاوا اسکرپٹ کے ذریعے دستی طور پر سیٹ کیا جاتا ہے تو حسب ضرورت چیک باکسز سیوڈو کلاس کو بھی استعمال کر سکتے ہیں :indeterminate
(اس کی وضاحت کے لیے کوئی HTML وصف دستیاب نہیں ہے)۔
اگر آپ jQuery استعمال کر رہے ہیں تو، کچھ اس طرح کافی ہونا چاہئے:
$('.your-checkbox').prop('indeterminate', true)
ریڈیوز
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
لائن میں
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline1" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="customRadioInline2" name="customRadioInline" class="custom-control-input">
<label class="custom-control-label" for="customRadioInline2">Or toggle this other custom radio</label>
</div>
معذور
حسب ضرورت چیک باکسز اور ریڈیوز کو بھی غیر فعال کیا جا سکتا ہے۔ disabled
میں بولین وصف شامل کریں <input>
اور حسب ضرورت اشارے اور لیبل کی تفصیل خود بخود اسٹائل ہوجائے گی۔
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheckDisabled1" disabled>
<label class="custom-control-label" for="customCheckDisabled1">Check this custom checkbox</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" name="radioDisabled" id="customRadioDisabled2" class="custom-control-input" disabled>
<label class="custom-control-label" for="customRadioDisabled2">Toggle this custom radio</label>
</div>
سوئچز
ایک سوئچ میں حسب ضرورت چیک باکس کا مارک اپ ہوتا ہے لیکن .custom-switch
ٹوگل سوئچ رینڈر کرنے کے لیے کلاس کا استعمال کرتا ہے۔ سوئچ بھی disabled
خصوصیت کی حمایت کرتے ہیں۔
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" id="customSwitch1">
<label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>
<div class="custom-control custom-switch">
<input type="checkbox" class="custom-control-input" disabled id="customSwitch2">
<label class="custom-control-label" for="customSwitch2">Disabled switch element</label>
</div>
مینو منتخب کریں۔
اپنی مرضی کے مینو کو اپنی مرضی کے انداز کو متحرک کرنے کے <select>
لیے صرف ایک حسب ضرورت کلاس کی ضرورت ہوتی ہے۔ .custom-select
حسب ضرورت طرزیں 'کی ابتدائی ظاہری شکل تک محدود ہیں اور براؤزر کی حدود کی وجہ سے s <select>
میں ترمیم نہیں کر سکتیں ۔<option>
<select class="custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
آپ ہمارے اسی سائز کے ٹیکسٹ ان پٹس سے ملنے کے لیے چھوٹے اور بڑے حسب ضرورت انتخاب میں سے بھی انتخاب کر سکتے ہیں۔
<select class="custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
اس multiple
وصف کی بھی حمایت کی جاتی ہے:
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
جیسا کہ size
صفت ہے:
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
رینج
کے ساتھ حسب ضرورت <input type="range">
کنٹرول بنائیں .custom-range
۔ ٹریک (پس منظر) اور انگوٹھا (قدر) دونوں براؤزرز میں ایک جیسے ظاہر ہونے کے لیے اسٹائل کیے گئے ہیں۔ چونکہ صرف IE اور Firefox اپنے ٹریک کو انگوٹھے کے بائیں یا دائیں طرف سے "پُر" کرنے کی حمایت کرتے ہیں تاکہ بصری طور پر پیشرفت کی نشاندہی کی جاسکے، ہم فی الحال اس کی حمایت نہیں کرتے ہیں۔
<label for="customRange1">Example range</label>
<input type="range" class="custom-range" id="customRange1">
رینج ان پٹ میں بالترتیب min
اور max
— 0
اور کے لیے مضمر قدریں ہوتی ہیں۔ آپ اور اوصاف 100
استعمال کرنے والوں کے لیے نئی قدریں بتا سکتے ہیں ۔min
max
<label for="customRange2">Example range</label>
<input type="range" class="custom-range" min="0" max="5" id="customRange2">
پہلے سے طے شدہ طور پر، رینج ان پٹ "اسنیپ" کو عددی قدروں میں لے جاتی ہے۔ اسے تبدیل کرنے کے لیے، آپ ایک step
قدر کی وضاحت کر سکتے ہیں۔ ذیل کی مثال میں، ہم استعمال کرکے اقدامات کی تعداد کو دوگنا کرتے step="0.5"
ہیں۔
<label for="customRange3">Example range</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="customRange3">
فائل براؤزر
فائل کا ان پٹ سب سے زیادہ گہرا ہے اور اس کے لیے اضافی جاوا اسکرپٹ کی ضرورت ہوتی ہے اگر آپ انہیں فنکشنل Choose فائل کے ساتھ جوڑنا چاہتے ہیں… اور فائل کے نام کے متن کو منتخب کریں۔
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<input>
ہم پہلے سے طے شدہ فائل کو چھپاتے ہیں opacity
اور اس کے بجائے اسٹائل کرتے ہیں <label>
۔ بٹن تیار کیا گیا ہے اور اس کے ساتھ پوزیشن میں ہے ::after
۔ آخر میں، ہم ارد گرد کے مواد کے لیے مناسب وقفہ کے لیے a width
اور height
on کا اعلان کرتے ہیں۔<input>
SCSS کے ساتھ تاروں کا ترجمہ یا تخصیص کرنا
:lang()
سیوڈو کلاس کا استعمال "براؤز" متن کے دوسری زبانوں میں ترجمہ کرنے کے لیے کیا جاتا ہے۔ متعلقہ لینگویج ٹیگ اور لوکلائزڈ سٹرنگز $custom-file-text
کے ساتھ ساس متغیر میں اندراجات کو اوور رائڈ یا شامل کریں ۔ انگریزی تاروں کو اسی طرح اپنی مرضی کے مطابق کیا جا سکتا ہے. مثال کے طور پر، یہاں یہ ہے کہ کوئی ہسپانوی ترجمہ کیسے شامل کر سکتا ہے (ہسپانوی زبان کا کوڈ ہے ):es
$custom-file-text: (
en: "Browse",
es: "Elegir"
);
lang(es)
ہسپانوی ترجمے کے لیے حسب ضرورت فائل ان پٹ پر عمل میں یہ ہے :
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLang" lang="es">
<label class="custom-file-label" for="customFileLang">Seleccionar Archivo</label>
</div>
آپ کو اپنے دستاویز کی زبان (یا اس کے ذیلی درخت) کو درست طریقے سے ترتیب دینے کی ضرورت ہوگی تاکہ صحیح متن دکھایا جاسکے۔ یہ عنصر یا HTTP ہیڈر پر موجود lang
انتساب کا استعمال کرتے ہوئے دوسرے طریقوں کے ساتھ کیا جا سکتا ہے۔<html>
Content-Language
HTML کے ساتھ تاروں کا ترجمہ یا تخصیص کرنا
بوٹسٹریپ ایچ ٹی ایم ایل میں "براؤز" ٹیکسٹ کو اس data-browse
وصف کے ساتھ ترجمہ کرنے کا ایک طریقہ بھی فراہم کرتا ہے جسے حسب ضرورت ان پٹ لیبل میں شامل کیا جا سکتا ہے (ڈچ میں مثال):
<div class="custom-file">
<input type="file" class="custom-file-input" id="customFileLangHTML">
<label class="custom-file-label" for="customFileLangHTML" data-browse="Bestand kiezen">Voeg je document toe</label>
</div>