ما الجديد في النماذج في عام 2022؟

تضيف المتصفحات باستمرار ميزات HTML و JavaScript و CSS جديدة. فيما يلي بعض الإضافات المفيدة للعمل مع النماذج التي ربما فاتتك ...

requestSubmit()

رحلات السفاري 16 سيكون المتصفح الأخير لإضافة دعم له requestSubmit.

قبل أن ننظر إلى الكيفية .requestSubmit() يعمل ، فلنذكر أنفسنا كيف يعمل إرسال نموذج برمجيًا باستخدام JavaScript عند استخدام امتداد .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() هي طريقة بديلة لإرسال نموذج باستخدام JavaScript ، ولكن على عكس .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 الممتلكات المكتسبة دعم كامل عبر المتصفح مع إصدار Safari 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 حدث

هذا ليس جديدًا بشكل خاص ، ولكن فقط حقق دعمًا عبر المتصفح مع إصدار Safari 15. حالة الاستخدام الرئيسية لبرنامج formdata الحدث هو تمكين العناصر المخصصة من المشاركة في عمليات إرسال النماذج. خارج مكونات الويب ، على الرغم من ذلك ، لا يزال من الممكن أن يكون مفيدًا.

تقوم بإضافة ملف formdata مستمع الحدث إلى النموذج الذي تريد التفاعل معه:

document.querySelector('form').addEventListener('formdata', handleFormdata);

يتم تشغيل الحدث من خلال إرسال نموذج HTML عادي وأيضًا عن طريق حدوث 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() يوفر طريقة برمجية لعرض واجهة المستخدم المحددة. بالنسبة إلى مدخلات الألوان والملفات ، كان من الممكن دائمًا إظهار المنتقي برمجيًا عن طريق الاتصال .click على المدخلات:

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

هذا النهج لا يعمل على مدخلات التاريخ ، وهذا هو سبب إضافة واجهة برمجة التطبيقات الجديدة هذه. .showPicker() سيعمل أيضًا مع مدخلات الألوان والملفات ولكن لا توجد ميزة حقيقية لاستخدامه مرة أخرى .click().

سمة جامدة

كان من الممكن دائمًا تعطيل عدة إدخالات مرة واحدة عن طريق تغليفها بتنسيق HTML fieldset وتعطيل fieldset:

الخامل هو سمة HTML جديدة. إنها ليست فقط للنماذج ، ولكن النماذج هي بالتأكيد حالة استخدام رئيسية. على عكس disabled ينسب، inert يمكن تطبيقها على أ form العنصر نفسه. سيكون كل شيء داخل النموذج غير قابل للتركيز عليه وغير قابل للنقر. عندما يتعلق الأمر بالتقنيات المساعدة ، inert يشبه الإعداد aria-hidden="true". على عكس disabled ينسب، inert لا يطبق أي نمط افتراضيًا ، ولكن من السهل إضافة نمط خاص بك:

form[inert] {
  opacity: .2;
}

هناك المزيد في المستقبل ...

الشيء الكبير هو التصميم <select> العناصر ، وهو شيء أراده المطورون لعقود. يبدو أنه سيصبح أخيرًا حقيقة واقعة في وقت قريب مع تقديم selectmenu.

لكن هذا كل شيء الآن! توفر التحديثات الأخيرة دعمًا كاملاً للمتصفح لميزات النموذج التي كنا ننتظرها ، مما يجعلها أساسية للاستخدام الإنتاجي.