Kullanıcılardan veri almak için formları kullanma

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.

<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

Kaynaklar

<form> öğesi.