ব্রাউজারগুলি ক্রমাগত নতুন HTML, JavaScript এবং CSS বৈশিষ্ট্য যোগ করছে। এখানে ফর্মগুলির সাথে কাজ করার জন্য কিছু দরকারী সংযোজন রয়েছে যা আপনি হয়তো মিস করেছেন...
requestSubmit()
সাফারি 16 এর জন্য সমর্থন যোগ করার জন্য চূড়ান্ত ব্রাউজার হবে requestSubmit.
আমরা কিভাবে তাকান আগে .requestSubmit() কাজ করে। .submit() পদ্ধতি সঙ্গে একটি ফর্ম জমা দেওয়া submit() একটি জমা ইভেন্ট ট্রিগার না. সুতরাং নিম্নলিখিত কোডে, ফর্মটি জমা দেওয়া হয়েছে, preventDefault() কোন প্রভাব নেই, এবং কনসোলে কিছুই লগ করা হয়নি:
const form = document.forms[0];
form.addEventListener('submit', function(event) {
// code to submit the form goes here
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.submit();
}).submit() যেকোনো HTML ফর্ম বৈধতা উপেক্ষা করবে। নিম্নলিখিত মার্কআপ দেওয়া, ইনপুট খালি থাকা সত্ত্বেও ফর্মটি জমা দেওয়া হবে যদিও ইনপুটটিতে একটি required অ্যাট্রিবিউট:
<form>
<label for="name">Name</label>
<input required name="name" id="name" type="text">
</form>.requestSubmit() জাভাস্ক্রিপ্ট ব্যবহার করে একটি ফর্ম জমা দেওয়ার একটি বিকল্প উপায়, কিন্তু এর বিপরীতে .submit(), এইচটিএমএল ফর্মের বৈধতা ফর্ম জমা দেওয়া থেকে বাধা দেবে৷ যদি ফর্মে প্রবেশ করা সমস্ত ডেটা বৈধতা পাস করে, submit ইভেন্ট বরখাস্ত করা হবে, যার অর্থ "ফর্ম জমা দেওয়া হয়েছে!" নিম্নলিখিত উদাহরণে কনসোলে লগ ইন করা হবে:
form.addEventListener('submit', function(event) {
event.preventDefault();
console.log('form submitted!');
});
document.querySelector('.btn').addEventListener('click', function() {
form.requestSubmit();
})আপনি ইতিমধ্যে ফর্মের জমা বোতামে প্রোগ্রাম্যাটিকভাবে ক্লিক করে এটি অর্জন করতে পারেন, কিন্তু requestSubmit সম্ভবত একটি আরো মার্জিত সমাধান.
submitter ইভেন্ট জমা দেওয়ার সম্পত্তি
সার্জারির SubmitEvent.submitter অর্জিত সম্পত্তি সম্পূর্ণ ক্রস ব্রাউজার সমর্থন সাফারি 15.4 প্রকাশের সাথে। এই শুধুমাত্র-পঠন সম্পত্তি নির্দিষ্ট করে <button> or <input type="submit"> উপাদান যা একটি ফর্ম জমা দিতে কারণ.
<form>
<button name="foo" value="bar" type="submit">Bar</button>
<button name="foo" value="baz" type="submit">Baz</button>
</form>যখন আপনার একাধিক জমা বোতাম বা ইনপুট থাকে, প্রতিটির আলাদা মান থাকে, শুধুমাত্র বোতাম বা ইনপুটের মান যা ফর্মটি জমা দেওয়ার জন্য ক্লিক করা হয়েছিল সেটি সার্ভারে পাঠানো হবে, উভয় মানের পরিবর্তে। এটা নতুন কিছু না. নতুন কি হল সাবমিট ইভেন্টের জন্য ইভেন্ট শ্রোতার এখন অ্যাক্সেস আছে event.submitter সম্পত্তি আপনি এটি ব্যবহার করতে পারেন বোতামে বা ইনপুটে একটি ক্লাস যোগ করতে যা ফর্ম জমা দিতে ট্রিগার করেছে, উদাহরণস্বরূপ, বা এটি পেতে value বা এর অন্য কোনো HTML গুণাবলী।
document.forms[0].addEventListener('submit', function(event) {
event.preventDefault();
console.log(event.submitter.value);
console.log(event.submitter.formaction);
event.submitter.classList.add('spinner-animation');
})formdata ঘটনা
এটি বিশেষত নতুন নয়, তবে শুধুমাত্র ক্রস-ব্রাউজার সমর্থন অর্জন করেছে সাফারি 15 এর মুক্তির সাথে। এর জন্য প্রধান ব্যবহারের ক্ষেত্রে formdata ইভেন্টটি কাস্টম উপাদানগুলিকে ফর্ম জমাতে অংশ নিতে সক্ষম করে। ওয়েব উপাদানের বাইরে, যদিও, এটি এখনও দরকারী হতে পারে।
আপনি একটি যোগ করুন formdata ইভেন্ট শ্রোতা যে ফর্মের সাথে আপনি ইন্টারঅ্যাক্ট করতে চান:
document.querySelector('form').addEventListener('formdata', handleFormdata);ইভেন্টটি একটি নিয়মিত এইচটিএমএল ফর্ম জমা দিয়ে এবং এর একটি ঘটনা দ্বারা উভয়ই বরখাস্ত করা হয় new FormData(). event.formData জমা দেওয়া সমস্ত ডেটা ধরে রাখে।
function handleFormdata(event) {
for (const entry of event.formData.values()) {
console.log(entry);
}
}জন্য কলব্যাক ফাংশন formdata সার্ভারে ডেটা পাঠানোর আগে ইভেন্ট লিসেনার চলে, আপনাকে পাঠানো ডেটাতে যোগ বা পরিবর্তন করার সুযোগ দেয়।
function handleFormdata(event) {
event.formData.append('name', 'John');
}আপনি পরিবর্তন বা সংযোজন হতে পারে FormData জমা ইভেন্ট হ্যান্ডলার ভিতরে কিন্তু formdata আপনাকে যুক্তি আলাদা করতে দেয়। এটি আপনার ফর্মের মার্কআপে লুকানো ইনপুটগুলি ব্যবহার করার একটি বিকল্প যেখানে আপনি ফর্মটি "পুরাতন পদ্ধতিতে" জমা দিচ্ছেন — অর্থাৎ ফর্মটি জমা দেওয়ার জন্য এটি করার পরিবর্তে HTML এর অন্তর্নির্মিত কার্যকারিতার উপর নির্ভর করা। fetch.
showPicker() ইনপুট উপাদানের জন্য
showPicker() হয়েছে সমর্থিত Chrome 99, Firefox 101, এবং আসন্ন Safari 16 থেকে। একটি ইনপুট উপাদানের জন্য যার টাইপ অ্যাট্রিবিউট হয় তারিখ, মাস, সপ্তাহ, সময়, datetime-local, রঙ, বা ফাইল, showPicker() নির্বাচন UI প্রদর্শন করার জন্য একটি প্রোগ্রাম্যাটিক উপায় প্রদান করে। রঙ এবং ফাইল ইনপুটগুলির জন্য, এটি সর্বদা প্রোগ্রাম্যাটিকভাবে কল করে পিকারকে দেখানো সম্ভব হয়েছে৷ .click ইনপুটে:
document.querySelector('input[type="color"]').click();এই পদ্ধতিটি তারিখ ইনপুটগুলিতে কাজ করে না, তাই এই নতুন API যোগ করা হয়েছিল। .showPicker() রঙ এবং ফাইল ইনপুটগুলির সাথেও কাজ করবে কিন্তু এটি ব্যবহার করার কোন প্রকৃত সুবিধা নেই .click().
জড় বৈশিষ্ট্য
একাধিক ইনপুটকে একটি HTML এ মোড়ানোর মাধ্যমে একবারে নিষ্ক্রিয় করা সবসময়ই সম্ভব fieldset এবং নিষ্ক্রিয় করা fieldset:
Inert হল একটি নতুন HTML অ্যাট্রিবিউট। এটি শুধুমাত্র ফর্মগুলির জন্য নয়, তবে ফর্মগুলি অবশ্যই একটি মূল ব্যবহারের ক্ষেত্রে৷ অসদৃশ disabled বৈশিষ্ট্য inert একটি প্রয়োগ করা যেতে পারে form উপাদান নিজেই। ফর্মের মধ্যে থাকা সমস্ত কিছুই অ-ফোকাসযোগ্য এবং অ-ক্লিকযোগ্য হবে। যখন সহায়ক প্রযুক্তির কথা আসে, inert সেটিংসের অনুরূপ aria-hidden="true"। এর মত নয় disabled বৈশিষ্ট্য inert ডিফল্টরূপে কোনো স্টাইলিং প্রয়োগ করে না, তবে আপনার নিজের যোগ করা সহজ:
form[inert] {
opacity: .2;
}আসতে আরো আছে…
বড় এক স্টাইলিং হয় <select> উপাদান, এমন কিছু যা বিকাশকারীরা কয়েক দশক ধরে চেয়েছিলেন। এটি পরিশেষে কিছু সময় শীঘ্রই এর প্রবর্তনের সাথে বাস্তবে পরিণত হতে চলেছে বলে মনে হচ্ছে selectmenu.
কিন্তু আপাতত এটাই! সাম্প্রতিক আপডেটগুলি এমন বৈশিষ্ট্যগুলির জন্য সম্পূর্ণ ব্রাউজার সমর্থন নিয়ে আসে যেগুলির জন্য আমরা অপেক্ষা করছিলাম, সেগুলিকে উত্পাদন ব্যবহারের জন্য প্রধান করে তোলে৷
