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

প্রকাশিত: ৮ আগস্ট, ২০১৯

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

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

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

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

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

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

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

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

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

• আপনি যে ফর্মের সাথে ইন্টারঅ্যাক্ট করতে চান তাতে একটি formdata ইভেন্ট লিসেনার যোগ করুন।
• যখন একজন ব্যবহারকারী সাবমিট ক্লিক করেন, তখন ফর্মটি একটি formdata ইভেন্ট চালু করে, যার মধ্যে একটি FormData অবজেক্ট থাকে যা জমা দেওয়া সমস্ত ডেটা ধরে রাখে।
• প্রতিটি 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);
});

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

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

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

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

এই ডকুমেন্টটি সবকিছু কভার করে না, তবে আপনার কাস্টম উপাদানটিকে একটি ফর্মের সাথে একীভূত করার জন্য প্রয়োজনীয় মৌলিক বিষয়গুলি বর্ণনা করে।

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

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

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

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

// Form-associated custom elements must be autonomous custom elements.
// 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);

ইনপুট যাচাইকরণ

আপনার নিয়ন্ত্রণ ইন্টার্নাল অবজেক্টে 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 সিউডোক্লাস দিয়ে স্টাইল করতে পারেন, ঠিক যেমন একটি বিল্ট-ইন ফর্ম নিয়ন্ত্রণ।

জীবনচক্র কলব্যাক

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

void formAssociatedCallback(form)

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

void formDisabledCallback(disabled)

এই উপাদানটির disabled বৈশিষ্ট্য যোগ করা বা অপসারণের কারণে; অথবা এই উপাদানের পূর্বপুরুষের একটি <fieldset> এ disabled অবস্থা পরিবর্তিত হওয়ার কারণে, উপাদানটির 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 প্যারামিটারটি কার্যকর। উদাহরণস্বরূপ, ধরুন আপনি একাধিক মোড সহ একটি রঙ চয়নকারী তৈরি করেছেন: একটি প্যালেট বা একটি RGB রঙ চাকা। submittable মান হল একটি ক্যানোনিকাল আকারে নির্বাচিত রঙ, যেমন "#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 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;
}

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

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 ইভেন্টটি আপনাকে একটি ইন্টারফেস দেয় যাতে আপনি আপনার ফর্ম ডেটা সাবমিট প্রক্রিয়ায় যোগ করতে পারেন, কোনও লুকানো <input> উপাদান তৈরি না করেই। ফর্ম-সম্পর্কিত কাস্টম এলিমেন্ট API এর সাহায্যে, আপনি কাস্টম ফর্ম নিয়ন্ত্রণের জন্য একটি নতুন সেট ক্ষমতা প্রদান করতে পারেন যা বিল্ট-ইন ফর্ম নিয়ন্ত্রণের মতো কাজ করে।