Form öğelerine erişim

JavaScript kursu · Orta seviye · Ders 54/134

Form ve input öğelerine form.elements ve querySelector ile erişmeyi öğrenirsin.

Form öğelerine erişim

HTML'de bir <form> öğesine JavaScript ile erişmek için document.querySelector kullanırsın. Form öğesinin elements özelliği, form içindeki tüm giriş alanlarını bir koleksiyon olarak verir.

const form = document.querySelector('form');
const inputs = form.elements;

elements koleksiyonu, alanlara isim veya indeksle erişmeni sağlar. Bu özellik yalnızca form öğesi üzerinde bulunur; başka öğelerde yoktur. Formlarla çalışmaya bu koleksiyon iyi bir başlangıçtır.

querySelector ile tek alan seçmek

Belirli bir giriş alanına ulaşmak için querySelector ile o alanı seçebilirsin. name özniteliğine göre seçmek en sık kullanılan yoldur.

const email = document.querySelector('input[name="email"]');

Bu yöntem tek bir öğe döndürür. Form içindeki alanları topluca gezmek için elements koleksiyonunu, tek tek seçmek için querySelector kullanırsın. İki yöntem de aynı amaca hizmet eder; hangisi rahatsan onu seçersin.

Uygulama email alanını oku ve yazdır

form değişkeni bir <form> öğesini gösteriyor. form.elements koleksiyonundan 'email' adlı alanı email değişkenine ata ve değerini console.log ile yazdır.

Örnek çözümü göster

const email = form.elements['email'];
console.log(email.value);

Kendini test et

Hangisi form alanlarının koleksiyonunu verir?
```
const form = document.querySelector('form');
// A
const a = form.children;
// B
const b = form.elements;
// C
const c = form.inputs;
// D
const d = form.fields;
```
- A
- B
- C
- D
Cevabı göster

B — Doğru! form.elements özelliği yalnızca form öğesinde bulunur ve tüm alanları verir.

email alanını elements'ten al

const form = document.querySelector('form');
const email = form.____['email'];

Cevabı göster

const form = document.querySelector('form');
const email = form.elements['email'];

Yöntemleri anlamlarıyla eşleştir

document.querySelector('form')

Form öğesini seçer
form.elements

Tüm alanları verir
form.elements['email']

İsimle alan döndürür

Orta seviye bölümündeki tüm dersler

Form öğelerine erişim