- Konu sahibi
- #1
Aynı ada sahip birden fazla form alanı, gönderim sırasında ayrı ayrı
Aşağıdaki parçayı form.html dosyasına kaydedip tarayıcıda açın. Bu yerel örnek sunucuya istek göndermez; submit olayını durdurup üretilecek tekrarlı sorguyu ekranda gösterir:
Gönderimden sonra tarayıcının oluşturduğu sorgu mantıksal olarak şöyle olur:
Gerçek HTTP gönderimini denemek için kendi sunucunuzda /form-test uç noktasını hazırlayıp bu örnekteki submit yakalayıcısını kaldırabilirsiniz. file protokolünden açılan dosya gerçek sunucu uç noktası oluşturmaz. Alıcı, tekrarlı alanları destekleyen API ile okumalıdır; tarayıcının doğru göndermesi sunucunun bunları otomatik listeye çevirdiğini kanıtlamaz.
Form gönderilirken yalnızca başarılı form kontrolleri gönderilir. Metin alanları, seçili radyo düğmesi ve işaretli onay kutuları buna dahildir.
Sık görülen durumların sonucu şöyledir:
Sunucu tarafındaki ayrıştırıcı aynı adlı parametreleri farklı biçimde sunabilir. Bazı kütüphaneler doğrudan liste döndürür, bazıları yalnızca ilk veya son değeri döndürür, bazıları da özel dizi gösterimini bekler. Bu nedenle HTML'yi sunucunun beklediği biçime göre düzenleyin; sunucu bir liste bekliyorsa tekil değer okuma yöntemi kullanmayın.
Her alana farklı
Bir diğer hata, HTML'de değerlerin tekrarlandığını görüp sunucunun otomatik olarak dizi oluşturacağını varsaymaktır. İstek doğru biçimde gönderilmiş olsa bile kullanılan sunucu çatısı tek değer seçebilir. Böyle bir durumda formu değiştirmeden önce sunucu tarafındaki parametre okuma yöntemini düzeltin. Ayrıca işaretlenmemiş onay kutusunun hiç gönderilmemesi, boş bir değer gönderilmesiyle aynı değildir; uygulama bu iki durumu gerekiyorsa ayrı yorumlamalıdır.
name=value çiftleri olarak gönderilir. Örneğin iki alanın adı etiket ise tarayıcı tek bir değer yerine etiket=haber&etiket=duyuru benzeri tekrarlı parametreler oluşturur. Sunucu tarafında bu değerler tek bir metin olarak değil, dizi veya liste olarak okunmalıdır.En küçük çalışan örnek
Aşağıdaki parçayı form.html dosyasına kaydedip tarayıcıda açın. Bu yerel örnek sunucuya istek göndermez; submit olayını durdurup üretilecek tekrarlı sorguyu ekranda gösterir:
HTML:
<style>input, button, pre { border-radius: 3px; }</style>
<form id="coklu" action="/form-test" method="get">
<label>
Birinci etiket
<input type="text" name="etiket" value="haber">
</label>
<label>
İkinci etiket
<input type="text" name="etiket" value="duyuru">
</label>
<button type="submit">Gönder</button>
</form>
<pre id="sonuc"></pre>
<script>
const form = document.getElementById('coklu');
form.addEventListener('submit', (event) => {
event.preventDefault();
const data = new FormData(form);
document.getElementById('sonuc').textContent =
new URLSearchParams(data).toString();
});
</script>Gönderimden sonra tarayıcının oluşturduğu sorgu mantıksal olarak şöyle olur:
etiket=haber&etiket=duyuruGerçek HTTP gönderimini denemek için kendi sunucunuzda /form-test uç noktasını hazırlayıp bu örnekteki submit yakalayıcısını kaldırabilirsiniz. file protokolünden açılan dosya gerçek sunucu uç noktası oluşturmaz. Alıcı, tekrarlı alanları destekleyen API ile okumalıdır; tarayıcının doğru göndermesi sunucunun bunları otomatik listeye çevirdiğini kanıtlamaz.
Tarayıcı hangi alanları gönderir?
Form gönderilirken yalnızca başarılı form kontrolleri gönderilir. Metin alanları, seçili radyo düğmesi ve işaretli onay kutuları buna dahildir.
disabled alanlar, adı olmayan alanlar ve işaretlenmemiş onay kutuları gönderime katılmaz. Aynı name değerinin kullanılması, alanların HTML içinde ardışık olmasını gerektirmez; önemli olan gönderim sırasında aynı forma ait olmalarıdır.Sık görülen durumların sonucu şöyledir:
| Kontrol türü | Aynı adla kullanım | Gönderim sonucu |
|---|---|---|
| Metin alanı | Birden fazla input | Her değer ayrı parametre olur |
| Onay kutusu | Aynı name | Yalnızca işaretliler gönderilir |
| Çoklu seçim | Tek select, multiple | Seçilen her seçenek ayrı değer olur |
| Radyo düğmesi | Aynı name | En fazla seçili olan değer gönderilir |
Sunucu tarafındaki ayrıştırıcı aynı adlı parametreleri farklı biçimde sunabilir. Bazı kütüphaneler doğrudan liste döndürür, bazıları yalnızca ilk veya son değeri döndürür, bazıları da özel dizi gösterimini bekler. Bu nedenle HTML'yi sunucunun beklediği biçime göre düzenleyin; sunucu bir liste bekliyorsa tekil değer okuma yöntemi kullanmayın.
Uygulama adımları
- Birden fazla değeri aynı gruba ait yapmak için ilgili kontrollere aynı
namedeğerini verin.iddeğerlerini ise benzersiz bırakın;idilenameaynı şey değildir. - Sunucu tarafında parametreyi skaler metin yerine liste/çoklu değer API'siyle okuyun. Örneğin beklenen sonuç iki üyeli bir liste olmalıdır:
["haber", "duyuru"]. - İsteği geliştirici araçlarının Network bölümünde veya sunucu günlüklerinde inceleyin. Aynı adın birden fazla kez bulunup bulunmadığını kontrol edin.
- Hiç değer gelmiyorsa alanın
disabledolmadığını, bir onay kutusunun işaretli olduğunu ve kontrolün gönderilen formun içinde bulunduğunu denetleyin. - Değer sırası uygulama için önemliyse sunucuda gelen sırayı açıkça koruyun; güvenlik veya iş kuralı açısından değerleri ayrıca doğrulayın ve izin verilen seçeneklerle sınırlayın.
Sık yapılan hatalar
Her alana farklı
name vermek, sunucunun bunları aynı koleksiyonun üyeleri olarak almasını engeller. Tersine, birbirinden bağımsız olması gereken alanlara aynı adı vermek de verilerin yanlış gruplandırılmasına yol açar. Bu yüzden aynı ad yalnızca aynı anlamdaki çoklu değerler için kullanılmalıdır.Bir diğer hata, HTML'de değerlerin tekrarlandığını görüp sunucunun otomatik olarak dizi oluşturacağını varsaymaktır. İstek doğru biçimde gönderilmiş olsa bile kullanılan sunucu çatısı tek değer seçebilir. Böyle bir durumda formu değiştirmeden önce sunucu tarafındaki parametre okuma yöntemini düzeltin. Ayrıca işaretlenmemiş onay kutusunun hiç gönderilmemesi, boş bir değer gönderilmesiyle aynı değildir; uygulama bu iki durumu gerekiyorsa ayrı yorumlamalıdır.
