HTML formaları

Əlaqəli sahələri birləşdir

Formanın submit hadisəsini dinləmək həm düymə, həm Enter göndərişini əhatə edir. name məlumat açarıdır; id isə label və seçicilər üçün istifadə olunur. FormData uğurlu, adlandırılmış forma sahələrini toplayır; seçilməmiş checkbox daxil olmaya bilər.

<form id="signup">
  <label>Ad <input name="name" required></label>
  <label>E-poçt <input name="email" type="email" required></label>
  <button type="submit">Göndər</button>
  <button type="button">Yardım</button>
</form>
<p id="result" role="status"></p>
<script>
  const form = document.querySelector('#signup');
  form.addEventListener('submit', event => {
    event.preventDefault();
    const data = new FormData(form);
    document.querySelector('#result').textContent = `Salam, ${data.get('name')}!`;
  });
</script>

Nümunə

Validasiya və göndəriş

required, minlength, maxlength, uyğun type və lazım olduqda pattern ilkin yoxlama verir. Native validasiya uyğunsuz sahədə normal submit-i dayandıra bilər. checkValidity, reportValidity və setCustomValidity xüsusi qaydalar üçün istifadə edilə bilər.

Form daxilində düymənin tipi göstərilməsə submit davranışı yarana bilər. Yalnız göndərən düyməyə submit ver. Brauzer validasiyası serverdəki etibarlılıq və təhlükəsizlik yoxlamasını əvəz etmir; uğur mesajı da öz-özlüyündə məlumatın serverə yazıldığını sübut etmir.

Əlavə qeydlər və mənbələr

form əlaqəli sahələri bir göndərişdə birləşdirir. name atributları FormData açarlarını müəyyən edir; submit hadisəsində preventDefault ilə səhifə yenilənməsini dayandır, required və uyğun tip ilə girişləri yoxla.

Niyə vacibdir?

DOM HTML sənədinin proqramlaşdırma vasitəsilə işləyə bildiyin təqdimatıdır.

Əvvəlki biliklər

JavaScript əsasları

Bu mövzuda

form, name və submit
FormData və preventDefault
required və ilkin validasiya

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 2

Formanı yoxlayıb göndər

Yanlış girişin qarşısını al, düzgün məlumatla göndərişi tamamla.

Prosesi son vəziyyətə çatdır.

Forma boşdur
Giriş yanlışdır
Giriş hazırdır
Forma emal olundu

Forma boşdur

E-poçt daxil edilməlidir.

<input type="email" required>

Bu məşq prosesi modelləşdirir.

Özün sına

Ad və e-poçt forması yarat, submit zamanı FormData oxu. Boş və yanlış e-poçtu brauzer validasiyası ilə rədd et, nəticəni səhifədə göstər.

Nəticəni necə yoxlayım?

Submit Enter ilə də işləyir, səhifə yenilənmir, FormData bütün adlandırılmış sahələri oxuyur və yanlış e-poçt rədd edilir.

Gözlənilən nəticə

Boş sahə və yanlış e-poçt göndərişi dayandırır.
Aysel və aysel@example.com ilə nəticə Aysel: aysel@example.com olur.

Görünüş nümunəsi

Bu, görünüş nümunəsidir. İnteraktiv davranışı kodu öz layihəndə işlədərək yoxla.

Nümunə həllə bax

Əvvəl özün sına, sonra müqayisə et. Bu, mümkün həllərdən biridir.

required və type=email brauzer validasiyasını aktiv saxlayır. submit yalnız etibarlı girişdən sonra icra olunur.

index.html

<form id="profile"><label>Ad <input name="name" required></label><label>E-poçt <input name="email" type="email" required></label><button>Göndər</button></form><p id="result" role="status"></p>
<script src="main.js"></script>

main.js

document.querySelector('#profile').addEventListener('submit', event => {
  event.preventDefault();
  const data = new FormData(event.currentTarget);
  document.querySelector('#result').textContent = `${data.get('name')}: ${data.get('email')}`;
});

Praktikanı bitirdin?Özün qiymətləndirirsən. İrəliləyiş bu brauzerdə saxlanılır.