Html Form Submit Progress Bar Ekleme

HTML Form Submit İşlemine İlerleme Çubuğu Ekleme

İnternet uygulamalarında, kullanıcıların form doldurması ve göndermesi yaygın bir işlemdir. Form gönderme işlemi sırasında, özellikle büyük dosyalar yüklendiğinde veya karmaşık işlemler gerçekleştiğinde, kullanıcıların işlemin ilerlemesi hakkında bilgi sahibi olması önemlidir. Bu bilgiyi sağlamak için HTML form submit işlemine bir ilerleme çubuğu ekleyebilirsiniz.

İlerleme Çubuğu Ekleme Adımları

Bir HTML form submit işlemine ilerleme çubuğu eklemek için aşağıdaki adımları izleyin:

  1. HTML Form Oluşturun: Formunuzu oluşturun ve gönderme düğmesi ekleyin.
  2. İlerleme Çubuğu Oluşturun: İlerleme çubuğunu temsil edecek bir <progress> öğesi ekleyin.
  3. İlerleme Çubuğunu Gizleyin: İlerleme çubuğunu başlangıçta gizleyin, böylece kullanıcı form gönderilene kadar görmesin.
  4. Form Gönderme İşlemini Yakalayın: Form gönderme işlemini yakalamak için submit olayını kullanın.
  5. İlerleme Çubuğunu Gösterin: Form gönderildiğinde, ilerleme çubuğunu gösterin.
  6. İlerlemeyi Güncelleyin: Form gönderme işlemi sırasında ilerlemeyi düzenli olarak güncelleyin.
  7. İlerlemeyi Tamamlayın: Form gönderme işlemi tamamlandığında, ilerleme çubuğunu %100 olarak ayarlayın.

Örnek Kod

Aşağıdaki kod örneği, bir HTML form submit işlemine ilerleme çubuğu ekler:

“`html




İlerleme Çubuğu ile Form Gönderme


form.addEventListener('submit', (e) => { e.preventDefault();

ilerlemeCubugu.removeAttribute('hidden');

const formData = new FormData(form);

const xhr = new XMLHttpRequest(); xhr.open('POST', 'submit.php'); xhr.upload.addEventListener('progress', (e) => { const ilerleme = Math.round((e.loaded / e.total) * 100); ilerlemeCubugu.value = ilerleme; }); xhr.onload = () => { ilerlemeCubugu.value = 100; }; xhr.send(formData); });

“`

Faydalı Siteler ve Dosyalar

Yayımlandı

kategorisi