ফর্ম

ওভারভিউ

বুটস্ট্র্যাপের ফর্ম নিয়ন্ত্রণগুলি ক্লাস সহ আমাদের রিবুট করা ফর্ম শৈলীতে প্রসারিত হয়। ব্রাউজার এবং ডিভাইস জুড়ে আরও সামঞ্জস্যপূর্ণ রেন্ডারিংয়ের জন্য তাদের কাস্টমাইজড ডিসপ্লেগুলি বে��ে নিতে এই ক্লাসগুলি ব্যবহার করুন।

ইমেল যাচাইকরণ, নম্বর নির্বাচন এবং আরও অনেক কিছুর মতো নতুন ইনপুট নিয়ন্ত্রণের সুবিধা নিতে সমস্ত ইনপুটগুলিতে (যেমন, ইমেল ঠিকানা বা সংখ্যাসূচক তথ্যের জন্য) একটি উপযুক্ত typeবৈশিষ্ট্য ব্যবহার করতে ভুলবেন না।emailnumber

বুটস্ট্র্যাপের ফর্ম শৈলীগুলি প্রদর্শন করার জন্য এখানে একটি দ্রুত উদাহরণ। প্রয়োজনীয় ক্লাস, ফর্ম লেআউট এবং আরও অনেক কিছুর ডকুমেন্টেশনের জন্য পড়তে থাকুন।

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

ইনলাইন টেক্সট যেকোন সাধারণ ইনলাইন এইচটিএমএল এলিমেন্ট ব্যবহার করতে পারে (সেটি একটি <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>

এর মধ্যে থাকা সমস্ত নিয়ন্ত্রণ নিষ্ক্রিয় disabledকরতে a এ অ্যাট্রিবিউট যোগ করুন । <fieldset>ব্রাউজারগুলি একটির ভিতরে সমস্ত নেটিভ ফর্ম কন্ট্রোল ( <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বিষয়বস্তু, যা একটি ফর্ম ফিল্ডের বিষয়বস্তু থাকলে অদৃশ্য হয়ে যায়) সহায়ক প্রযুক্তি ব্যবহারকারীদের উপকার করবে, দৃশ্যমান লেবেল পাঠ্যের অভাব নির্দিষ্ট ব্যবহারকারীদের জন্য সমস্যাযুক্ত হতে পারে। দৃশ্যমান লেবেলের কিছু ফর্ম সাধারণত অ্যাক্সেসযোগ্যতা এবং ব্যবহারযোগ্যতার জন্য সর্বোত্তম পদ্ধতি।

সস

অনেকগুলি ফর্ম ভেরিয়েবল একটি সাধারণ স্তরে সেট করা হয় যাতে পৃথক ফর্ম উপাদানগুলি দ্বারা পুনরায় ব্যবহার এবং প্রসারিত করা যায়। আপনি এই সবচেয়ে প্রায়ই $btn-input-*এবং $input-*ভেরিয়েবল হিসাবে দেখতে পাবেন.

ভেরিয়েবল

$btn-input-*ভেরিয়েবল হল আমাদের বোতাম এবং আমাদের ফর্ম উপাদানগুলির মধ্যে বৈশ্বিক ভেরিয়েবল শেয়ার করা । আপনি এইগুলিকে অন্যান্য উপাদান-নির্দিষ্ট ভেরিয়েবলের মান হিসাবে ঘন ঘন পুনঃনির্ধারিত দেখতে পাবেন।

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