ফর্ম কন্ট্রোল শৈলী, লেআউট বিকল্প এবং বিভিন্ন ধরণের ফর্ম তৈরি করার জন্য কাস্টম উপাদানগুলির উদাহরণ এবং ব্যবহারের নির্দেশিকা৷
ওভারভিউ
বুটস্ট্র্যাপের ফর্ম নিয়ন্ত্রণগুলি ক্লাস সহ আমাদের রিবুট করা ফর্ম শৈলীতে প্রসারিত হয়। ব্রাউজার এবং ডিভাইস জুড়ে আরও সামঞ্জস্যপূর্ণ রেন্ডারিংয়ের জন্য তাদের কাস্টমাইজড ডিসপ্লেগুলি বেছে নিতে এই ক্লাসগুলি ব্যবহার করুন।
ইমেল যাচাইকরণ, নম্বর নির্বাচন এবং আরও অনেক কিছুর মতো নতুন ইনপুট নিয়ন্ত্রণের সুবিধা নিতে সমস্ত ইনপুটগুলিতে (যেমন, ইমেল ঠিকানা বা সংখ্যাসূচক তথ্যের জন্য) একটি উপযুক্ত typeবৈশিষ্ট্য ব্যবহার করতে ভুলবেন না।emailnumber
বুটস্ট্র্যাপের ফর্ম শৈলীগুলি প্রদর্শন করার জন্য এখানে একটি দ্রুত উদাহরণ। প্রয়োজনীয় ক্লাস, ফর্ম লেআউট এবং আরও অনেক কিছুর ডকুমেন্টেশনের জন্য পড়তে থাকুন।
ফর্ম নিয়ন্ত্রণ
টেক্সচুয়াল ফর্ম কন্ট্রোল - যেমন <input>s, <select>s, এবং s - ক্লাসের <textarea>সাথে স্টাইল করা হয় । .form-controlসাধারণ চেহারা, ফোকাস স্টেট, সাইজিং এবং আরও অনেক কিছুর জন্য শৈলী অন্তর্ভুক্ত।
আরও শৈলী s আমাদের কাস্টম ফর্ম অন্বেষণ করতে ভুলবেন না .<select>
ফাইল ইনপুটগুলির জন্য, এর জন্য ���দলবদল .form-controlকরুন .form-control-file।
সাইজিং
.form-control-lgএবং এর মত ক্লাস ব্যবহার করে উচ্চতা সেট করুন .form-control-sm।
শুধুমাত্র পাঠযোগ্য
readonlyইনপুটের মান পরিবর্তন রোধ করতে একটি ইনপুটে বুলিয়ান অ্যাট্রিবিউট যোগ করুন । শুধুমাত্র পঠনযোগ্য ইনপুটগুলি হালকা দেখায় (ঠিক অক্ষম ইনপুটগুলির মতো), তবে স্ট্যান্ডার্ড কার্সার ধরে রাখে।
শুধুমাত্র পঠনযোগ্য সরল পাঠ্য
আপনি যদি <input readonly>আপনার ফর্মের উপাদানগুলিকে প্লেইন টেক্সট হিসাবে স্টাইল করতে চান, .form-control-plaintextতাহলে ডিফল্ট ফর্ম ফিল্ড স্টাইলিং সরাতে এবং সঠিক মার্জিন এবং প্যাডিং সংরক্ষণ করতে ক্লাসটি ব্যবহার করুন।
রেঞ্জ ইনপুট
ব্যবহার করে অনুভূমিকভাবে স্ক্রোলযোগ্য পরিসীমা ইনপুট সেট করুন .form-control-range।
চেকবক্স এবং রেডিও
ডিফল্ট চেকবক্স এবং রেডিওর সাহায্যে উন্নত করা হয় .form-check, উভয় ইনপুট প্রকারের জন্য একটি একক শ্রেণী যা তাদের HTML উপাদানগুলির বিন্যাস এবং আচরণকে উন্নত করে । চেকবক্সগুলি একটি তালিকার এক বা একাধিক বিকল্প নির্বাচন করার জন্য, যখন রেডিওগুলি অনেকগুলি থেকে একটি বিকল্প নির্বাচন করার জন্য।
অক্ষম চেকবক্স এবং রেডিও সমর্থিত. ইনপুটের অবস্থা নির্দেশ করতে সাহায্য করার জন্য disabledবৈশিষ্ট্যটি একটি হালকা রঙ প্রয়োগ করবে।
চেকবক্স এবং রেডিও বোতাম এইচটিএমএল-ভিত্তিক ফর্ম বৈধতা সমর্থন করে এবং সংক্ষিপ্ত, অ্যাক্সেসযোগ্য লেবেল প্রদান করে। যেমন, আমাদের <input>s এবং <label>s হল সহোদর উপাদানের বিপরীতে <input>একটি <label>. এটি কিছুটা বেশি শব্দসমৃদ্ধ কারণ আপনাকে অবশ্যই উল্লেখ করতে হবে idএবং এবং forএর সাথে সম্পর্কযুক্ত <input>বৈশিষ্ট্যগুলি <label>।
ডিফল্ট (স্ট্যাক করা)
ডিফল্টরূপে, যেকোন সংখ্যক চেকবক্স এবং রেডিও যা তাৎক্ষণিক ভাইবোন, উল্লম্বভাবে স্ট্যাক করা হবে এবং এর সাথে যথাযথভাবে ফাঁক করা হবে .form-check।
সঙ্গতিপূর্ণভাবে
একই অনুভূমিক সারিতে চেকবক্স বা রেডিওগুলি .form-check-inlineযেকোনও যোগ করে গ্রুপ করুন .form-check।
লেবেল ছাড়া
কোন লেবেল পাঠ্য নেই যে .position-staticমধ্যে ইনপুট যোগ করুন . .form-checkসহায়ক প্রযুক্তির (উদাহরণস্বরূপ, ব্যবহার করে) জন্য এখনও কিছু প্রবেশযোগ্য নাম প্রদান করতে ভুলবেন না aria-label।
লেআউট
যেহেতু বুটস্ট্র্যাপ প্রযোজ্য display: blockএবং width: 100%আমাদের প্রায় সমস্ত ফর্ম নিয়ন্ত্রণে, ফর্মগুলি ডিফল্টভাবে উল্লম্বভাবে স্ট্যাক করবে। প্রতি-ফর্মের ভিত্তিতে এই লেআউটটি পরিবর্তন করতে অতিরিক্ত ক্লাস ব্যবহার করা যেতে পারে।
দল গঠন করুন
ক্লাসটি .form-groupফর্মগুলিতে কিছু কাঠামো যুক্ত করার সবচেয়ে সহজ উপায়। এটি একটি নমনীয় শ্রেণী প্রদান করে যা লেবেল, নিয়ন্ত্রণ, ঐচ্ছিক সহায়তা পাঠ্য এবং ফর্ম যাচাইকরণ বার্তাপ্রেরণের সঠিক গ্রুপিংকে উৎসাহিত করে। ডিফল্টরূপে এটি শুধুমাত্র প্রযোজ্য margin-bottom, কিন্তু এটি প্রয়োজন অনুযায়ী অতিরিক্ত শৈলী গ্রহণ করে .form-inline। এটি <fieldset>s, <div>s, বা প্রায় অন্য কোন উপাদানের সাথে ব্যবহার করুন।
ফর্ম গ্রিড
আমাদের গ্রিড ক্লাস ব্যবহার করে আরও জটিল ফর্ম তৈরি করা যেতে পারে। ফর্ম লেআউটগুলির জন্য এগুলি ব্যবহার করুন যাতে একাধিক কলাম, বিভিন্ন প্রস্থ এবং অতিরিক্ত প্রান্তিককরণ বিকল্পগুলির প্রয়োজন হয়৷
ফর্ম সারি
.rowআপনি আমাদের স্ট্যান্ডার্ড গ্রিড সারির একটি পরিবর্তনের জন্যও অদলবদল করতে পারেন যা .form-rowশক্ত এবং আরও কমপ্যাক্ট লেআউটের জন্য ডিফল্ট কলামের গটারগুলিকে ওভাররাইড করে।
গ্রিড সিস্টেমের সাথে আরও জটিল লেআউট তৈরি করা যেতে পারে।
অনুভূমিক ফর্ম
গ্রিডের সাথে অনুভূমিক ফর্ম তৈরি করুন .rowশ্রেণী যোগ করে গ্রুপ গঠন করুন এবং .col-*-*আপনার লেবেল এবং নিয়ন্ত্রণের প্রস্থ নির্দিষ্ট করতে ক্লাস ব্যবহার করুন। .col-form-labelআপনার s-এ যোগ করতে ভুলবেন না <label>যাতে তারা তাদের সংশ্লিষ্ট ফর্ম নিয়ন্ত্রণগুলির সাথে উল্লম্বভাবে কেন্দ্রীভূত হয়।
কখনও কখনও, আপনার প্রয়োজনীয় নিখুঁত প্রান্তিককরণ তৈরি করতে আপনাকে মার্জিন বা প্যাডিং ইউটিলিটিগুলি ব্যবহার করতে হতে পারে। উদাহরণস্বরূপ, padding-topটেক্সট বেসলাইনকে আরও ভালভাবে সারিবদ্ধ করতে আমরা আমাদের স্ট্যাক করা রেডিও ইনপুট লেবেলটি সরিয়ে দিয়েছি।
অনুভূমিক ফর্ম লেবেল আকার
সঠিকভাবে এবং এর আকার অনুসরণ করতে আপনার s বা .col-form-label-sms ব্যবহার করতে ভুলবেন না ।.col-form-label-lg<label><legend>.form-control-lg.form-control-sm
কলামের সাইজিং
আগের উদাহরণে যেমন দেখানো হয়েছে, আমাদের গ্রিড সিস্টেম আপনাকে a বা .colএর মধ্যে যেকোনো সংখ্যক s বসাতে দেয় । তারা উপলব্ধ প্রস্থকে তাদের মধ্যে সমানভাবে বিভক্ত করবে। আপনি কম বা বেশি জায়গা নিতে আপনার কলামগুলির একটি উপসেট বাছাই করতে পারেন, বাকিগুলি সমানভাবে বিভক্ত করে, যেমন নির্দিষ্ট কলাম ক্লাসের সাথে ।.row.form-row.col.col-7
স্বয়ংক্রিয় আকার
নীচের উদাহরণটি বিষয়বস্তুগুলিকে উল্লম্বভাবে কেন্দ্রীভূত করতে একটি ফ্লেক্সবক্স ইউটিলিটি ব্যবহার করে এবং এতে পরিবর্তন .colকরে .col-autoযাতে আপনার কলামগুলি যতটা প্রয়োজন ততটুকু জায়গা নেয়। অন্যভাবে বলুন, কলামের আকার নিজেই বিষয়বস্তুর উপর ভিত্তি করে।
তারপরে আপনি এটিকে আবার আকার-নির্দিষ্ট কলাম ক্লাসের সাথে রিমিক্স করতে পারেন।
.form-inlineএকটি একক অনুভূমিক সারিতে লেবেল, ফর্ম নিয়ন্ত্রণ এবং বোতামগুলির একটি সিরিজ প্রদর্শন করতে ক্লাসটি ব্যবহার করুন । ইনলাইন ফর্মের মধ্যে ফর্ম নিয়ন্ত্রণগুলি তাদের ডিফল্ট অবস্থা থেকে সামান্য পরিবর্তিত হয়।
কন্ট্রোল হল , যেকোন HTML হোয়াইট স্পেসকে ভেঙে ফেলা এবং আপনাকে স্পেসিং এবং ফ্লেক্সবক্স ইউটিলিটিগুলির display: flexসাথে সারিবদ্ধকরণ নিয়ন্ত্রণ প্রদান করার অনুমতি দেয় ।
width: autoবুটস্ট্র্যাপ ডিফল্ট ওভাররাইড করতে কন্ট্রোল এবং ইনপুট গ্রুপগুলি গ্রহণ করে width: 100%।
মোবাইল ডিভাইসে সংকীর্ণ ভিউপোর্টের জন্য অ্যাকাউন্টের জন্য কমপক্ষে 576px প্রশস্ত ভিউপোর্টগুলিতে নিয়ন্ত্রণগুলি কেবল ইনলাইনে প্রদর্শিত হয়৷
স্পেসিং ইউটিলিটিগুলির সাথে আপনাকে পৃথক ফর্ম নিয়ন্ত্রণগুলির প্রস্থ এবং প্রান্তিককরণকে ম্যানুয়ালি অ্যাড্রেস করতে হতে পারে (নিচে দেখানো হয়েছে)। সবশেষে, প্রতিটি ফর্ম কন্ট্রোলের সাথে সর্বদা একটি অন্তর্ভুক্ত করতে ভুলবেন না <label>, এমনকি যদি আপনাকে স্ক্রিনরিডার নয় এমন দর্শকদের থেকে এটি লুকানোর প্রয়োজন হয় .sr-only।
কাস্টম ফর্ম নিয়ন্ত্রণ এবং নির্বাচনগুলিও সমর্থিত।
লুকানো লেবেল ��িকল্প
আপনি যদি প্রতিটি ইনপুটের জন্য একটি লেবেল অন্তর্ভুক্ত না করেন তবে স্ক্রিন রিডারের মতো সহায়ক প্রযুক্তিগুলি আপনার ফর্মগুলির সাথে সমস্যায় পড়বে৷ এই ইনলাইন ফর্মগুলির জন্য, আপনি .sr-onlyক্লাস ব্যবহার করে লেবেলগুলি লুকাতে পারেন৷ সহায়ক প্রযুক্তিগুলির জন্য একটি লেবেল প্রদানের আরও বিকল্প পদ্ধতি রয়েছে, যেমন aria-label, aria-labelledbyবা titleবৈশিষ্ট্য৷ যদি এইগুলির কোনটিই উপস্থিত না থাকে, সহায়ক প্রযুক্তিগুলি placeholderউপস্থিত থাকলে বৈশিষ্ট্যটি ব্যবহার করতে পারে, তবে মনে রাখবেন যে placeholderঅন্যান্য লেবেল পদ্ধতির জন্য প্রতিস্থাপন হিসাবে ব্যবহার করার পরামর্শ দেওয়া হয় না।
সাহায্যকারী লেখা
ফর্মগুলিতে ব্লক-লেভেল সহায়তা পাঠ্য তৈরি করা যেতে পারে (আগে v3 .form-textহিসাবে পরিচিত )। .help-blockইনলাইন হেল্প টেক্সট নমনীয়ভাবে যেকোনো ইনলাইন এইচটিএমএল উপাদান এবং ইউটিলিটি ক্লাস ব্যবহার করে প্রয়োগ করা যেতে পারে .text-muted।
ফর্ম নিয়ন্ত্রণের সাথে সহায়তা পাঠ্য সংযুক্ত করা
সাহায্যের পাঠ্যটি স্পষ্টভাবে ফর্ম নিয়ন্ত্রণের সাথে যুক্ত হওয়া উচিত যা এটি aria-describedbyবৈশিষ্ট্য ব্যবহার করার সাথে সম্পর্কিত। এটি নিশ্চিত করবে যে সহায়ক প্রযুক্তিগুলি - যেমন স্ক্রিন রিডারগুলি - ব্যবহারকারী যখন ফোকাস করে বা নিয়ন্ত্রণে প্রবেশ করে তখন এই সহায়তা পাঠ্যটি ঘোষণা করবে৷
নীচের সাহায্যের পাঠ্য ইনপুটগুলি দিয়ে স্টাইল করা যেতে পারে .form-text। এই শ্রেণীতে display: blockউপরের ইনপুটগুলি থেকে সহজ ব্যবধানের জন্য কিছু শীর্ষ মার্জিন অন্তর্ভুক্ত এবং যোগ করা হয়েছে।
আপনার পাসওয়ার্ড 8-20 অক্ষর দীর্ঘ হতে হবে, অক্ষর এবং সংখ্যা থাকতে হবে এবং স্পেস, বিশেষ অক্ষর বা ইমোজি থাকা উচিত নয়।
ইনলাইন টেক্সট যেকোন সাধারণ ইনলাইন এইচটিএমএল উপাদান ব্যবহার করতে পারে (সেটি একটি <small>, <span>বা অন্য কিছু) একটি ইউটিলিটি ক্লাস ছাড়া আর কিছুই নয়।
অক্ষম ফর্ম
disabledব্যবহারকারীর মিথস্ক্রিয়া প্রতিরোধ করতে এবং এটিকে হালকা দেখাতে একটি ইনপুটে বুলিয়ান অ্যাট্রিবিউট যোগ করুন ।
এর মধ্যে থাকা সমস্ত নিয়ন্ত্রণ নিষ্ক্রিয় করতে a- disabledতে অ্যাট্রিবিউট যোগ করুন ।<fieldset>
নোঙ্গর সঙ্গে সতর্কতা
ব্রাউজারগুলি একটির ভিতরে সমস্ত নেটিভ ফর্ম কন্ট্রোল ( <input>, <select>, এবং <button>উপাদানগুলি) <fieldset disabled>কে অক্ষম হিসাবে বিবেচনা করে, তাদের উপর কীবোর্ড এবং মাউস উভয়ের মিথস্ক্রিয়া প্রতিরোধ করে।
যাইহোক, যদি আপনার ফর্মটি কাস্টম বোতামের মতো উপাদানগুলিও অন্তর্ভুক্ত করে যেমন <a ... class="btn btn-*">, এগুলিকে শুধুমাত্র একটি স্টাইল দেওয়া হবে pointer-events: none৷ বোতামগুলির জন্য অক্ষম অবস্থা সম্পর্কে বিভাগে উল্লেখ করা হয়েছে (এবং বিশেষত অ্যাঙ্কর উপাদানগুলির জন্য উপ-বিভাগে), এই CSS বৈশিষ্ট্যটি এখনও মানসম্মত নয় এবং ইন্টারনেট এক্সপ্লোরার 10-এ সম্পূর্ণরূপে সমর্থিত নয়৷ অ্যাঙ্কর-ভিত্তিক নিয়ন্ত্রণগুলি এখনও থাকবে কীবোর্ড ব্যবহার করে ফোকাসযোগ্য এবং অপারেবল। আপনাকে অবশ্যই এই নিয়ন্ত্রণগুলিকে ম্যানুয়ালি সংশোধন করতে হবে tabindex="-1"যাতে সেগুলিকে ফোকাস প্রাপ্ত করা থেকে বিরত রাখতে এবং aria-disabled="disabled"তাদের রাজ্যকে সহায়ক প্রযুক্তিতে সংকেত দিতে।
ক্রস ব্রাউজার সামঞ্জস্য
যদিও বুটস্ট্র্যাপ সমস্ত ব্রাউজারে এই শৈলীগুলি প্রয়োগ করবে, ইন্টারনেট এক্সপ্লোরার 11 এবং নীচের disabledবৈশিষ্ট্যগুলিকে সম্পূর্ণরূপে সমর্থন করে না <fieldset>৷ এই ব্রাউজারগুলিতে ফিল্ডসেট নিষ্ক্রিয় করতে কাস্টম জাভাস্ক্রিপ্ট ব্যবহার করুন।
বৈধতা
HTML5 ফর্ম যাচাইকরণ সহ আপনার ব্যবহারকারীদের মূল্যবান, কার্যকর প্রতিক্রিয়া প্রদান করুন- আমাদের সমস্ত সমর্থিত ব্রাউজারে উপলব্ধ ৷ ব্রাউজার ডিফল্ট বৈধতা প্রতিক্রিয়া থেকে চয়ন করুন, অথবা আমাদের অন্তর্নির্মিত ক্লাস এবং স্টার্টার জাভাস্ক্রিপ্টের সাথে কাস্টম বার্তা প্রয়োগ করুন।
আমরা সচেতন যে বর্তমানে ক্লায়েন্ট-সাইড কাস্টম বৈধতা শৈলী এবং টুলটিপগুলি অ্যাক্সেসযোগ্য নয়, কারণ সেগুলি সহায়ক প্রযুক্তির সংস্পর্শে আসে না৷ যখন আমরা একটি সমাধান নিয়ে কাজ করি, তখন আমরা সার্ভার-সাইড বিকল্প বা ডিফল্ট ব্রাউজার বৈধতা পদ্ধতি ব্যবহার করার সুপারিশ করব৷
ইনপুট গ্রুপ বৈধতা
দুর্ভাগ্যবশত ইনপুট গোষ্ঠীর বৈধতা শৈলীতে অসুবিধা হয়। আমাদের সুপারিশ হল প্রতিক্রিয়া বার্তাগুলিকে এর ভাইবোন উপাদান হিসাবে স্থাপন .input-groupকরা .is-{valid|invalid}। ইনপুট গোষ্ঠীর মধ্যে প্রতিক্রিয়া বার্তা স্থাপন করা border-radius. এই সমাধান দেখুন .
কিভাবে এটা কাজ করে
বুটস্ট্র্যাপের সাথে ফর্মের বৈধতা কীভাবে কাজ করে তা এখানে:
HTML ফর্মের বৈধতা CSS-এর দুটি ছদ্ম-শ্রেণীর মাধ্যমে প্রয়োগ করা হয়, :invalidএবং :valid. এটি <input>, <select>, এবং <textarea>উপাদানগুলিতে প্রযোজ্য।
বুটস্ট্র্যাপ প্যারেন্ট ক্লাসে স্কোপ :invalidএবং শৈলী করে , সাধারণত তে প্রয়োগ করা হয় । অন্যথায়, একটি মান ছাড়াই প্রয়োজনীয় ক্ষেত্র পৃষ্ঠা লোডের সময় অবৈধ হিসাবে দেখায়। এইভাবে, আপনি কখন সেগুলি সক্রিয় করবেন তা চয়ন করতে পারেন (সাধারণত ফর্ম জমা দেওয়ার চেষ্টা করার পরে)।:valid.was-validated<form>
ফর্মের চেহারা পুনরায় সেট করতে (উদাহরণস্বরূপ, AJAX ব্যবহার করে গতিশীল ফর্ম জমা দেওয়ার ক্ষেত্রে), জমা দেওয়ার পরে আবার .was-validatedক্লাসটি সরিয়ে দিন।<form>
ফলব্যাক হিসাবে, .is-invalidএবং সার্ভার সাইড বৈধতার.is-valid জন্য ছদ্ম-ক্লাসের পরিবর্তে ক্লাসগুলি ব্যবহার করা যেতে পারে । তাদের একটি অভিভাবক শ্রেণীর প্রয়োজন নেই।.was-validated
<label>CSS কিভাবে কাজ করে তার সীমাবদ্ধতার কারণে, আমরা কাস্টম জাভাস্ক্রিপ্টের সাহায্য ছাড়া DOM-এ ফর্ম কন্ট্রোলের আগে আসা একটিতে (বর্তমানে) শৈলী প্রয়োগ করতে পারি না ।
সমস্ত আধুনিক ব্রাউজার সীমাবদ্ধতা যাচাইকরণ API সমর্থন করে , ফর্ম নিয়ন্ত্রণগুলি যাচাই করার জন্য জাভাস্ক্রিপ্ট পদ্ধতির একটি সিরিজ।
প্রতিক্রিয়া বার্তাগুলি ব্রাউজার ডিফল্টগুলি ব্যবহার করতে পারে (প্রতিটি ব্রাউজারের জন্য আলাদা, এবং CSS এর মাধ্যমে অস্থির) বা অতিরিক্ত HTML এবং CSS সহ আমাদের কাস্টম প্রতিক্রিয়া শৈলী।
setCustomValidityআপনি জাভাস্ক্রিপ্টের সাথে কাস্টম বৈধতা বার্তা প্রদান করতে পারেন ।
এটি মাথায় রেখে, আমাদের কাস্টম ফর্ম বৈধতা শৈলী, ঐচ্ছিক সার্ভার সাইড ক্লাস এবং ব্রাউজার ডিফল্টগুলির জন্য নিম্নলিখিত ডেমোগুলি বিবেচনা করুন৷
কাস্টম শৈলী
কাস্টম বুটস্ট্র্যাপ ফর্ম যাচাইকরণ বার্তাগুলির জন্য, আপনাকে আপনার novalidateবুলিয়ান অ্যাট্রিবিউট যোগ করতে হবে <form>। এটি ব্রাউজার ডিফল্ট প্রতিক্রিয়া টুলটিপগুলিকে অক্ষম করে, তবে এখনও জাভাস্ক্রিপ্টে ফর্ম যাচাইকরণ APIগুলিতে অ্যাক্সেস প্রদান করে৷ নীচের ফর্ম জমা দেওয়ার চেষ্টা করুন; আমাদের জাভাস্ক্রিপ্ট সাবমিট বোতামটি আটকাবে এবং আপনার প্রতিক্রিয়া জানাবে। জমা দেওয়ার চেষ্টা করার সময়, আপনি আপনার ফর্ম নিয়ন্ত্রণগুলিতে প্রয়োগ করা :invalidএবং শৈলীগুলি দেখতে পাবেন।:valid
কাস্টম ফিডব্যাক শৈলী কাস্টম রং, সীমানা, ফোকাস শৈলী, এবং ব্যাকগ্রাউন্ড আইকনগুলিকে আরও ভালভাবে প্রতিক্রিয়া জানাতে প্রয়োগ করে। <select>s-এর জন্য পটভূমি আইকনগুলি শুধুমাত্র এর সাথে উপলব্ধ .custom-select, এবং নয় .form-control৷
ব্রাউজার ডিফল্ট
কাস্টম বৈধতা প্রতিক্রিয়া বার্তা বা ফর্ম আচরণ পরিবর্তন করতে জাভাস্ক্রিপ্ট লিখতে আগ্রহী নন? সব ভাল, আপনি ব্রাউজার ডিফল্ট ব্যবহার করতে পারেন. নীচের ফর্ম জমা করার চেষ্টা করুন. আপনার ব্রাউজার এবং OS এর উপর নির্ভর করে, আপনি প্রতিক্রিয়ার একটু ভিন্ন স্টাইল দেখতে পাবেন।
যদিও এই প্রতিক্রিয়া শৈলীগুলি CSS দিয়ে স্টাইল করা যায় না, তবুও আপনি জাভাস্ক্রিপ্টের মাধ্যমে প্রতিক্রিয়া পাঠ্য কাস্টমাইজ করতে পারেন।
সার্ভার সাইড
আমরা ক্লায়েন্ট-সাইড বৈধতা ব্যবহার করার পরামর্শ দিই, তবে আপনার সার্ভার-সাইড বৈধতা প্রয়োজন হলে, আপনি এবং এর সাথে অবৈধ এবং বৈধ ফর্ম ক্ষেত্রগুলি নির্দেশ করতে .is-invalidপারেন .is-valid। মনে রাখবেন যে .invalid-feedbackএই ক্লাসগুলির সাথেও সমর্থিত।
অবৈধ ক্ষেত্রগুলির জন্য, নিশ্চিত করুন যে অবৈধ প্রতিক্রিয়া/ত্রুটি বার্তাটি ব্যবহার করে প্রাসঙ্গিক ফর্ম ক্ষেত্রের সাথে যুক্ত aria-describedby। এই অ্যাট্রিবিউটটি একাধিক idরেফারেন্স করার অনুমতি দেয়, যদি ক্ষেত্রটি ইতিমধ্যেই অতিরিক্ত ফর্ম টেক্সট নির্দেশ করে।
সমর্থিত উপাদান
নিম্নলিখিত ফর্ম নিয়ন্ত্রণ এবং উপাদানগুলির জন্য বৈধতা শৈলী উপলব্ধ:
<input>s এবং <textarea>s সঙ্গে.form-control
<select>s সঙ্গে .form-controlবা.custom-select
.form-checks
.custom-checkboxs এবং .custom-radios
.custom-file
টুলটিপস
যদি আপনার ফর্ম লেআউট এটির অনুমতি দেয়, আপনি একটি স্টাইল করা টুলটিপে বৈধতা প্রতিক্রিয়া প্রদর্শন করার জন্য ক্লাসগুলির .{valid|invalid}-feedbackজন্য ক্লাসগুলি অদলবদল করতে পারেন। টুলটিপ অবস্থানের জন্য এটির .{valid|invalid}-tooltipসাথে একজন অভিভাবক আছে তা নিশ্চিত করুন। position: relativeনীচের উদাহরণে, আমাদের কলাম ক্লাসে এটি ইতিমধ্যেই রয়েছে, তবে আপনার প্রকল্পের একটি বিকল্প সেটআপের প্রয়োজন হতে পারে।
কাস্টমাইজ করা
মানচিত্র সহ Sass এর মাধ্যমে বৈধতা রাজ্যগুলি কাস্টমাইজ করা যেতে পারে $form-validation-states। আমাদের _variables.scssফাইলে অবস্থিত, এই Sass মানচিত্রটি ডিফল্ট valid/ invalidবৈধতা অবস্থা তৈরি করতে লুপ করা হয়েছে। প্রতিটি রাজ্যের রঙ এবং আইকন কাস্টমাইজ করার জন্য একটি নেস্টেড মানচিত্র অন্তর্ভুক্ত করা হয়েছে। অন্য কোনো স্টেট ব্রাউজার দ্বারা সমর্থিত না হলেও, যারা কাস্টম স্টাইল ব্যবহার করে তারা সহজেই আরও জটিল ফর্ম ফিডব্যাক যোগ করতে পারে।
দয়া করে মনে রাখবেন যে আমরা form-validation-stateমিক্সিন পরিবর্তন না করে এই মানগুলি কাস্টমাইজ করার সুপারিশ করি না।
ইনপুট গ্রুপ বৈধতা সমাধান
border-radiusনির্বাচক সীমাবদ্ধতার কারণে আমরা বৈধতার সাথে ভাঙা ইনপুট গোষ্ঠীগুলি সমাধান করতে অক্ষম , তাই ম্যানুয়াল ওভাররাইড প্রয়োজন৷ আপনি যখন একটি স্ট্যান্ডার্ড ইনপুট গ্রুপ ব্যবহার করছেন এবং ডিফল্ট সীমানা ব্যাসার্ধের মানগুলি কাস্টমাইজ করবেন না, .rounded-rightভাঙা সহ উপাদানগুলিতে যোগ করুন border-radius।
@
একটি ব্যবহারকারীর নাম চয়ন করুন.
আপনি যখন একটি ছোট বা বড় ইনপুট গ্রুপ ব্যবহার করছেন বা ডিফল্ট border-radiusমানগুলি কাস্টমাইজ করছেন, তখন busted এর সাথে উপাদানটিতে কাস্টম CSS যোগ করুন border-radius।
@
একটি ব্যবহারকারীর নাম চয়ন করুন.
কাস্টম ফর্ম
আরও বেশি কাস্টমাইজেশন এবং ক্রস ব্রাউজার সামঞ্জস্যের জন্য, ব্রাউজার ডিফল্টগুলি প্রতিস্থাপন করতে আমাদের সম্পূর্ণ কাস্টম ফর্ম উপাদানগুলি ব্যবহার করুন৷ এগুলি শব্দার্থগত এবং অ্যাক্সেসযোগ্য মার্কআপের উপরে তৈরি করা হয়েছে, তাই তারা যেকোনো ডিফল্ট ফর্ম নিয়ন্ত্রণের জন্য কঠিন প্রতিস্থাপন।
চেকবক্স এবং রেডিও
প্রতিটি চেকবক্স এবং রেডিও <input>এবং <label>পেয়ারিং <div>আমাদের কাস্টম নিয়ন্ত্রণ তৈরি করতে একটি তে মোড়ানো হয়। কাঠামোগতভাবে, এটি আমাদের ডিফল্ট হিসাবে একই পদ্ধতি .form-check।
আমরা আমাদের সমস্ত রাজ্যের জন্য ভাইবোন নির্বাচক ( ~) ব্যবহার করি —যেমন— আমাদের কাস্টম ফর্ম নির্দেশককে সঠিকভাবে স্টাইল করতে। ক্লাসের সাথে একত্রিত হলে , আমরা '-এর অবস্থার উপর ভিত্তি করে প্রতিটি আইটেমের জন্য পাঠ্যকে স্টাইল করতে পারি ।<input>:checked.custom-control-label<input>
<input>আমরা এর সাথে ডিফল্ট লুকিয়ে রাখি এবং এর জায়গায় এবং এর সাথে একটি নতুন কাস্টম ফর্ম নির্দেশক তৈরি করতে opacityব্যবহার করি । দুর্ভাগ্যবশত আমরা একটি কাস্টম তৈরি করতে পারি না কারণ সিএসএস সেই উপাদানটিতে কাজ করে না।.custom-control-label::before::after<input>content
চেক করা অবস্থায়, আমরা Open Iconic থেকে base64 এমবেডেড SVG আইকন ব্যবহার করি । এটি আমাদের ব্রাউজার এবং ডিভাইস জুড়ে স্টাইলিং এবং অবস্থান নির্ধারণের জন্য সর্বোত্তম নিয়ন্ত্রণ প্রদান করে।
চেকবক্স
জাভাস্ক্রিপ্টের মাধ্যমে ম্যানুয়ালি সেট করা হলে কাস্টম চেকবক্সগুলিও সিউডো ক্লাস ব্যবহার করতে পারে :indeterminate(এটি নির্দিষ্ট করার জন্য কোনও উপলব্ধ HTML বৈশিষ্ট্য নেই)।
আপনি যদি jQuery ব্যবহার করছেন, তাহলে এরকম কিছু যথেষ্ট হওয়া উচিত:
রেডিও
সঙ্গতিপূর্ণভাবে
অক্ষম
কাস্টম চেকবক্স এবং রেডিওগুলিও অক্ষম করা যেতে পারে৷ disabledবুলিয়ান অ্যাট্রিবিউট যোগ করুন <input>এবং কাস্টম নির্দেশক এবং লেবেল বিবরণ স্বয়ংক্রিয়ভাবে স্টাইল করা হবে।
সুইচ
একটি সুইচে একটি কাস্টম চেকবক্সের মার্কআপ থাকে কিন্তু .custom-switchএকটি টগল সুইচ রেন্ডার করতে ক্লাসটি ব্যবহার করে। disabledসুইচগুলিও অ্যাট্রিবিউট সমর্থন করে ।
মেনু নির্বাচন করুন
কাস্টম <select>মেনুতে .custom-selectকাস্টম শৈলী ট্রিগার করার জন্য শুধুমাত্র একটি কাস্টম ক্লাস প্রয়োজন। কাস্টম শৈলীগুলি এর প্রাথমিক উপস্থিতিতে সীমাবদ্ধ এবং ব্রাউজার সীমাবদ্ধতার কারণে গুলি <select>সংশোধন করতে পারে না ।<option>
আমাদের অনুরূপ আকারের পাঠ্য ইনপুটগুলির সাথে মেলে আপনি ছোট এবং বড় কাস্টম নির্বাচনগুলি থেকেও চয়ন করতে পারেন৷
বৈশিষ্ট্যটিও multipleসমর্থিত:
যেমন sizeবৈশিষ্ট্য:
পরিসর
এর সাথে কাস্টম <input type="range">নিয়ন্ত্রণ তৈরি করুন .custom-range। ট্র্যাক (ব্যাকগ্রাউন্ড) এবং থাম্ব (মান) উভয়ই ব্রাউজার জুড়ে একই দেখাতে স্টাইল করা হয়েছে। যেহেতু শুধুমাত্র IE এবং Firefox চাক্ষুষরূপে অগ্রগতি নির্দেশ করার উপায় হিসাবে থাম্বের বাম বা ডান দিক থেকে তাদের ট্র্যাক "ভর্তি" সমর্থন করে, আমরা বর্তমানে এটি সমর্থন করি না।
minরেঞ্জ ইনপুটগুলির যথাক্রমে এবং max— 0এবং -এর অন্তর্নিহিত মান রয়েছে 100। minযারা এবং maxগুণাবলী ব্যবহার করে তাদের জন্য আপনি নতুন মান নির্দিষ্ট করতে পারেন ।
ডিফল্টরূপে, পরিসীমা ইনপুট পূর্ণসংখ্যার মানগুলিতে "স্ন্যাপ" করে। stepএটি পরিবর্তন করতে, আপনি একটি মান নির্দিষ্ট করতে পারেন । নীচের উদাহরণে, আমরা ব্যবহার করে ধাপের সংখ্যা দ্বিগুণ করি step="0.5"।
ফাইল ব্রাউজার
কাস্টম ফাইল ইনপুট অ্যানিমেট করার জন্য প্রস্তাবিত প্লাগইন: bs-custom-file-input , যা আমরা বর্তমানে আমাদের ডক্সে ব্যবহার করছি।
ফাইল ইনপুটটি গুচ্ছের মধ্যে সবচেয়ে আড়ম্বরপূর্ণ এবং অতিরিক্ত জাভাস্ক্রিপ্ট প্রয়োজন যদি আপনি সেগুলিকে কার্যকরী ফাইল চয়ন করুন... এবং নির্বাচিত ফাইলের নামের পাঠ্যের সাথে সংযুক্ত করতে চান।
<input>আমরা এর মাধ্যমে ডিফল্ট ফাইল লুকাই opacityএবং পরিবর্তে স্টাইল করি <label>। বোতামটি তৈরি এবং এর সাথে অবস্থান করা হয় ::after। পরিশেষে, আমরা আশেপাশের বিষয়বস্তুর জন্য সঠিক ব্যবধানের জন্য a widthএবং heighton ঘোষণা করি।<input>
SCSS এর মাধ্যমে স্ট্রিংগুলি অনুবাদ বা কাস্টমাইজ করা
ছদ্ম :lang()-শ্রেণি অন্যান্য ভাষায় "ব্রাউজ" পাঠ্যের অনুবাদের অনুমতি দেওয়ার জন্য ব্যবহার করা হয়। প্রাসঙ্গিক ভাষা ট্যাগ এবং স্থানীয় স্ট্রিং $custom-file-textসহ Sass ভেরিয়েবলে ওভাররাইড করুন বা এন্ট্রি যোগ করুন । ইংরেজি স্ট্রিং একই ভাবে কাস্টমাইজ করা যেতে পারে. উদাহরণস্বরূপ, এখানে একজন কিভাবে একটি স্প্যানিশ অনুবাদ যোগ করতে পারে (স্প্যানিশ ভাষার কোড হল ):es
এখানে lang(es)একটি স্প্যানিশ অনুবাদের জন্য কাস্টম ফাইল ইনপুট কার্যকর হয়: