আরো সক্ষম ফর্ম নিয়ন্ত্রণ

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

Arthur Evans

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

যাইহোক, বিল্ট-ইন এইচটিএমএল ফর্ম কন্ট্রোলের বৈশিষ্ট্যগুলি প্রতিলিপি করা কঠিন হতে পারে। একটি <input> উপাদান স্বয়ংক্রিয়ভাবে পেয়ে যায় যখন আপনি এটিকে একটি ফর্মে যোগ করেন তখন কিছু বৈশিষ্ট্য বিবেচনা করুন:

• ইনপুট স্বয়ংক্রিয়ভাবে ফর্মের নিয়ন্ত্রণ তালিকায় যোগ করা হয়।
• ইনপুট মান স্বয়ংক্রিয়ভাবে ফর্ম সঙ্গে জমা হয়.
• ইনপুট ফর্ম যাচাইকরণে অংশগ্রহণ করে। আপনি :valid এবং :invalid pseudoclasses ব্যবহার করে ইনপুট স্টাইল করতে পারেন।
• যখন ফর্মটি রিসেট করা হয়, যখন ফর্মটি পুনরায় লোড করা হয়, বা যখন ব্রাউজার ফর্ম এন্ট্রি স্বয়ংক্রিয়ভাবে পূরণ করার চেষ্টা করে তখন ইনপুটটি সূচিত হয়৷

কাস্টম ফর্ম কন্ট্রোলে সাধারণত এই বৈশিষ্ট্যগুলির কয়েকটি থাকে। বিকাশকারীরা জাভাস্ক্রিপ্টের কিছু সীমাবদ্ধতাকে ঘিরে কাজ করতে পারে, যেমন ফর্ম জমা দেওয়ার জন্য একটি ফর্মে একটি লুকানো <input> যোগ করা। কিন্তু অন্যান্য বৈশিষ্ট্য শুধুমাত্র জাভাস্ক্রিপ্টে প্রতিলিপি করা যাবে না।

দুটি নতুন ওয়েব বৈশিষ্ট্য কাস্টম ফর্ম নিয়ন্ত্রণ তৈরি করা সহজ করে, এবং বর্তমান কাস্টম নিয়ন্ত্রণের সীমাবদ্ধতাগুলি সরিয়ে দেয়:

• formdata ইভেন্টটি একটি নির্বিচারে জাভাস্ক্রিপ্ট অবজেক্টকে ফর্ম জমাদানে অংশগ্রহণ করতে দেয়, যাতে আপনি লুকানো <input> ইনপুট> ব্যবহার না করে ফর্ম ডেটা যোগ করতে পারেন।
• ফর্ম-সম্পর্কিত কাস্টম উপাদান API কাস্টম উপাদানগুলিকে আরও বিল্ট-ইন ফর্ম নিয়ন্ত্রণের মতো কাজ করতে দেয়।

এই দুটি বৈশিষ্ট্য নতুন ধরনের নিয়ন্ত্রণ তৈরি করতে ব্যবহার করা যেতে পারে যা আরও ভাল কাজ করে।

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

ইভেন্ট-ভিত্তিক API

formdata ইভেন্ট হল একটি নিম্ন-স্তরের API যা যেকোন জাভাস্ক্রিপ্ট কোডকে ফর্ম জমাদানে অংশগ্রহণ করতে দেয়। প্রক্রিয়া এই মত কাজ করে:

1. আপনি যে ফর্মের সাথে ইন্টারঅ্যাক্ট করতে চান তাতে আপনি একটি formdata ইভেন্ট লিসেনার যোগ করুন।
2. যখন একজন ব্যবহারকারী সাবমিট বোতামে ক্লিক করেন, ফর্মটি একটি formdata ইভেন্ট ফায়ার করে, যার মধ্যে একটি FormData অবজেক্ট রয়েছে যা জমা দেওয়া সমস্ত ডেটা ধারণ করে।
3. প্রতিটি formdata শ্রোতা ফর্ম জমা দেওয়ার আগে ডেটা যোগ করার বা সংশোধন করার সুযোগ পায়।

এখানে একটি formdata ইভেন্ট লিসেনারে একটি একক মান পাঠানোর একটি উদাহরণ রয়েছে:

const form = document.querySelector('form');
// FormData event is sent on <form> submission, before transmission.
// The event has a formData property
form.addEventListener('formdata', ({formData}) => {
  // https://developer.mozilla.org/docs/Web/API/FormData
  formData.append('my-input', myInputValue);
});

গ্লিচে আমাদের উদাহরণ ব্যবহার করে এটি চেষ্টা করুন। এপিআই কার্যকরী দেখতে এটিকে Chrome 77 বা পরবর্তীতে চালাতে ভুলবেন না।

ব্রাউজার সামঞ্জস্য

ব্রাউজার সমর্থন

• 5
• 12
• 4
• 5

উৎস

ফর্ম-সম্পর্কিত কাস্টম উপাদান

আপনি যেকোন ধরনের কম্পোনেন্টের সাথে ইভেন্ট-ভিত্তিক API ব্যবহার করতে পারেন, তবে এটি আপনাকে জমা দেওয়ার প্রক্রিয়ার সাথে ইন্টারঅ্যাক্ট করতে দেয়।

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

• আপনি যখন একটি <form> ভিতরে একটি ফর্ম-সম্পর্কিত কাস্টম উপাদান রাখেন, তখন এটি স্বয়ংক্রিয়ভাবে ফর্মের সাথে যুক্ত হয়, যেমন একটি ব্রাউজার-প্রদত্ত নিয়ন্ত্রণ৷
• উপাদানটিকে একটি <label> উপাদান ব্যবহার করে লেবেল করা যেতে পারে।
• উপাদানটি একটি মান সেট করতে পারে যা ফর্মের সাথে স্বয়ংক্রিয়ভাবে জমা হয়।
• উপাদানটি বৈধ ইনপুট আছে কিনা তা নির্দেশ করে একটি পতাকা সেট করতে পারে। যদি ফর্ম নিয়ন্ত্রণগুলির একটিতে অবৈধ ইনপুট থাকে তবে ফর্মটি জমা দেওয়া যাবে না৷
• উপাদানটি ফর্ম লাইফসাইকেলের বিভিন্ন অংশের জন্য কলব্যাক প্রদান করতে পারে-যেমন যখন ফর্মটি অক্ষম করা হয় বা এটির ডিফল্ট অবস্থায় পুনরায় সেট করা হয়।
• উপাদানটি ফর্ম কন্ট্রোলের জন্য স্ট্যান্ডার্ড CSS সিউডোক্লাস সমর্থন করে, যেমন :disabled এবং :invalid ।

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

দ্রষ্টব্য: এই বিভাগটি কাস্টম উপাদানগুলির সাথে একটি প্রাথমিক পরিচিতি অনুমান করে৷ কাস্টম উপাদানগুলির পরিচিতির জন্য, কাস্টম উপাদান v1 দেখুন: ওয়েব ফান্ডামেন্টালগুলিতে পুনরায় ব্যবহারযোগ্য ওয়েব উপাদান ।

একটি ফর্ম-সম্পর্কিত কাস্টম উপাদান সংজ্ঞায়িত করা

একটি কাস্টম উপাদানকে একটি ফর্ম-সম্পর্কিত কাস্টম উপাদানে পরিণত করতে কয়েকটি অতিরিক্ত পদক্ষেপের প্রয়োজন:

• আপনার কাস্টম এলিমেন্ট ক্লাসে একটি স্ট্যাটিক formAssociated প্রপার্টি যোগ করুন। এটি ব্রাউজারকে উপাদানটিকে একটি ফর্ম নিয়ন্ত্রণের মতো আচরণ করতে বলে।
• setFormValue() এবং setValidity() মতো ফর্ম নিয়ন্ত্রণের জন্য অতিরিক্ত পদ্ধতি এবং বৈশিষ্ট্যগুলিতে অ্যাক্সেস পেতে উপাদানটিতে attachInternals() পদ্ধতিতে কল করুন।
• name , value এবং validity মতো ফর্ম নিয়ন্ত্রণ দ্বারা সমর্থিত সাধারণ বৈশিষ্ট্য এবং পদ্ধতিগুলি যোগ করুন।

এই আইটেমগুলি একটি মৌলিক কাস্টম উপাদান সংজ্ঞার সাথে কীভাবে ফিট করে তা এখানে:

// Form-associated custom elements must be autonomous custom elements--
// meaning they must extend HTMLElement, not one of its subclasses.
class MyCounter extends HTMLElement {

  // Identify the element as a form-associated custom element
  static formAssociated = true;

  constructor() {
    super();
    // Get access to the internal form control APIs
    this.internals_ = this.attachInternals();
    // internal value for this control
    this.value_ = 0;
  }

  // Form controls usually expose a "value" property
  get value() { return this.value_; }
  set value(v) { this.value_ = v; }

  // The following properties and methods aren't strictly required,
  // but browser-level form controls provide them. Providing them helps
  // ensure consistency with browser-provided controls.
  get form() { return this.internals_.form; }
  get name() { return this.getAttribute('name'); }
  get type() { return this.localName; }
  get validity() {return this.internals_.validity; }
  get validationMessage() {return this.internals_.validationMessage; }
  get willValidate() {return this.internals_.willValidate; }

  checkValidity() { return this.internals_.checkValidity(); }
  reportValidity() {return this.internals_.reportValidity(); }

  …
}
customElements.define('my-counter', MyCounter);

একবার নিবন্ধিত হলে, আপনি যেখানেই ব্রাউজার-প্রদত্ত ফর্ম নিয়ন্ত্রণ ব্যবহার করবেন সেখানে আপনি এই উপাদানটি ব্যবহার করতে পারেন:

<form>
  <label>Number of bunnies: <my-counter></my-counter></label>
  <button type="submit">Submit</button>
</form>

একটি মান সেট করা হচ্ছে

attachInternals() পদ্ধতি একটি ElementInternals অবজেক্ট প্রদান করে যা ফর্ম কন্ট্রোল API তে অ্যাক্সেস প্রদান করে। এর মধ্যে সবচেয়ে মৌলিক হল setFormValue() পদ্ধতি, যা নিয়ন্ত্রণের বর্তমান মান নির্ধারণ করে।

setFormValue() পদ্ধতিটি তিনটি ধরণের মানগুলির মধ্যে একটি গ্রহণ করতে পারে:

• একটি স্ট্রিং মান।
• একটি File অবজেক্ট।
• একটি FormData অবজেক্ট। আপনি একাধিক মান পাস করতে একটি FormData অবজেক্ট ব্যবহার করতে পারেন (উদাহরণস্বরূপ, একটি ক্রেডিট কার্ড ইনপুট নিয়ন্ত্রণ একটি কার্ড নম্বর, মেয়াদ শেষ হওয়ার তারিখ এবং যাচাইকরণ কোড পাস করতে পারে)।

একটি সাধারণ মান সেট করতে:

this.internals_.setFormValue(this.value_);

একাধিক মান সেট করতে, আপনি এই মত কিছু করতে পারেন:

// Use the control's name as the base name for submitted data
const n = this.getAttribute('name');
const entries = new FormData();
entries.append(n + '-first-name', this.firstName_);
entries.append(n + '-last-name', this.lastName_);
this.internals_.setFormValue(entries);

দ্রষ্টব্য: setFormValue() পদ্ধতিটি একটি সেকেন্ড, ঐচ্ছিক state পরামিতি নেয়, যা নিয়ন্ত্রণের অভ্যন্তরীণ অবস্থা সংরক্ষণ করতে ব্যবহৃত হয়। আরও তথ্যের জন্য, ফর্মের অবস্থা পুনরুদ্ধার করা দেখুন।

ইনপুট বৈধতা

আপনার নিয়ন্ত্রণ অভ্যন্তরীণ অবজেক্টে setValidity() পদ্ধতিতে কল করে ফর্ম যাচাইকরণে অংশগ্রহণ করতে পারে।

// Assume this is called whenever the internal value is updated
onUpdateValue() {
  if (!this.matches(':disabled') && this.hasAttribute('required') &&
      this.value_ < 0) {
    this.internals_.setValidity({customError: true}, 'Value cannot be negative.');
  }
  else {
    this.internals_.setValidity({});
  }
  this.internals.setFormValue(this.value_);
}

আপনি একটি ফর্ম-সম্পর্কিত কাস্টম উপাদানকে :valid এবং :invalid pseudoclasses দিয়ে স্টাইল করতে পারেন, ঠিক একটি বিল্ট-ইন ফর্ম নিয়ন্ত্রণের মতো।

দ্রষ্টব্য: যদিও আপনি একটি বৈধতা বার্তা সেট করতে পারেন, Chrome বর্তমানে ফর্ম-সম্পর্কিত কাস্টম উপাদানগুলির জন্য বৈধতা বার্তা প্রদর্শন করতে ব্যর্থ হয়৷

লাইফসাইকেল কলব্যাক

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

void formAssociatedCallback(form)

যখন ব্রাউজার উপাদানটিকে একটি ফর্ম উপাদানের সাথে সংযুক্ত করে বা একটি ফর্ম উপাদান থেকে উপাদানটিকে বিচ্ছিন্ন করে তখন বলা হয়৷

void formDisabledCallback(disabled)

উপাদানটির disabled অবস্থার পরিবর্তনের পরে কল করা হয়, হয় এই উপাদানটির disabled বৈশিষ্ট্য যুক্ত বা সরানো হয়েছে বলে; অথবা কারণ disabled অবস্থা একটি <fieldset> এ পরিবর্তিত হয়েছে যা এই উপাদানটির পূর্বপুরুষ। disabled প্যারামিটার উপাদানটির নতুন অক্ষম অবস্থার প্রতিনিধিত্ব করে। উপাদানটি, উদাহরণস্বরূপ, তার ছায়া DOM-এ উপাদানগুলি নিষ্ক্রিয় করতে পারে যখন এটি নিষ্ক্রিয় করা হয়।

void formResetCallback()

ফর্ম রিসেট করার পরে কল করা হয়। উপাদানটি নিজেকে কিছু ধরণের ডিফল্ট অবস্থায় পুনরায় সেট করা উচিত। <input> উপাদানগুলির জন্য, এটি সাধারণত মার্কআপে সেট করা value বৈশিষ্ট্যের সাথে মেলে value বৈশিষ্ট্য নির্ধারণ করে (বা একটি চেকবক্সের ক্ষেত্রে, checked বৈশিষ্ট্যের সাথে মেলে checked বৈশিষ্ট্য সেট করা।

void formStateRestoreCallback(state, mode)

দুটি পরিস্থিতিতে কল করা হয়েছে:

• যখন ব্রাউজার উপাদানটির অবস্থা পুনরুদ্ধার করে (উদাহরণস্বরূপ, নেভিগেশনের পরে, বা যখন ব্রাউজার পুনরায় চালু হয়)। mode যুক্তি এই ক্ষেত্রে "restore" হয়.
• যখন ব্রাউজারের ইনপুট-সহায়তা বৈশিষ্ট্য যেমন ফর্ম অটোফিলিং একটি মান সেট করে। mode যুক্তি এই ক্ষেত্রে "autocomplete" হয়.

প্রথম আর্গুমেন্টের ধরন নির্ভর করে কিভাবে setFormValue() পদ্ধতি কল করা হয়েছে তার উপর। আরও বিশদ বিবরণের জন্য, ফর্মের অবস্থা পুনরুদ্ধার করা দেখুন।

ফর্মের অবস্থা পুনরুদ্ধার করা হচ্ছে

কিছু পরিস্থিতিতে—যেমন কোনো পৃষ্ঠায় নেভিগেট করার সময়, বা ব্রাউজারটি পুনরায় চালু করার সময়, ব্রাউজারটি ফর্মটিকে সেই অবস্থায় পুনরুদ্ধার করার চেষ্টা করতে পারে যা ব্যবহারকারী এটিকে রেখে গেছেন।

একটি ফর্ম-সম্পর্কিত কাস্টম উপাদানের জন্য, পুনরুদ্ধার করা অবস্থাটি আসে আপনি setFormValue() পদ্ধতিতে পাস করা মান(গুলি) থেকে। আপনি একটি একক মান প্যারামিটার সহ পদ্ধতিটিকে কল করতে পারেন, যেমনটি আগের উদাহরণগুলিতে দেখানো হয়েছে, বা দুটি পরামিতি সহ:

this.internals_.setFormValue(value, state);

value নিয়ন্ত্রণের জমাযোগ্য মান উপস্থাপন করে। ঐচ্ছিক state প্যারামিটার হল নিয়ন্ত্রণের অবস্থার একটি অভ্যন্তরীণ উপস্থাপনা, এতে এমন ডেটা অন্তর্ভুক্ত থাকতে পারে যা সার্ভারে পাঠানো হয় না। state প্যারামিটারটি value প্যারামিটারের মতো একই প্রকার নেয়—এটি একটি স্ট্রিং, File বা FormData অবজেক্ট হতে পারে।

state প্যারামিটারটি উপযোগী হয় যখন আপনি একা মানের উপর ভিত্তি করে একটি নিয়ন্ত্রণের অবস্থা পুনরুদ্ধার করতে পারবেন না। উদাহরণস্বরূপ, ধরুন আপনি একাধিক মোড সহ একটি রঙ চয়নকারী তৈরি করেছেন: একটি প্যালেট বা একটি আরজিবি রঙের চাকা৷ সাবমিট করার যোগ্য মানটি একটি ক্যানোনিকাল আকারে নির্বাচিত রঙ হবে, যেমন "#7fff00" । কিন্তু একটি নির্দিষ্ট অবস্থায় নিয়ন্ত্রণ পুনরুদ্ধার করতে, আপনাকে এটি কোন মোডে ছিল তাও জানতে হবে, তাই রাজ্যটি "palette/#7fff00" এর মতো দেখতে পারে।

this.internals_.setFormValue(this.value_,
    this.mode_ + '/' + this.value_);

আপনার কোড সঞ্চিত রাষ্ট্র মান উপর ভিত্তি করে তার অবস্থা পুনরুদ্ধার করতে হবে.

formStateRestoreCallback(state, mode) {
  if (mode == 'restore') {
    // expects a state parameter in the form 'controlMode/value'
    [controlMode, value] = state.split('/');
    this.mode_ = controlMode;
    this.value_ = value;
  }
  // Chrome currently doesn't handle autofill for form-associated
  // custom elements. In the autofill case, you might need to handle
  // a raw value.
}

একটি সহজ নিয়ন্ত্রণের ক্ষেত্রে (উদাহরণস্বরূপ একটি সংখ্যা ইনপুট), মানটি সম্ভবত নিয়ন্ত্রণটিকে তার আগের অবস্থায় ফিরিয়ে আনার জন্য যথেষ্ট। setFormValue() কল করার সময় আপনি যদি state বাদ দেন, তাহলে মানটি formStateRestoreCallback() এ পাস করা হবে।

formStateRestoreCallback(state, mode) {
  // Simple case, restore the saved value
  this.value_ = state;
}

একটি কাজের উদাহরণ

নিম্নলিখিত উদাহরণটি ফর্ম-সম্পর্কিত কাস্টম উপাদানগুলির অনেকগুলি বৈশিষ্ট্যকে একত্রিত করে৷ এপিআই কার্যকরী দেখতে এটিকে Chrome 77 বা পরবর্তীতে চালাতে ভুলবেন না।

বৈশিষ্ট্য সনাক্তকরণ

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

if ('FormDataEvent' in window) {
  // formdata event is supported
}

if ('ElementInternals' in window &&
    'setFormValue' in window.ElementInternals.prototype) {
  // Form-associated custom elements are supported
}

উপসংহার

formdata ইভেন্ট এবং ফর্ম-সম্পর্কিত কাস্টম উপাদানগুলি কাস্টম ফর্ম নিয়ন্ত্রণ তৈরির জন্য নতুন সরঞ্জাম সরবরাহ করে।

formdata ইভেন্ট আপনাকে কোনো নতুন ক্ষমতা দেয় না, তবে এটি আপনাকে একটি লুকানো <input> উপাদান তৈরি না করেই জমা দেওয়ার প্রক্রিয়াতে আপনার ফর্ম ডেটা যোগ করার জন্য একটি ইন্টারফেস দেয়।

ফর্ম-সম্পর্কিত কাস্টম উপাদান API কাস্টম ফর্ম নিয়ন্ত্রণগুলি তৈরি করার জন্য ক্ষমতার একটি নতুন সেট প্রদান করে যা বিল্ট-ইন ফর্ম নিয়ন্ত্রণের মতো কাজ করে।

Unsplash- এ Oudom Pravat দ্বারা হিরো ছবি।