2022 میں فارم کے ساتھ نیا کیا ہے؟

براؤزر مسلسل نئی 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()HTML فارم کی توثیق فارم کو جمع ہونے سے روکے گی۔ اگر فارم میں درج تمام ڈیٹا کی توثیق ہوتی ہے، 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() رہا ہے کی حمایت کی کروم 99، فائر فاکس 101، اور آنے والے سفاری 16 کے بعد سے۔ ایک ان پٹ عنصر کے لیے جس کی قسم کا وصف یا تو تاریخ، مہینہ، ہفتہ، وقت، datetime-localرنگ، یا فائل، showPicker() انتخاب UI کو ظاہر کرنے کا ایک پروگرامی طریقہ فراہم کرتا ہے۔ رنگ اور فائل ان پٹس کے لیے، یہ ہمیشہ ممکن رہا ہے کہ پروگرام کے ذریعے چننے والے کو کال کر کے دکھائے۔ .click ان پٹ پر:

document.querySelector('input[type="color"]').click();

یہ نقطہ نظر تاریخ کے ان پٹ پر کام نہیں کرتا ہے، اسی وجہ سے یہ نیا API شامل کیا گیا تھا۔ .showPicker() رنگ اور فائل ان پٹ کے ساتھ بھی کام کرے گا لیکن اسے استعمال کرنے کا کوئی حقیقی فائدہ نہیں ہے۔ .click().

غیر فعال صفت

ایک سے زیادہ ان پٹ کو HTML میں لپیٹ کر ایک ساتھ غیر فعال کرنا ہمیشہ ممکن رہا ہے۔ fieldset اور غیر فعال fieldset:

Inert ایک نیا HTML وصف ہے۔ یہ صرف فارمز کے لیے نہیں ہے، بلکہ فارمز یقینی طور پر استعمال کی ایک کلیدی صورت ہیں۔ کے برعکس disabled وصف، inert a پر لاگو کیا جاسکتا ہے۔ form عنصر خود. فارم کے اندر ہر چیز غیر توجہ مرکوز اور غیر کلک کرنے کے قابل ہوگی۔ جب بات معاون ٹیکنالوجیز کی ہو، inert ترتیب کی طرح ہے aria-hidden="true". کے برعکس disabled وصف، inert پہلے سے طے شدہ طور پر کوئی اسٹائل لاگو نہیں ہوتا ہے، لیکن آپ کی اپنی شامل کرنا آسان ہے:

form[inert] {
  opacity: .2;
}

اور بھی آنے والا ہے…

بڑا اسٹائل ہے۔ <select> عناصر، جو کچھ ڈویلپر دہائیوں سے چاہتے تھے۔ کے تعارف کے ساتھ ہی یہ آخر کار حقیقت بننے کے لیے تیار نظر آتا ہے۔ selectmenu.

لیکن ابھی کے لیے اتنا ہی ہے! حالیہ اپ ڈیٹس ان خصوصیات کو بنانے کے لیے مکمل براؤزر سپورٹ لاتی ہیں جن کا ہم انتظار کر رہے تھے، جس سے وہ پروڈکشن کے استعمال کے لیے اہم ہیں۔