Məlumat daxil etmə elementləri

Girişə uyğun element seç

input birsətirli məlumat, textarea uzun mətn, select variant seçimi, checkbox isə seçilib-seçilməmə vəziyyəti üçündür. type="email", number və password brauzer davranışını dəyişir; password yalnız görünüşü gizlədir, məlumatı şifrələmir.

<label for="message">Mesaj</label>
<textarea id="message" name="message"></textarea>
<label for="visibility">Görünmə</label>
<select id="visibility" name="visibility">
  <option value="private">Şəxsi</option><option value="public">İctimai</option>
</select>
<label><input id="notify" type="checkbox"> Cavab barədə bildir</label>
<button type="button" id="read">Dəyərləri göstər</button>
<script>
  document.querySelector('#read').addEventListener('click', () => {
    console.log(document.querySelector('#message').value);
    console.log(document.querySelector('#visibility').value);
    console.log(document.querySelector('#notify').checked);
  });
</script>

Nümunə

Dəyişiklikləri izlə

input istifadəçi dəyəri dəyişdirdikcə, change isə dəyişiklik təsdiqləndikdə baş verə bilər. focus və blur fokusun daxil olub-çıxmasını bildirir. Checkbox vəziyyəti checked boolean-ıdır; onun value xassəsi seçilməsini bildirmir.

label sahəyə ad verir və klik sahəsini genişləndirir. Placeholder yalnız köməkçi ipucudur, label-ı əvəz etmir. Number input-dan gələn value yenə mətndir; lazım olduqda çevirmə və validasiya et.

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

input, select, checkbox və textarea fərqli məlumat girişlərini qarşılayır. Mətn üçün value, checkbox üçün checked oxu; input, change, focus və blur hadisələrinin nə vaxt baş verdiyini müqayisə et.

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

input tipləri, label və textarea
select, option və checkbox
value, checked və giriş hadisələri

Mövzuya baxış

Mənbələr

Məşqin idarəetməsi

Addım 1 / 3

Girişin dəyərini oxu

Sahəyə yazdığın dəyər nəticədə eyni formada görünür.

Giriş sahəsi

Hədəf: Sahəyə Yeni mesaj yaz.

Canlı nəticə

Giriş"Salam"

Nəticə"Salam"

Mənbə kodu

<input value={"Salam"} onChange={handleChange} />

Özün sına

Mesaj mətni, mesaj növü və bildiriş seçimi olan interfeys yarat. Sahələri label ilə bağla və düymədə bütün dəyərləri oxu.

Nəticəni necə yoxlayım?

Mətn, select və checkbox düzgün oxunur; bütün sahələr etiketlidir, checked ilə value qarışdırılmır.

Gözlənilən nəticə

İlkin dəyərlərlə Salam | info | Bildiriş: bəli görünür.
Seçim və checkbox dəyişdiriləndə yeni dəyərlər oxunur.

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.

Mətn value-dan, checkbox isə checked-dən oxunur. Hər sahə label ilə əlaqəlidir.

index.html

<label for="message">Mesaj</label><input id="message" value="Salam">
<label for="kind">Növ</label><select id="kind"><option value="info">Məlumat</option><option value="warning">Xəbərdarlıq</option></select>
<label><input id="notify" type="checkbox" checked> Bildiriş</label>
<button id="read" type="button">Dəyərləri göstər</button><p id="result"></p>
<script src="main.js"></script>

main.js

document.querySelector('#read').addEventListener('click', () => {
  const message = document.querySelector('#message').value;
  const kind = document.querySelector('#kind').value;
  const notify = document.querySelector('#notify').checked;
  document.querySelector('#result').textContent = `${message} | ${kind} | Bildiriş: ${notify ? 'bəli' : 'xeyr'}`;
});

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