TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

8

ফর্মগুলি যে কোনও ওয়েবসাইটের গুরুত্বপূর্ণ এবং অনিবার্য অংশ। বুটস্ট্র্যাপ 4 একটি ফর্মের মধ্যে বিভিন্ন উপাদান যোগ করার জন্য স্ট্যান্ডার্ড HTML5 ফর্ম এলিমেন্ট ব্যবহার করে । এই প্রবন্ধে আসুন আমরা কিভাবে বুটস্ট্র্যাপ 5 এ বিভিন্ন ফর্মের স্টাইল তৈরি করতে পারি তা মনে রাখি। মনে রাখবেন, বুটস্ট্র্যাপ একটি ফ্রন্টএন্ড ফ্রেমওয়ার্ক। এটি আপনাকে শুধুমাত্র পূর্বনির্ধারিত CSS এবং স্ক্রিপ্ট দিয়ে রেডিমেড উপাদান তৈরি করতে দেয়। আপনার সার্ভারে প্রাপ্ত ফর্ম ইনপুটগুলি প্রক্রিয়া করার একটি উপায় খুঁজে বের করা উচিত।

বুটস্ট্র্যাপ 5 টি ফর্ম টিউটোরিয়াল

এই টিউটোরিয়ালটি নিম্নলিখিত বিষয়গুলি অন্তর্ভুক্ত করে:

  1. বুটস্ট্র্যাপ 5 ফর্ম ক্লাস
  2. রান্নাঘর সিঙ্ক ফর্ম
  3. ইনলাইন ফর্ম
  4. ফর্ম গ্রুপ ব্যবহার করে
  5. গ্রিড লেআউট ব্যবহার করে ফর্ম
  6. সাইজ করা এবং সাহায্য পাঠ্য যোগ করা
  7. অন্যান্য বৈচিত্র
  8. ফর্ম যাচাইকরণ

1 বুটস্ট্র্যাপ ফর্ম CSS ক্লাস

বোতাম, ব্যাজ এবং সতর্কতাগুলির মতো অন্যান্য উপাদানগুলির তুলনায় ফর্মটি একটি বড় উপাদান । এতে নিম্নলিখিত মৌলিক CSS ক্লাস রয়েছে:

CSS ক্লাস বর্ণনা মন্তব্য
.ফর্ম-গ্রুপ গ্রুপ ফর্ম নিয়ন্ত্রণে ব্যবহৃত হয়  
.ফর্ম-নিয়ন্ত্রণ পাঠ্য ইনপুট এটি একটি পাঠ্য, পাসওয়ার্ড, তারিখ, সময় ইত্যাদি হতে পারে।
.form-control-file ফাইল আপলোড  
.ফর্ম-চেক চেকবক্স এবং রেডিও বোতাম  
.ফর্ম-চেক-ইনপুট ইনপুট এলিমেন্ট ক্লাস  চেকবক্স এবং রেডিও বোতামের জন্য
.ফর্ম-চেক-লেবেল পাঠ্য লেবেল শ্রেণী চেকবক্স এবং রেডিও বোতামের জন্য
.form-control-lg বড় আকারের উপাদান  
.form-control-sm ছোট আকারের উপাদান  
.form-control-plaintext সাধারণ পাঠ্য ইনপুট শুধুমাত্র ইনপুট উপাদান পড়ার জন্য ব্যবহার করা হয়

2 বিভিন্ন উপাদান ব্যবহার করে রান্নাঘর সিঙ্ক ফর্ম

ফর্মে বিভিন্ন ধরনের উপাদান থাকতে পারে যেমন টেক্সট ইনপুট, পাসওয়ার্ড, সিঙ্গল সিলেক্ট, মাল্টিপল সিলেক্ট, টেক্সটারিয়া, ফাইল আপলোড, চেকবক্স, রেডিও বাটন এবং সাবমিট বাটন। প্রতিটি উপাদান ক এর ভিতরে গ্রুপ করা হয়

".form-group" শ্রেণীর সাথে। আপনিও ব্যবহার করতে পারেন

রেডিও বোতাম এবং চেকবক্সের মতো একই উপাদানগুলিকে একত্রিত করুন। আসুন আরও ভালভাবে বুঝতে বিভিন্ন উপাদানের সাথে একটি রান্নাঘর সিঙ্ক ফর্ম তৈরি করি।

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 5 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 5 CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous"> </head> <body> <!-- Start of Form --> <form> <!-- 1. Text Input --> <div class="form-group"> <label for="username">Enter Username</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> <small id="Username" class="form-text text-muted">Enter username to login.</small> </div> <!-- 2. Password --> <div class="form-group"> <label for="password">Enter Password</label> <input type="password" class="form-control" id="password" placeholder="Password"> </div> <!-- 3. Single Select --> <div class="form-group"> <label for="singleselect">Single Select from the Dropdown</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- 4. Multiple Select --> <div class="form-group"> <label for="multipleselect">Multiple Select from List</label> <select multiple class="form-control" id="multipleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- 5. Textarea --> <div class="form-group"> <label for="textarea">Textarea Input</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- 6. File Upload --> <div class="form-group"> <label for="fileupload">Upload File</label> <input type="file" class="form-control-file" id="fileupload" aria-describedby="fileupload"> <small id="fileupload" class="form-text text-muted">Choose the file from your computer and the browse screen depends on your operating system.</small> </div> <!-- 7. Radio Buttons --> <fieldset class="form-group"> <legend>Radio Buttons</legend> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio1" value="Option 1" checked> Option 1</label> </div> <div class="form-check"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio2" value="Option 2"> Option 2 </label> </div> <div class="form-check disabled"> <label class="form-check-label"> <input type="radio" class="form-check-input" name="radio" id="radio3" value="Option 3" disabled> Option 3</label> </div> </fieldset> <!-- 8. Checkbox --> <fieldset class="form-group"> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 1. </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 2. </label> </div> <div class="form-check"> <label class="form-check-label"> <input type="checkbox" class="form-check-input"> This is a checkbox 3. </label> </div> </fieldset> <!-- 9. Submit Button --> <button type="submit" class="btn btn-success">Submit</button> </form> <!-- End of Form --> <!-- Bootstrap 5 Scripts --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script> </body> </html>

ফলাফলটি ব্রাউজারে নীচের মত দেখাবে:

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

ফর্ম উপাদানগুলি সংখ্যার সাথে চিহ্নিত করা হয় এবং সংশ্লিষ্ট কোডটি বোঝার উদ্দেশ্যে মন্তব্য বিভাগে চিহ্নিত করা হয়। উপরের রান্নাঘর সিঙ্ক ফর্মটিতে বুটস্ট্র্যাপ সিএসএস এবং স্ক্রিপ্ট সহ সম্পূর্ণ কোড রয়েছে। নীচের সমস্ত উদাহরণে, আমরা কেবল ফর্ম কম্পোনেন্টের জন্য কোড ব্লক দিয়েছি। ফর্মের বিভিন্ন শৈলী তৈরি করতে আপনি নিম্নলিখিত কোডগুলির সাথে ফর্মের শুরু এবং শেষের মধ্যে কোড ব্লকটি প্রতিস্থাপন করতে পারেন।

3 ইনলাইন ফর্ম

যদি আপনি উপরের উদাহরণে লক্ষ্য করেছেন, সমস্ত উপাদান লেবেল বা কিংবদন্তীর নীচে একত্রিত হয়। আপনি নীচের মত ".ফর্ম-ইনলাইন" ক্লাস ব্যবহার করে উপাদানগুলিকে সারিবদ্ধভাবে ইনলাইন করতে পারেন:

<form class="form-inline"> <label class="sr-only" for="inlineforminput">Username</label> <div class="input-group mb-2 mr-sm-2 mb-sm-0"> <div class="input-group-addon">@</div> <input type="text" class="form-control" id="inlineforminput" placeholder="Username"> </div> <label class="sr-only" for="inlineform">Password</label> <input type="password" class="form-control mb-2 mr-sm-2 mb-sm-0" id="inlineform" placeholder="Enter Password"> <div class="form-check mb-2 mr-sm-2 mb-sm-0"> <label class="form-check-label"> <input class="form-check-input" type="checkbox">Remember </label> </div> <button type="submit" class="btn btn-info">Login</button> </form>

এবং ফলাফলটি নীচের মত দেখানো হবে যাতে তিনটি উপাদানই একক সারিতে অনুভূমিকভাবে সারিবদ্ধ থাকে।

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

4 ফর্ম গ্রুপের সাথে ফর্ম উপাদানগুলিকে গ্রুপ করা

আপনি নীচের মত ".form-group" শ্রেণী ব্যবহার করে একটি ফর্মের মধ্যে অনুরূপ উপাদানগুলিকে সহজেই গ্রুপ করতে পারেন:

<form> <div class="form-group"> <label class="form-control-label" for="formGroup1">First Name</label> <input type="text" class="form-control" id="formGroup1" placeholder="First Name"> </div> <div class="form-group"> <label class="form-control-label" for="formGroup2">Last Name</label> <input type="text" class="form-control" id="formGroup2" placeholder="Last Name"> </div> </form>

গ্রুপিং নীচের চিত্রের মতো বর্ডার বটম যুক্ত করবে, আপনি ".form-group" শ্রেণীর সাথে অন্য কোন দৃশ্যমান পরিবর্তন দেখতে পাবেন না।

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

একটি ফর্মে উপাদানগুলিকে গ্রুপ করা

5 গ্রিড সিস্টেম সহ ফর্ম

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

<form> <div class="form-row"> <div class="form-group col-md-6"> <label for="Email" class="col-form-label">Email</label> <input type="email" class="form-control" id="Email" placeholder="Email"> </div> <div class="form-group col-md-6"> <label for="Password" class="col-form-label">Password</label> <input type="password" class="form-control" id="Password" placeholder="Password"> </div> </div> <div class="form-group"> <label for="Address" class="col-form-label">Address</label> <input type="text" class="form-control" id="Address" placeholder="Address First Line"> </div> <div class="form-group"> <label for="Address1" class="col-form-label">Address 2</label> <input type="text" class="form-control" id="Address1" placeholder="Address Second Line"> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="City" class="col-form-label">City</label> <input type="text" class="form-control" id="City" placeholder="City"> </div> <div class="form-group col-md-4"> <label for="State" class="col-form-label">State</label> <select id="State" class="form-control">Choose</select> </div> <div class="form-group col-md-2"> <label for="Zip" class="col-form-label">Zip</label> <input type="text" class="form-control" id="Zip"> </div> </div> <div class="form-group"> <div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox"> Remember me </label> </div> </div> <button type="submit" class="btn btn-primary">Submit</button> </form>

এটি ব্রাউজারে নিম্নলিখিত ফলাফল তৈরি করবে:

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

গ্রিড লেআউট ব্যবহার করে বুটস্ট্র্যাপ 4 ফর্ম

6 ক্ষেত্রগুলির জন্য সহায়তা পাঠ্য আকার পরিবর্তন এবং যোগ করা

উপরের উদাহরণে, আমরা আরও দুটি অতিরিক্ত ক্লাস ব্যবহার করেছি:

  • ".Form-control-lg" উপাদানগুলিকে আরও বড় করতে। এটি ছোট করার জন্য ".form-control-sm" ক্লাস ব্যবহার করুন।
  • ".Form-text" ক্লাসটি ".text-muted" ক্লাসের সাহায্যে নি textশব্দ আকারে সাহায্য পাঠ্য যোগ করতে ব্যবহৃত হয়।

7 অন্যান্য বৈচিত্র

বুটস্ট্র্যাপ 4 ফর্মটি কাস্টমাইজ করার কয়েকটি সহজ উপায় নিচে দেওয়া হল:

  • ডিফল্টরূপে ফর্ম উপাদানগুলি সম্পূর্ণ প্রস্থ দখল করে যা এটি একটি পাত্রে রেখে বা অতিরিক্ত CSS ব্যবহার করে সীমাবদ্ধ করা যায়।
  • এছাড়াও আপনি ফর্মের আকার এবং প্রতিক্রিয়াশীলতা নিয়ন্ত্রণ করতে গ্রিড ক্লাসের ভিতরে ফর্ম রাখতে পারেন।
  • ".Disabled" ক্লাস ব্যবহার করে অক্ষম উপাদান থাকাও সম্ভব।

8 ফর্ম যাচাইকরণ

ফর্ম ব্যবহার করার গুরুত্বপূর্ণ অংশ হল ব্যবহারকারী দ্বারা প্রবেশ করা বাধ্যতামূলক ইনপুটগুলি যাচাই করা। ইনপুটগুলি যাচাই করার দুটি উপায় রয়েছে – বৈধতার জন্য কাস্টম স্ক্রিপ্ট ব্যবহার করুন বা বৈধতার অংশটি ব্রাউজারে ছেড়ে দিন।

8.1। কাস্টম স্ক্রিপ্ট সহ বৈধতা

কাস্টম ভ্যালিডেশন স্ক্রিপ্ট সহ একটি ফর্ম তৈরির কোড নিচে দেওয়া হল। যখন সাবমিট বাটনে ক্লিক করা হয় তখন স্ক্রিপ্ট ব্যবহারকারীর প্রয়োজনীয় সমস্ত ফর্ম ক্ষেত্রগুলি পরীক্ষা করবে।

<form class="container" id="form-validation" novalidate> <div class="row"> <div class="col-md-6 mb-3"> <label for="validation1">First name</label> <input type="text" class="form-control" id="validation1" placeholder="First name" value="Jhon" required> </div> <div class="col-md-6 mb-3"> <label for="validation2">Last name</label> <input type="text" class="form-control" id="validation2" placeholder="Last name" value="Doe" required> </div> </div> <div class="row"> <div class="col-md-6 mb-3"> <label for="validation3">City</label> <input type="text" class="form-control" id="validation3" placeholder="City" required> <div class="invalid-feedback"> Enter city. </div> </div> <div class="col-md-3 mb-3"> <label for="validation4">State</label> <input type="text" class="form-control" id="validation4" placeholder="State" required> <div class="invalid-feedback"> Enter state. </div> </div> <div class="col-md-3 mb-3"> <label for="validation5">Zip</label> <input type="text" class="form-control" id="validation5" placeholder="Zip" required> <div class="invalid-feedback"> Enter zip code. </div> </div> </div> <button class="btn btn-secondary btn-md" type="submit">Submit</button> </form> <script> // Custom JavaScript for Validation (function() { "use strict"; window.addEventListener("load", function() { var form = document.getElementById("form-validation"); form.addEventListener("submit", function(event) { if (form.checkValidity() == false) { event.preventDefault(); event.stopPropagation(); } form.classList.add("was-validated"); }, false); }, false); }()); </script>

বৈধতা নিচের ফলাফল দেখাবে যদি ব্যবহারকারী বাধ্যতামূলক ক্ষেত্রগুলি পূরণ না করে জমা বোতামে ক্লিক করেন।

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

8.2। ব্রাউজার যাচাইকরণ

ব্রাউজারকে ফর্ম জমা দেওয়া বন্ধ করার অনুমতি দেওয়ার জন্য আপনি উপরের ফর্ম কোডে কাস্টম স্ক্রিপ্টটি সরাতে পারেন। ক্রোম, সাফারি এবং ফায়ারফক্সের মতো সমস্ত আধুনিক ব্রাউজার দ্বারা ডিফল্ট যাচাইকরণ করা হয় ।

আপনি নিম্নলিখিত ত্রুটি বার্তাটি দেখতে পাবেন, যখন ব্যবহারকারী প্রয়োজনীয় ক্ষেত্রটি পূরণ করেনি এবং ফর্ম জমা দেয়নি।

কিভাবে বুটস্ট্র্যাপ 5 ফর্ম তৈরি করবেন?

মোড়ক উম্মচন

ব্যবহারকারীর ইনপুট সংগ্রহের জন্য যে কোনো ওয়েবপেজে ফর্ম গুরুত্বপূর্ণ উপাদান। বুটস্ট্র্যাপ 4 গ্রুপিং সহ বিভিন্ন ইনপুট ক্ষেত্র দেখানোর জন্য সহজ থেকে জটিল ফর্ম তৈরি করতে দেয়। কিন্তু সার্ভার সাইড এ জটিল বৈধতা এবং সংগৃহীত ডেটা প্রক্রিয়াকরণের মত একটি স্ক্রিপ্টিং ভাষা দরকার পিএইচপি । সুতরাং, ব্যবহারকারীর ডেটা পেতে এবং প্রক্রিয়া করার জন্য আপনার পিএইচপি -তে ফর্মগুলি সংহত করা উচিত।


বুটস্ট্র্যাপ 5 শিখুন (সূচক )


রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত