چه چیزی با فرم ها در سال 2022 جدید است؟ هوش داده PlatoBlockchain. جستجوی عمودی Ai.

چه چیزی با فرم ها در سال 2022 جدید است؟

تمبر زمانی: 8 سپتامبر 2022، 9:12 صبح

مرورگرها به طور مداوم ویژگی های جدید HTML، جاوا اسکریپت و 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 ویژگی ثبت رویداد

La 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);

این رویداد هم با ارسال فرم 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();

این رویکرد در ورودی های تاریخ کار نمی کند، به همین دلیل است که این API جدید اضافه شده است. .showPicker() همچنین با ورودی های رنگ و فایل کار می کند، اما هیچ مزیت واقعی برای استفاده از آن وجود ندارد .click().

چه چیزی با فرم ها در سال 2022 جدید است؟

ویژگی بی اثر

همیشه امکان غیرفعال کردن چندین ورودی به طور همزمان با قرار دادن آنها در یک HTML وجود داشته است fieldset و غیرفعال کردن fieldset:

Inert یک ویژگی جدید HTML است. این فقط برای فرم ها نیست، اما فرم ها مطمئناً یک مورد استفاده کلیدی هستند. بر خلاف disabled صفت، inert می توان برای الف اعمال کرد form خود عنصر همه چیز در فرم غیرقابل تمرکز و غیرقابل کلیک خواهد بود. وقتی صحبت از فناوری های کمکی می شود، inert شبیه تنظیم است aria-hidden="true". بر خلاف disabled صفت، inert به‌طور پیش‌فرض هیچ استایلی را اعمال نمی‌کند، اما اضافه کردن سبک خود آسان است:

form[inert] {
  opacity: .2;
}

چیزهای بیشتری در راه است…

بزرگتر استایل است <select> عناصر، چیزی که توسعه دهندگان برای دهه ها می خواستند. به نظر می رسد در نهایت به زودی با معرفی آن به واقعیت تبدیل شود selectmenu.

اما فعلا همین! به‌روزرسانی‌های اخیر، پشتیبانی کامل مرورگر را برای شکل‌گیری ویژگی‌هایی که منتظرش بودیم، به ارمغان می‌آورد و آن‌ها را برای استفاده تولیدی اصلی می‌کند.

تمبر زمان:

بیشتر از ترفندهای CSS