Tarayıcılar sürekli olarak yeni HTML, JavaScript ve CSS özellikleri ekliyor. İşte kaçırmış olabileceğiniz formlarla çalışmaya yönelik bazı faydalı eklemeler…

requestSubmit()

safari 16 için destek eklenecek son tarayıcı olacak requestSubmit.

Nasıl olduğuna bakmadan önce .requestSubmit() çalışıyorsa, JavaScript ile bir form göndermenin programlı olarak nasıl çalıştığını kendimize hatırlatalım. .submit() yöntem. İle bir form gönderme submit() bir gönderme olayını tetiklemez. Böylece aşağıdaki kodda form gönderilir, preventDefault() etkisi yoktur ve konsola hiçbir şey kaydedilmez:

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() ayrıca herhangi bir HTML form doğrulamasını da yok sayar. Aşağıdaki işaretleme göz önüne alındığında, giriş boş olsa bile form gönderilecek required özellik:

   
  Name
  

.requestSubmit() JavaScript kullanarak form göndermenin alternatif bir yoludur, ancak bunun aksine .submit(), HTML form doğrulaması, formun gönderilmesini engeller. Forma girilen tüm veriler doğrulamayı geçerse, submit olay tetiklenecek, yani "form gönderildi!" aşağıdaki örnekte konsola kaydedilir:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

Bunu, formun gönder düğmesini programlı olarak tıklayarak zaten başarabilirsiniz, ancak requestSubmit belki daha zarif bir çözümdür.

submitter gönderme olayının özelliği

The SubmitEvent.submitter kazanılan mülk tam çapraz tarayıcı desteği Safari 15.4'ün piyasaya sürülmesiyle. Bu salt okunur özellik şunları belirtir: or bir formun gönderilmesine neden olan öğe.

  Bar
  Baz

Her biri farklı bir değere sahip birden fazla gönder düğmeniz veya girişiniz olduğunda, her iki değer yerine yalnızca formu göndermek için tıklanan düğmenin veya girişin değeri sunucuya gönderilir. Bu yeni bir şey değil. Yeni olan, gönderme olayının olay dinleyicisinin artık event.submitter Emlak. Bunu, örneğin form gönderimini tetikleyen düğmeye veya girdiye bir sınıf eklemek veya onun value veya HTML özelliklerinden herhangi biri.

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 olay

Bu özellikle yeni değil, sadece elde edilen çapraz tarayıcı desteği Safari 15'in piyasaya sürülmesiyle. formdata event, özel öğelerin form gönderimlerinde yer almasını sağlıyor. Web bileşenlerinin dışında olsa da, yine de yararlı olabilir.

sen ekle formdata etkileşim kurmak istediğiniz forma olay dinleyicisi:

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

Olay, hem normal bir HTML formu gönderimi hem de bir oluşumu ile tetiklenir. new FormData(). event.formData gönderilen tüm verileri tutar.

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

için geri arama işlevi formdata olay dinleyicisi, veriler sunucuya gönderilmeden önce çalışır ve size gönderilen verileri ekleme veya değiştirme şansı verir.

function handleFormdata(event) {
  event.formData.append('name', 'John');
}

Değiştirebilir veya ekleyebilirdiniz FormData gönder olay işleyicisinin içinde ancak formdata mantığı ayırmanızı sağlar. Ayrıca, formu "eski moda yoldan" gönderdiğiniz durumlarda formunuzun işaretlemesinde gizli girdiler kullanmaya bir alternatiftir - yani, formu göndermek için HTML'nin yerleşik işlevine güvenmek yerine, formu göndermek için fetch.

showPicker() giriş elemanları için

showPicker() olmuş destekli Chrome 99, Firefox 101 ve yaklaşan Safari 16'dan beri. Type özelliği Date, Month, Week, Time olan bir girdi öğesi için, datetime-local, renk veya dosya, showPicker() seçim kullanıcı arabirimini görüntülemek için programlı bir yol sağlar. Renk ve dosya girişleri için, seçiciyi arayarak programlı olarak göstermek her zaman mümkün olmuştur. .click girişte:

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

Bu yaklaşım tarih girişlerinde çalışmaz, bu nedenle bu yeni API eklenmiştir. .showPicker() ayrıca renk ve dosya girişleriyle de çalışacak, ancak bunu kullanmanın gerçek bir avantajı yok .click().

eylemsiz nitelik

Birden çok girişi bir HTML'ye sararak aynı anda devre dışı bırakmak her zaman mümkün olmuştur. fieldset ve devre dışı bırakılması fieldset:

Inert, yeni bir HTML özelliğidir. Sadece formlar için değil, formlar kesinlikle önemli bir kullanım durumudur. aksine disabled nitelik, inert bir uygulanabilir form elemanın kendisi. Formdaki her şey odaklanamaz ve tıklanamaz olacaktır. Yardımcı teknolojiler söz konusu olduğunda, inert ayarlamaya benzer aria-hidden="true". Aksine disabled nitelik, inert varsayılan olarak herhangi bir stil uygulamaz, ancak kendi stilinizi eklemek kolaydır:

form[inert] {
  opacity: .2;
}

Gelecek daha çok şey var…

Büyük olan stildir elemanlar, geliştiricilerin onlarca yıldır istediği bir şey. Sonunda, yakında piyasaya sürülmesiyle bir gerçeklik haline gelecek gibi görünüyor. selectmenu.

Ama şimdilik bu kadar! Son güncellemeler, beklediğimiz özellikleri oluşturmak için tam tarayıcı desteği getirerek, onları üretim kullanımı için birinci sınıf hale getiriyor.