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

Form öğesine giriş yaparak web'de form kullanmanın temel bilgilerini öğrenin.

Web sitenizdeki kullanıcılara en sevdikleri hayvanı sormak istediğinizi düşünün. İlk adım olarak, verileri toplamanın bir yolunu bulmanız gerekir.

HTML'de bunu form öğesini (<form>), <label> içeren bir <input> ve bir gönderim <button> kullanarak oluşturabilirsiniz.

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Form öğesi nedir?

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ş etiketi arasına farklı kullanıcı girişi türleri için <input> ve <textarea> gibi form öğeleri ekleyebilirsiniz. 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. Bir 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şlemek için https://web.dev adresinde çalışan bir komut dosyası istediğinizi varsayalım. Bunu nasıl yaparsınız? CodePen'de deneyin.

      <form action="https://example.com/animals"></form>

Önceki örnek, https://example.com/animals adresine istek gönderir. 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, gönderilen verilerin URL'ye eklendiği bir GET isteği olarak gönderilir. Önceki örnekte kullanıcı "kurbağa" kelimesini gönderirse tarayıcı aşağıdaki URL'ye istekte bulunur:

https://example.com/animals?animal=frog

Bu durumda, URL'den verileri alarak ön uçtaki veya arka uçtaki verilere erişebilirsiniz.

İsterseniz yöntem özelliğini değiştirerek formun POST isteği kullanmasını sağlayabilirsiniz.

<form method="post">
...
</form>

POST kullanıldığında veriler istek gövdesine dahil edilir.

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 yalnızca isteği işleyen arka uç komut dosyası tarafından erişilebilir. Veriler URL'de görünmez. Buna yaygın bir örnek olarak oturum açma formunu verebiliriz.

Veriler paylaşılabilirse GET yöntemini kullanabilirsiniz. Ardından, URL'ye dahil edildiği için veriler tarayıcı geçmişinize eklenir. Arama formlarında genellikle bu yöntem kullanılır. Bu özellik, arama sonucu sayfalarını favorilerinize eklemenizi sağlar.

Form öğesi hakkında bilgi edindiğinize göre şimdi formlarınızı etkileşimli hale getirmek için form alanları hakkında bilgi edinme zamanı.

Anlayıp anlamadığınızı kontrol etme

Form öğesiyle ilgili bilginizi test edin

Kaynaklar

<form> öğesi.