প্ৰপত্ৰসমূহ

অভাৰভিউ

Bootstrap ৰ ফৰ্ম নিয়ন্ত্ৰণসমূহে আমাৰ পুনৰাৰম্ভ কৰা ফৰ্ম শৈলীসমূহত শ্ৰেণীসমূহৰ সৈতে প্ৰসাৰিত কৰে। ব্ৰাউজাৰ আৰু ডিভাইচসমূহৰ মাজত এটা অধিক সুসংগত ৰেণ্ডাৰৰ বাবে সিহতৰ স্বনিৰ্বাচিত প্ৰদৰ্শনসমূহত বিকল্প কৰিবলে এই শ্ৰেণীসমূহ ব্যৱহাৰ কৰক।

typeসকলো ইনপুটসমূহত এটা উপযুক্ত বৈশিষ্ট্য ব্যৱহাৰ কৰাটো নিশ্চিত কৰক (যেনে, emailইমেইল ঠিকনাৰ numberবাবে বা সংখ্যাগত তথ্যৰ বাবে) নতুন ইনপুট নিয়ন্ত্ৰণসমূহৰ সুবিধা ল'বলৈ যেনে ইমেইল সত্যাপন, সংখ্যা নিৰ্ব্বাচন, আৰু অধিক।

ইয়াত Bootstrap ৰ ফৰ্ম শৈলীসমূহ প্ৰদৰ্শন কৰিবলে এটা দ্ৰুত উদাহৰণ দিয়া হৈছে। প্ৰয়োজনীয় শ্ৰেণীসমূহ, প্ৰপত্ৰ বিন্যাস, আৰু অধিক ৰ ওপৰত নথিপত্ৰৰ বাবে পঢ়ি থাকিব।

<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
  <div class="mb-3 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>

লিখনী গঠন কৰক

ব্লক-স্তৰৰ বা ইনলাইন-স্তৰৰ প্ৰপত্ৰ লিখনী ব্যৱহাৰ কৰি সৃষ্টি কৰিব পাৰি .form-text।

ইনপুটসমূহৰ তলৰ প্ৰপত্ৰ লিখনীক ৰ সৈতে শৈলী কৰিব পাৰি .form-text। যদি এটা ব্লক-স্তৰৰ উপাদান ব্যৱহাৰ কৰা হ'ব, ওপৰৰ ইনপুটসমূহৰ পৰা সহজে ব্যৱধানৰ বাবে এটা ওপৰৰ মাৰ্জিন যোগ কৰা হয়।

<label for="inputPassword5" class="form-label">Password</label>
<input type="password" id="inputPassword5" class="form-control" aria-describedby="passwordHelpBlock">
<div id="passwordHelpBlock" class="form-text">
  Your password must be 8-20 characters long, contain letters and numbers, and must not contain spaces, special characters, or emoji.
</div>

ইনলাইন লিখনীয়ে যিকোনো সাধাৰণ ইনলাইন HTML উপাদান ব্যৱহাৰ কৰিব পাৰে (সেয়া এটা <span>, , বা আন কিবা হওক) শ্ৰেণীৰ <small>বাহিৰে আন একোৰে ।.form-text

<div class="row g-3 align-items-center">
  <div class="col-auto">
    <label for="inputPassword6" class="col-form-label">Password</label>
  </div>
  <div class="col-auto">
    <input type="password" id="inputPassword6" class="form-control" aria-describedby="passwordHelpInline">
  </div>
  <div class="col-auto">
    <span id="passwordHelpInline" class="form-text">
      Must be 8-20 characters long.
    </span>
  </div>
</div>

অক্ষম প্ৰ-পত্ৰসমূহ

disabledব্যৱহাৰকাৰীৰ পাৰস্পৰিক ক্ৰিয়াসমূহ প্ৰতিৰোধ কৰিবলে আৰু ইয়াক লঘু দেখাবলৈ এটা ইনপুটত বুলিয়ান বৈশিষ্ট্য যোগ কৰক ।

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

ভিতৰৰ সকলো নিয়ন্ত্ৰণ নিষ্ক্ৰিয় কৰিবলে disableda ত বৈশিষ্ট্য যোগ কৰক । <fieldset>ব্ৰাউজাৰসমূহে a ৰ ভিতৰত সকলো স্থানীয় ফৰ্ম নিয়ন্ত্ৰণ ( <input>, <select>, আৰু <button>উপাদানসমূহ) <fieldset disabled>নিষ্ক্ৰিয় হিচাপে গণ্য কৰে, সিহতত কিবৰ্ড আৰু মাউছ দুয়োটা পাৰস্পৰিক ক্ৰিয়া প্ৰতিৰোধ কৰি।

কিন্তু, যদি আপোনাৰ প্ৰপত্ৰত স্বনিৰ্বাচিত বুটামৰ দৰে উপাদানসমূহো অন্তৰ্ভুক্ত কৰা হৈছে যেনে <a class="btn btn-*">...</a>, এইবোৰক কেৱল ৰ এটা শৈলী দিয়া হ'ব pointer-events: none, অৰ্থাৎ সিহত এতিয়াও কিবৰ্ড ব্যৱহাৰ কৰি ফোকাচযোগ্য আৰু কাৰ্য্যক্ষম। এই ক্ষেত্ৰত, আপুনি এই নিয়ন্ত্ৰণসমূহ যোগ কৰি হস্তচালিতভাৱে পৰিবৰ্তন কৰিব লাগিব tabindex="-1"সিহতক ফ'কাচ গ্ৰহণ কৰাত বাধা দিবলে আৰু aria-disabled="disabled"সহায়ক প্ৰযুক্তিসমূহলে সিহতৰ অৱস্থা সংকেত কৰিবলে।

<form>
  <fieldset disabled>
    <legend>Disabled fieldset example</legend>
    <div class="mb-3">
      <label for="disabledTextInput" class="form-label">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="mb-3">
      <label for="disabledSelect" class="form-label">Disabled select menu</label>
      <select id="disabledSelect" class="form-select">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="mb-3">
      <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>

অভিগম্যতা

সকলো প্ৰপত্ৰ নিয়ন্ত্ৰণৰ এটা উপযুক্ত সুলভ নাম থকাটো নিশ্চিত কৰক যাতে ইয়াৰ উদ্দেশ্য সহায়ক প্ৰযুক্তিৰ ব্যৱহাৰকাৰীসকলক প্ৰকাশ কৰিব পৰা যায়। ইয়াক লাভ কৰাৰ আটাইতকৈ সহজ উপায় হ'ল এটা <label>উপাদান ব্যৱহাৰ কৰা, বা—বুটামৰ ক্ষেত্ৰত— <button>...</button>সামগ্ৰীৰ অংশ হিচাপে পৰ্যাপ্ত বৰ্ণনাত্মক লিখনী অন্তৰ্ভুক্ত কৰা।

এনে পৰিস্থিতিৰ বাবে য'ত এটা দৃশ্যমান বা উপযুক্ত লিখনী বিষয়বস্তু অন্তৰ্ভুক্ত কৰা সম্ভৱ নহয় <label>, এতিয়াও এটা অভিগম্য নাম প্ৰদান কৰাৰ বিকল্প উপায় আছে, যেনে:

• <label>.visually-hiddenশ্ৰেণী ব্যৱহাৰ কৰি লুকুৱাই ৰখা উপাদানসমূহ
• ব্যৱহাৰ কৰি এটা লেবেল হিচাপে কাম কৰিব পৰা এটা বৰ্ত্তমানৰ উপাদানলৈ আঙুলিয়াই দিয়াaria-labelledby
• এটা titleবৈশিষ্ট্য প্ৰদান কৰা
• ব্যৱহাৰ কৰি এটা উপাদানত অভিগমযোগ্য নাম স্পষ্টভাৱে সংহতি কৰকaria-label

যদি এইবোৰৰ কোনোটোৱেই উপস্থিত নহয়, সহায়ক প্ৰযুক্তিসমূহে বৈশিষ্ট্যটোক অভিগম্য নাম আৰু উপাদানসমূহৰ placeholderবাবে এটা ফ'লবেক হিচাপে ব্যৱহাৰ কৰাৰ আশ্ৰয় ল'ব পাৰে। এই খণ্ডৰ উদাহৰণসমূহে কেইটামান পৰামৰ্শ দিয়া, ক্ষেত্ৰ-নিৰ্দিষ্ট পদ্ধতি প্ৰদান কৰে।<input><textarea>

দৃশ্যমানভাৱে লুকাই থকা বিষয়বস্তু ব্যৱহাৰ কৰিলে ( .visually-hidden, aria-label, আৰু আনকি placeholderবিষয়বস্তু, যি এবাৰ এটা প্ৰপত্ৰ ক্ষেত্ৰত বিষয়বস্তু থাকিলে অদৃশ্য হৈ যায়) সহায়ক প্ৰযুক্তি ব্যৱহাৰকাৰীসকলক উপকৃত কৰিব, দৃশ্যমান লেবেল লিখনীৰ অভাৱ এতিয়াও কিছুমান ব্যৱহাৰকাৰীৰ বাবে সমস্যাজনক হ'ব পাৰে। কোনো ধৰণৰ দৃশ্যমান লেবেল সাধাৰণতে সৰ্বোত্তম পদ্ধতি, অভিগম্যতা আৰু ব্যৱহাৰযোগ্যতা দুয়োটাৰে বাবে।

ছাছ

বহুতো ফৰ্ম চলকক এটা সাধাৰণ স্তৰত সংহতি কৰা হয় যাতে পুনৰ ব্যৱহাৰ কৰিব পাৰি আৰু ব্যক্তিগত ফৰ্ম উপাদানসমূহে সম্প্ৰসাৰিত কৰিব পাৰি। আপুনি এইবোৰ সঘনাই $input-btn-*আৰু $input-*চলক হিচাপে দেখিব।

চলকসমূহ

$input-btn-*চলকসমূহ হৈছে আমাৰ বুটামসমূহ আৰু আমাৰ ফৰ্ম উপাদানসমূহৰ মাজত অংশীদাৰী কৰা গোলকীয় চলকসমূহ । আপুনি এইবোৰক অন্য উপাদান-নিৰ্দিষ্ট চলকসমূহলে মান হিচাপে সঘনাই পুনৰ নিযুক্ত কৰা পাব।

$input-btn-padding-y:         .375rem;
$input-btn-padding-x:         .75rem;
$input-btn-font-family:       null;
$input-btn-font-size:         $font-size-base;
$input-btn-line-height:       $line-height-base;

$input-btn-focus-width:         .25rem;
$input-btn-focus-color-opacity: .25;
$input-btn-focus-color:         rgba($component-active-bg, $input-btn-focus-color-opacity);
$input-btn-focus-blur:          0;
$input-btn-focus-box-shadow:    0 0 $input-btn-focus-blur $input-btn-focus-width $input-btn-focus-color;

$input-btn-padding-y-sm:      .25rem;
$input-btn-padding-x-sm:      .5rem;
$input-btn-font-size-sm:      $font-size-sm;

$input-btn-padding-y-lg:      .5rem;
$input-btn-padding-x-lg:      1rem;
$input-btn-font-size-lg:      $font-size-lg;

$input-btn-border-width:      $border-width;