অর্থ ও বাণিজ্য

ভ্যানিলা জাভাস্ক্রিপ্ট এবং সিএসএস দিয়ে কীভাবে মাল্টি-স্টেপ ফর্ম তৈরি করবেন


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

কিন্তু শেষবার আপনি কখন একটি বহু-পদক্ষেপ ফর্ম তৈরি করেছিলেন? যে এমনকি আপনি মজা শোনাচ্ছে? চিন্তা করার মতো অনেক কিছু আছে এবং অনেকগুলি চলমান টুকরো যা পরিচালনা করা দরকার যে আমি আপনাকে একটি ফর্ম লাইব্রেরি বা এমনকি কিছু ধরণের ফর্ম উইজেট অবলম্বন করার জন্য আপনাকে দোষ দেব না যা আপনার জন্য এটি পরিচালনা করে।

কিন্তু হাত দ্বারা এটি করা একটি ভাল ব্যায়াম হতে পারে এবং মৌলিক বিষয়গুলিকে পালিশ করার একটি দুর্দান্ত উপায় হতে পারে। আমি আপনাকে দেখাব কিভাবে আমি আমার প্রথম মাল্টি-স্টেপ ফর্মটি তৈরি করেছি, এবং আমি আশা করি আপনি এটি দেখতে পাবেন না যে এটি কতটা সহজলভ্য হতে পারে তবে আমার কাজকে আরও ভাল করার জন্য এলাকাগুলিও স্পট করতে পারে।

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

আমি একটি তৈরি করেছি চূড়ান্ত কোডের জন্য GitHub রেপো আপনি পথ বরাবর এটি উল্লেখ করতে চান.

একটি বহু-পদক্ষেপ ফর্মের গঠন

আমাদের চাকরির আবেদনপত্রের চারটি বিভাগ রয়েছে, যার শেষটি একটি সারাংশ ভিউ, যেখানে আমরা ব্যবহারকারীকে তাদের জমা দেওয়ার আগে তাদের সমস্ত উত্তর দেখাই। এটি অর্জনের জন্য, আমরা এইচটিএমএলকে চারটি বিভাগে বিভক্ত করি, প্রতিটিকে একটি আইডি দিয়ে চিহ্নিত করা হয় এবং পৃষ্ঠার নীচে নেভিগেশন যোগ করি। আমি পরবর্তী বিভাগে আপনাকে সেই বেসলাইন এইচটিএমএল দেব।

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

গঠন এবং মৌলিক শৈলী

আমরা যুক্তির উপর আরও ফোকাস করব, তবে আমি কোড স্নিপেট এবং শেষে সম্পূর্ণ কোডের একটি লিঙ্ক প্রদান করব।

আমাদের পৃষ্ঠাগুলি ধরে রাখার জন্য একটি ফোল্ডার তৈরি করে শুরু করা যাক। তারপর, একটি তৈরি করুন index.html ফাইল এবং এটিতে নিম্নলিখিত পেস্ট করুন:

HTML খুলুন 

<form id="myForm">
  <section class="group-one" id="one">
    <div class="form-group">
      <div class="form-control">
        <label for="name">Name <span style="color: red;">*</span></label>
        <input type="text" id="name" name="name" placeholder="Enter your name">
      </div>

      <div class="form-control">
        <label for="idNum">ID number <span style="color: red;">*</span></label>
        <input type="number" id="idNum" name="idNum" placeholder="Enter your ID number">
      </div>
    </div>

    <div class="form-group">
      <div class="form-control">
        <label for="email">Email <span style="color: red;">*</span></label>
        <input type="email" id="email" name="email" placeholder="Enter your email">
      </div>

      <div class="form-control">
        <label for="birthdate">Date of Birth <span style="color: red;">*</span></label>
        <input type="date" id="birthdate" name="birthdate" max="2006-10-01" min="1924-01-01">
      </div>
    </div>
  </section>

  <section class="group-two" id="two">
    <div class="form-control">
      <label for="document">Upload CV <span style="color: red;">*</span></label>
      <input type="file" name="document" id="document">
    </div>

    <div class="form-control">
      <label for="department">Department <span style="color: red;">*</span></label>
      <select id="department" name="department">
        <option value="">Select a department</option>
        <option value="hr">Human Resources</option>
        <option value="it">Information Technology</option>
        <option value="finance">Finance</option>
      </select>
    </div>
  </section>

  <section class="group-three" id="three">
    <div class="form-control">
      <label for="skills">Skills (Optional)</label>
      <textarea id="skills" name="skills" rows="4" placeholder="Enter your skills"></textarea>
    </div>

    <div class="form-control">
      <input type="checkbox" name="terms" id="terms">
      <label for="terms">I agree to the terms and conditions <span style="color: red;">*</span></label>
    </div>

    <button id="btn" type="submit">Confirm and Submit</button>
  </section>
  
  <div class="arrows">
    <button type="button" id="navLeft">Previous</button>
    <span id="stepInfo"></span>
    <button type="button" id="navRight">Next</button>
  </div>
</form>

<script src="https://css-tricks.com/how-to-create-multi-step-forms-with-vanilla-javascript-and-css/script.js"></script>

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

পরবর্তী, একটি তৈরি করুন styles.css ফাইল করুন এবং এটিতে পেস্ট করুন:

খোলা বেস শৈলী 

:root 
  --primary-color: #8c852a;
  --secondary-color: #858034;


body 
  font-family: sans-serif;
  line-height: 1.4;
  margin: 0 auto;
  padding: 20px;
  background-color: #f4f4f4;
  max-width: 600px;


h1 
  text-align: center;


form 
  background: #fff;
  padding: 40px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;


.form-group 
  display: flex;
  gap: 7%;



.form-group > div 
  width: 100%;


input:not((type="checkbox")),
select,
textarea 
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;


.form-control 
  margin-bottom: 15px;


button 
  display: block;
  width: 100%;
  padding: 10px;
  color: white;
  background-color: var(--primary-color);
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;



button:hover 
  background-color: var(--secondary-color);


.group-two, .group-three 
  display: none;


.arrows 
  display: flex;
  justify-content: space-between
  align-items: center;
  margin-top: 10px;


#navLeft, #navRight 
  width: fit-content;


@media screen and (max-width: 600px) 
  .form-group 
    flex-direction: column;

ব্রাউজারে HTML ফাইলটি খুলুন, এবং আপনি নিম্নলিখিত স্ক্রিনশটে দুই-কলাম লেআউটের মতো কিছু পাবেন, বর্তমান পৃষ্ঠা নির্দেশক এবং নেভিগেশন সহ সম্পূর্ণ করুন।

দুই-কলাম বিন্যাসে চারটি ক্ষেত্র সহ তিন-পৃষ্ঠার ফর্মের একটি পৃষ্ঠা

ভ্যানিলা জাভাস্ক্রিপ্টের সাথে কার্যকারিতা যোগ করা হচ্ছে

এখন, একটি তৈরি করুন script.js HTML এবং CSS ফাইলগুলির মতো একই ডিরেক্টরিতে ফাইল করুন এবং এতে নিম্নলিখিত জাভাস্ক্রিপ্ট পেস্ট করুন:

বেস স্ক্রিপ্ট খুলুন 

const stepInfo = document.getElementById("stepInfo");
const navLeft = document.getElementById("navLeft");
const navRight = document.getElementById("navRight");
const form = document.getElementById("myForm");
const formSteps = ("one", "two", "three");

let currentStep = 0;

function updateStepVisibility() 
  formSteps.forEach((step) => 
    document.getElementById(step).style.display = "none";
  );

  document.getElementById(formSteps(currentStep)).style.display = "block";
  stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;
  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display =
  currentStep === formSteps.length - 1 ? "none" : "block";


document.addEventListener("DOMContentLoaded", () => 
  navLeft.style.display = "none";
  updateStepVisibility();
  navRight.addEventListener("click", () => 
    if (currentStep < formSteps.length - 1) 
      currentStep++;
      updateStepVisibility();
    
  );

  navLeft.addEventListener("click", () => 
    if (currentStep > 0) 
      currentStep--;
      updateStepVisibility();
    
  );
);

এই স্ক্রিপ্টটি একটি পদ্ধতি সংজ্ঞায়িত করে যা এর উপর নির্ভর করে বিভাগটিকে দেখায় এবং লুকিয়ে রাখে formStep ফর্ম সেকশনের আইডির সাথে সঙ্গতিপূর্ণ মান। এটা আপডেট stepInfo ফর্মের বর্তমান সক্রিয় বিভাগের সাথে। এই গতিশীল পাঠ্য ব্যবহারকারীর জন্য একটি অগ্রগতি সূচক হিসাবে কাজ করে।

এটি তারপরে যুক্তি যোগ করে যা পৃষ্ঠাটি লোড হওয়ার জন্য অপেক্ষা করে এবং বিভিন্ন ফর্ম বিভাগের মাধ্যমে সাইকেল চালানো সক্ষম করতে নেভিগেশন বোতামগুলিতে ইভেন্টগুলিতে ক্লিক করুন৷ আপনি যদি আপনার পৃষ্ঠাটি রিফ্রেশ করেন, আপনি দেখতে পাবেন যে বহু-পদক্ষেপ ফর্মটি প্রত্যাশিত হিসাবে কাজ করে৷

মাল্টি-স্টেপ ফর্ম নেভিগেশন

আসুন উপরের জাভাস্ক্রিপ্ট কোডটি কী করছে তার গভীরে ডুব দেওয়া যাক। মধ্যে updateStepVisibility() ফাংশন, আমরা প্রথমে একটি পরিষ্কার স্লেট পেতে সমস্ত বিভাগ লুকিয়ে রাখি:

formSteps.forEach((step) => 
  document.getElementById(step).style.display = "none";
);

তারপর, আমরা বর্তমানে সক্রিয় বিভাগ দেখাই:

document.getElementById(formSteps(currentStep)).style.display = "block";`

এর পরে, আমরা পাঠ্যটি আপডেট করি যা ফর্মের মাধ্যমে অগ্রগতি নির্দেশ করে:

stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;

অবশেষে, আমরা যদি প্রথম ধাপে থাকি তবে আমরা পূর্ববর্তী বোতামটি লুকাই এবং যদি আমরা শেষ বিভাগে থাকি তবে পরবর্তী বোতামটি লুকাই:

navLeft.style.display = currentStep === 0 ? "none" : "block";
navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

পেজ লোড হলে কি হয় তা দেখা যাক। প্রথম বিভাগে ফর্ম লোড হওয়ার সাথে সাথে আমরা প্রথমে পূর্ববর্তী বোতামটি লুকাই:

document.addEventListener("DOMContentLoaded", () => 
navLeft.style.display = "none";
updateStepVisibility();

তারপরে আমরা নেক্সট বোতামটি ধরি এবং একটি ক্লিক ইভেন্ট যোগ করি যা শর্তসাপেক্ষে বর্তমান ধাপের সংখ্যা বৃদ্ধি করে এবং তারপরে কল করে updateStepVisibility() ফাংশন, যা প্রদর্শিত হবে নতুন বিভাগ আপডেট করে:

navRight.addEventListener("click", () => 
  if (currentStep < formSteps.length - 1) 
    currentStep++;
    updateStepVisibility();
  
);

অবশেষে, আমরা পূর্ববর্তী বোতামটি ধরি এবং একই কাজ করি তবে বিপরীতে। এখানে, আমরা শর্তসাপেক্ষে ধাপ সংখ্যা হ্রাস করছি এবং কল করছি updateStepVisibility():

navLeft.addEventListener("click", () => 
  if (currentStep > 0) 
    currentStep--;
    updateStepVisibility();
  
);

হ্যান্ডলিং ত্রুটি

আপনি কি কখনও একটি ফর্ম পূরণ করার জন্য একটি ভাল 10+ মিনিট ব্যয় করেছেন শুধুমাত্র এটি জমা দেওয়ার জন্য এবং অস্পষ্ট ত্রুটিগুলি পেয়েছেন যা আপনাকে এটি এবং এটি সংশোধন করতে বলছে? আমি এটি পছন্দ করি যখন একটি ফর্ম আমাকে সরাসরি বলে যে কিছু ভুল হয়েছে যাতে আমি এটি সংশোধন করতে পারি আগে আমি কখনও জমা বোতাম পেতে. যে আমরা আমাদের ফর্ম কি করব.

আমাদের নীতি হল স্পষ্টভাবে নির্দেশ করা যে কোন কন্ট্রোলে ত্রুটি আছে এবং অর্থপূর্ণ ত্রুটি বার্তা দেওয়া। ব্যবহারকারী প্রয়োজনীয় ব্যবস্থা গ্রহণ করার সাথে সাথে ত্রুটিগুলি পরিষ্কার করুন৷ আমাদের ফর্ম কিছু বৈধতা যোগ করা যাক. প্রথমে, আসুন প্রয়োজনীয় ইনপুট উপাদানগুলি ধরি এবং এটি বিদ্যমানগুলির সাথে যুক্ত করি:

const nameInput = document.getElementById("name");
const idNumInput = document.getElementById("idNum");
const emailInput = document.getElementById("email");
const birthdateInput = document.getElementById("birthdate")
const documentInput = document.getElementById("document");
const departmentInput = document.getElementById("department");
const termsCheckbox = document.getElementById("terms");
const skillsInput = document.getElementById("skills");

তারপরে, পদক্ষেপগুলি যাচাই করতে একটি ফাংশন যুক্ত করুন:

যাচাইকরণ স্ক্রিপ্ট খুলুন 

function validateStep(step)

এখানে, আমরা প্রতিটি প্রয়োজনীয় ইনপুটের কিছু মান আছে কিনা এবং ইমেল ইনপুটে একটি বৈধ ইনপুট আছে কিনা তা পরীক্ষা করি। তারপর, আমরা সেই অনুযায়ী isValid বুলিয়ান সেট করি। আমরা একটি কল showError() ফাংশন, যা আমরা এখনও সংজ্ঞায়িত করিনি।

উপরে এই কোড পেস্ট করুন validateStep() ফাংশন:

function showError(input, message) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.add("error");
  errorSpan.textContent = message;

এখন, স্টাইলশীটে নিম্নলিখিত স্টাইলগুলি যুক্ত করুন:

যাচাইকরণ শৈলী খুলুন 

input:focus, select:focus, textarea:focus 
  outline: .5px solid var(--primary-color);


input.error, select.error, textarea.error 
  outline: .5px solid red;


.error-message 
  font-size: x-small;
  color: red;
  display: block;
  margin-top: 2px;


.arrows 
  color: var(--primary-color);
  font-size: 18px;
  font-weight: 900;



#navLeft, #navRight 
  display: flex;
  align-items: center;
  gap: 10px;


#stepInfo 
  color: var(--primary-color);

আপনি যদি ফর্মটি রিফ্রেশ করেন, আপনি দেখতে পাবেন যে ইনপুটগুলি বৈধ বলে বিবেচিত না হওয়া পর্যন্ত বোতামগুলি আপনাকে পরবর্তী বিভাগে নিয়ে যাবে না:

নাম, আইডি নম্বর, ইমেল এবং জন্ম তারিখের জন্য ক্ষেত্র সহ একটি কর্মী নিবন্ধন ফর্ম, সমস্ত প্রয়োজনীয় হিসাবে চিহ্নিত। ধাপ 1 এর 3 এর সাথে ক "পরবর্তী" বোতাম

অবশেষে, আমরা রিয়েল-টাইম ত্রুটি পরিচালনা যোগ করতে চাই যাতে ব্যবহারকারী সঠিক তথ্য ইনপুট করা শুরু করলে ত্রুটিগুলি চলে যায়। নীচে এই ফাংশন যোগ করুন validateStep() ফাংশন:

রিয়েল-টাইম যাচাইকরণ স্ক্রিপ্ট খুলুন 

function setupRealtimeValidation() 
  nameInput.addEventListener("input", () => 
    if (nameInput.value.trim() !== "") clearError(nameInput);
  );

  idNumInput.addEventListener("input", () => 
    if (idNumInput.value.trim() !== "") clearError(idNumInput);
  );
  
  emailInput.addEventListener("input", () => 
    if (emailInput.validity.valid) clearError(emailInput);
  );
  
  birthdateInput.addEventListener("change", () => 
    if (birthdateInput.value !== "") clearError(birthdateInput);
  );
  
  documentInput.addEventListener("change", () => 
    if (documentInput.files(0)) clearError(documentInput);
  );
  
  departmentInput.addEventListener("change", () => 
    if (departmentInput.value !== "") clearError(departmentInput);
  );
  
  termsCheckbox.addEventListener("change", () => 
    if (termsCheckbox.checked) clearError(termsCheckbox);
  );

এই ফাংশনটি ত্রুটিগুলি সাফ করে যদি ইনপুটটি আর ইনপুট শুনে এবং ইভেন্টগুলি পরিবর্তন করে ত্রুটিগুলি সাফ করার জন্য একটি ফাংশন কল করে ইনপুটটি অবৈধ না হয়। পেস্ট করুন clearError() নিচে ফাংশন showError() এক:

function clearError(input) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.remove("error");
  errorSpan.textContent = "";

এবং এখন ত্রুটিগুলি পরিষ্কার হয় যখন ব্যবহারকারী সঠিক মান টাইপ করে:

নাম, ইমেল, আইডি নম্বর এবং জন্ম তারিখের জন্য ক্ষেত্র সহ একটি কর্মী নিবন্ধন ফর্ম। ত্রুটি বার্তা অনুপস্থিত বা অবৈধ ইনপুট নির্দেশ করে. ক "৩টির ​​মধ্যে ১ম ধাপ" লেবেল এবং "পরবর্তী" বোতাম দেখানো হয়।

মাল্টি-স্টেপ ফর্মটি এখন ত্রুটিগুলি সুন্দরভাবে পরিচালনা করে। আপনি যদি ফর্মের শেষ পর্যন্ত ত্রুটিগুলি রাখার সিদ্ধান্ত নেন, তাহলে অন্তত, ব্যবহারকারীকে ত্রুটিপূর্ণ ফর্ম নিয়ন্ত্রণে ফিরে যান এবং কতগুলি ত্রুটি ঠিক করতে হবে তার কিছু ইঙ্গিত দেখান৷

ফর্ম জমা হ্যান্ডলিং

একটি মাল্টি-স্টেপ ফর্মে, ব্যবহারকারীরা জমা দেওয়ার আগে তাদের সব উত্তরের সারসংক্ষেপ দেখান এবং প্রয়োজনে তাদের উত্তর সম্পাদনা করার বিকল্প অফার করা মূল্যবান। ব্যক্তি পিছনে নেভিগেট না করে পূর্ববর্তী পদক্ষেপগুলি দেখতে পারে না, তাই শেষ ধাপে একটি সারাংশ দেখানো আশ্বাস দেয় এবং কোনো ভুল সংশোধন করার সুযোগ দেয়।

এই সারাংশ ভিউ ধরে রাখতে মার্কআপে একটি চতুর্থ বিভাগ যোগ করুন এবং এর মধ্যে জমা বোতামটি সরান। তৃতীয় বিভাগের ঠিক নীচে এটি পেস্ট করুন index.html:

HTML খুলুন 

<section class="group-four" id="four">
  <div class="summary-section">
    <p>Name: </p>
    <p id="name-val"></p>
    <button type="button" class="edit-btn" id="name-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>ID Number: </p>
    <p id="id-val"></p>
    <button type="button" class="edit-btn" id="id-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>Email: </p>
    <p id="email-val"></p>
    <button type="button" class="edit-btn" id="email-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>Date of Birth: </p>
    <p id="bd-val"></p>
    <button type="button" class="edit-btn" id="bd-edit">
    <span>✎</span>
    <span>Edit</span>
    </button>
  </div>
  
  <div class="summary-section">
    <p>CV/Resume: </p>
    <p id="cv-val"></p>
    <button type="button" class="edit-btn" id="cv-edit">
      <span>✎</span>
      <span>Edit</span>
    </button>
  </div>
    
  <div class="summary-section">
    <p>Department: </p>
    <p id="dept-val"></p>
    <button type="button" class="edit-btn" id="dept-edit">
      <span>✎</span>
      <span>Edit</span>
    </button>
  </div>
    
  <div class="summary-section">
    <p>Skills: </p>
    <p id="skills-val"></p>
    <button type="button" class="edit-btn" id="skills-edit">
      <span>✎</span>
      <span>Edit</span>
    </button>
  </div>
  
  <button id="btn" type="submit">Confirm and Submit</button>
</section>

তারপর আপডেট করুন formStep পড়তে আপনার জাভাস্ক্রিপ্টে:

const formSteps = ("one", "two", "three", "four");

অবশেষে, নিম্নলিখিত ক্লাস যোগ করুন styles.css:

.summary-section 
  display: flex;
  align-items: center;
  gap: 10px;


.summary-section p:first-child 
  width: 30%;
  flex-shrink: 0;
  border-right: 1px solid var(--secondary-color);


.summary-section p:nth-child(2) 
  width: 45%;
  flex-shrink: 0;
  padding-left: 10px;


.edit-btn 
  width: 25%;
  margin-left: auto;
  background-color: transparent;
  color: var(--primary-color);
  border: .7px solid var(--primary-color);
  border-radius: 5px;
  padding: 5px;


.edit-btn:hover 
  border: 2px solid var(--primary-color);
  font-weight: bolder;
  background-color: transparent;

এখন, উপরের অংশে নিম্নলিখিত যোগ করুন script.js ফাইল যেখানে অন্য constগুলি হল:

const nameVal = document.getElementById("name-val");
const idVal = document.getElementById("id-val");
const emailVal = document.getElementById("email-val");
const bdVal = document.getElementById("bd-val")
const cvVal = document.getElementById("cv-val");
const deptVal = document.getElementById("dept-val");
const skillsVal = document.getElementById("skills-val");
const editButtons = 
  "name-edit": 0,
  "id-edit": 0,
  "email-edit": 0,
  "bd-edit": 0,
  "cv-edit": 1,
  "dept-edit": 1,
  "skills-edit": 2
;

তারপর এই ফাংশন যোগ করুন scripts.js:

function updateSummaryValues() 
  nameVal.textContent = nameInput.value;
  idVal.textContent = idNumInput.value;
  emailVal.textContent = emailInput.value;
  bdVal.textContent = birthdateInput.value;

  const fileName = documentInput.files(0)?.name;
  if (fileName) 
  const extension = fileName.split(".").pop();
  const baseName = fileName.split(".")(0);
  const truncatedName = baseName.length > 10 ? baseName.substring(0, 10) + "..." : baseName;
  cvVal.textContent = `$truncatedName.$extension`;
   else 
    cvVal.textContent = "No file selected";
  

  deptVal.textContent = departmentInput.value;
  skillsVal.textContent = skillsInput.value || "No skills submitted";
}

এটি গতিশীলভাবে ফর্মের সারাংশ বিভাগে ইনপুট মান সন্নিবেশ করায়, ফাইলের নামগুলিকে ছেঁটে দেয় এবং ইনপুটের জন্য একটি ফলব্যাক পাঠ্য অফার করে যা প্রয়োজন ছিল না।

তারপর আপডেট করুন updateStepVisibility() নতুন ফাংশন কল করতে ফাংশন:

function updateStepVisibility() 
  formSteps.forEach((step) => 
    document.getElementById(step).style.display = "none";
  );

  document.getElementById(formSteps(currentStep)).style.display = "block";
  stepInfo.textContent = `Step $currentStep + 1 of $formSteps.length`;
  if (currentStep === 3) 
    updateSummaryValues();
  

  navLeft.style.display = currentStep === 0 ? "none" : "block";
  navRight.style.display = currentStep === formSteps.length - 1 ? "none" : "block";

অবশেষে, এই যোগ করুন DOMContentLoaded ঘটনা শ্রোতা:

Object.keys(editButtons).forEach((buttonId) => 
  const button = document.getElementById(buttonId);
  button.addEventListener("click", (e) => 
    currentStep = editButtons(buttonId);
    updateStepVisibility();
  );
);

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

কর্মী নিবন্ধন ফর্ম প্রতিটি ক্ষেত্র সম্পাদনা করার বিকল্প সহ ব্যক্তিগত বিবরণ প্রদর্শন করে, ক "নিশ্চিত করুন এবং জমা দিন" বোতাম, এবং পূর্ববর্তী পদক্ষেপের জন্য নেভিগেশন।

এবং এখন, আমরা আমাদের ফর্ম জমা দিতে পারি:

form.addEventListener("submit", (e) => 
  e.preventDefault();

  if (validateStep(2)) 
    alert("Form submitted successfully!");
    form.reset();
    currentFormStep = 0;
    updateStepVisibility();

);

আমাদের মাল্টি-স্টেপ ফর্ম এখন ব্যবহারকারীকে জমা দেওয়ার আগে তাদের দেওয়া সমস্ত তথ্য সম্পাদনা করতে এবং দেখতে দেয়।

অ্যাক্সেসিবিলিটি টিপস

মাল্টি-স্টেপ ফর্মগুলিকে অ্যাক্সেসযোগ্য করা বেসিকগুলি দিয়ে শুরু হয়: শব্দার্থিক HTML ব্যবহার করে। এটি অর্ধেক যুদ্ধ। উপযুক্ত ফর্ম লেবেল ব্যবহার করে এটি ঘনিষ্ঠভাবে অনুসরণ করা হয়।

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

ব্যবহারকারীকে মতামত প্রদান করা এর একটি গুরুত্বপূর্ণ অংশ; নির্দিষ্ট সময়ের পরে ব্যবহারকারীর প্রতিক্রিয়া স্বয়ংক্রিয়ভাবে বরখাস্ত করা দুর্দান্ত নয় তবে ব্যবহারকারীকে নিজেরাই এটি খারিজ করার অনুমতি দেওয়া। বৈসাদৃশ্য এবং ফন্ট পছন্দের দিকে মনোযোগ দেওয়াও গুরুত্বপূর্ণ, কারণ উভয়ই আপনার ফর্মটি কতটা পাঠযোগ্য তা প্রভাবিত করে।

আরও প্রযুক্তিগত অ্যাক্সেসযোগ্যতার জন্য মার্কআপে নিম্নলিখিত সমন্বয়গুলি করা যাক:

  1. যোগ করুন aria-required="true" দক্ষতা ছাড়া সব ইনপুট. এটি স্ক্রীন রিডারদের জানাতে দেয় যে ক্ষেত্রগুলি স্থানীয় বৈধতার উপর নির্ভর না করে প্রয়োজনীয়৷
  2. যোগ করুন role="alert" ত্রুটি বিস্তৃত পর্যন্ত. এটি স্ক্রীন রিডারদের ইনপুটটি একটি ত্রুটির অবস্থায় থাকা অবস্থায় এটিকে গুরুত্ব দিতে জানতে সাহায্য করে।
  3. যোগ করুন role="status" aria-live="polite" থেকে .stepInfo. এটি স্ক্রীন রিডারদের বুঝতে সাহায্য করবে যে ধাপের তথ্য একটি স্টেটে ট্যাব রাখে, এবং aria-লাইভ ভদ্রভাবে সেট করা ইঙ্গিত দেয় যে মান পরিবর্তন হলে, এটি অবিলম্বে ঘোষণা করার প্রয়োজন নেই।

স্ক্রিপ্ট ফাইলে, প্রতিস্থাপন করুন showError() এবং clearError() নিম্নলিখিতগুলির সাথে ফাংশন:

function showError(input, message) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.add("error");
  input.setAttribute("aria-invalid", "true");
  input.setAttribute("aria-describedby", errorSpan.id);
  errorSpan.textContent = message;
  

  function clearError(input) 
  const formControl = input.parentElement;
  const errorSpan = formControl.querySelector(".error-message");
  input.classList.remove("error");
  input.removeAttribute("aria-invalid");
  input.removeAttribute("aria-describedby");
  errorSpan.textContent = "";

এখানে, আমরা প্রোগ্রাম্যাটিকভাবে অ্যাট্রিবিউট যোগ করি এবং অপসারণ করি যা স্পষ্টভাবে ইনপুটটিকে তার ত্রুটির স্প্যানের সাথে সংযুক্ত করে এবং দেখায় যে এটি একটি অবৈধ অবস্থায় আছে।

অবশেষে, আসুন প্রতিটি বিভাগের প্রথম ইনপুটে ফোকাস যোগ করা যাক; শেষে নিম্নলিখিত কোড যোগ করুন updateStepVisibility() ফাংশন:

const currentStepElement = document.getElementById(formSteps(currentStep));
const firstInput = currentStepElement.querySelector(
  "input, select, textarea"
);

if (firstInput) 
  firstInput.focus();

এবং এর সাথে, মাল্টি-স্টেপ ফর্মটি অনেক বেশি অ্যাক্সেসযোগ্য।

উপসংহার

আমরা সেখানে যাই, চাকরির আবেদনের জন্য একটি চার-অংশের মাল্টি-স্টেপ ফর্ম! যেমনটি আমি এই নিবন্ধের শীর্ষে বলেছি, এখানে অনেক কিছু ঘাঁটাঘাঁটি করার আছে — এতটাই যে আমি একটি আউট-অফ-দ্য-বক্স সমাধান খোঁজার জন্য আপনাকে দোষ দেব না।

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

এবং এই ঠিক কিভাবে আমি এটা যোগাযোগ! আবার, আমি কতদূর যেতে পারি তা দেখার জন্য আমি এটিকে একটি ব্যক্তিগত চ্যালেঞ্জ হিসাবে গ্রহণ করেছি এবং আমি এতে বেশ খুশি। কিন্তু আমি জানতে চাই যে আপনি এটিকে ব্যবহারকারীর অভিজ্ঞতার প্রতি আরও বেশি সচেতন এবং অ্যাক্সেসযোগ্যতার বিষয়ে বিবেচনা করার জন্য অতিরিক্ত সুযোগগুলি দেখতে পান কিনা।

তথ্যসূত্র

এখানে কিছু প্রাসঙ্গিক লিঙ্ক রয়েছে যা আমি এই নিবন্ধটি লেখার সময় উল্লেখ করেছি:

  1. কিভাবে একটি ওয়েব ফর্ম গঠন (MDN)
  2. বহু-পৃষ্ঠার ফর্ম (W3C.org)
  3. অ্যাক্সেসযোগ্য ফর্ম তৈরি করুন (A11y প্রকল্প)



Source link

Share
Facebook Twitter Pinterest Linkedin

Related Posts