Form öğesine giriş niteliğindeki bu bilgilerle web'de form kullanmayla ilgili temel bilgileri öğrenin.
Web sitenizdeki kullanıcılara en sevdikleri hayvanı sormak istediğinizi hayal edin. İlk adım olarak, verileri toplamak için bir yönteme ihtiyacınız var.
Bunu HTML ile nasıl yapabilirsiniz?
HTML'de bunu form öğesini (<form>
), <label>
ile <input>
ve <button>
göndererek oluşturabilirsiniz.
Form öğesi nedir?
<form>
<label for="animal">What is your favorite animal?</label>
<input type="text" id="animal" name="animal">
<button>Save</button>
</form>
Form öğesi; başlangıç etiketi <form>
, başlangıç etiketinde tanımlanan isteğe bağlı özellikler ve bir bitiş etiketinden (</form>
) oluşur.
Başlangıç ve bitiş etiketleri arasına farklı kullanıcı girişi türleri için <input>
ve <textarea>
gibi form öğeleri ekleyebilirsiniz.
Bir sonraki modülde form öğeleri hakkında daha fazla bilgi edineceksiniz.
Veriler nerede işlenir?
Bir form gönderildiğinde (örneğin, kullanıcı Gönder düğmesini tıkladığında) tarayıcı bir istekte bulunur. Komut dosyası, bu isteğe yanıt verebilir ve verileri işleyebilir.
Varsayılan olarak istek, formun gösterildiği sayfaya yapılır.
Form verilerini işlemesi için https://web.dev
adresinde
çalışan bir komut dosyası istediğinizi düşünelim. Bunu nasıl yapardınız?
Deneyin.
action
özelliğini kullanarak komut dosyasının konumunu seçebilirsiniz.
<form action="https://example.com/animals"> ... </form>
Yukarıdaki örnekte, https://example.com/animals
öğesine bir istek gönderilir.
example.com
arka ucundaki bir komut dosyası, /animals
isteklerini işleyebilir ve formdaki verileri işleyebilir.
Veriler nasıl aktarılır?
Varsayılan olarak, form verileri GET
isteği olarak gönderilir ve gönderilen veriler URL'ye eklenir.
Bir kullanıcı yukarıdaki örnekte "kurbağa" değerini gönderirse tarayıcı şu URL'den istekte bulunur:
https://example.com/animals?animal=frog
Bu durumda, verileri URL'den alarak ön veya arka uçtaki verilere erişebilirsiniz.
İsterseniz yöntem özelliğini değiştirerek forma POST
isteği kullanma talimatı verebilirsiniz.
<form method="post">
...
</form>
POST
kullanıldığında veriler, isteğin gövdesine eklenir.
Veriler URL'de görünmez ve yalnızca bir ön uç veya arka uç komut dosyasından erişilebilir.
Hangi yöntemi kullanmalısınız?
Her iki yöntemin de kullanım alanları vardır.
Hassas verileri işleyen formlar için POST
yöntemini kullanın.
Veriler şifrelenir (HTTPS kullanıyorsanız) ve bu verilere yalnızca isteği işleyen arka uç komut dosyası tarafından erişilebilir.
Veriler URL'de görünmez. Bunun yaygın bir örneği oturum açma formudur.
Veriler paylaşılabilir özellikteyse GET
yöntemini kullanabilirsiniz.
Bu şekilde, veriler URL’ye eklendikleri şekilde tarayıcı geçmişinize eklenir.
Arama formları genellikle bunu kullanır. Bu şekilde, bir arama sonucu sayfasına yer işareti koyabilirsiniz.
Form öğesinin kendisi hakkında bilgi edindiğinize göre artık formlarınızı etkileşimli hale getirmek için form alanları hakkında bilgi edinebilirsiniz.
Öğrendiklerinizi sınayın
Form öğesi hakkındaki bilginizi test edin
Form öğesinin başlangıç etiketi neye benzer?
</form>
<form>
öğesinin bitiş etiketidir.<form-container>
<form>
<form-element>
<form>
öğesinin nerede işlendiğini tanımlamak için hangi özelliği kullanabilirsiniz?
where
action
action
özelliği, <form>
öğesinin nerede işlendiğini tanımlar.href
url
Varsayılan istek yöntemi nedir?
GET
POST