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

Bu forma giriş videosuyla web üzerinde form kullanmaya ilişkin temel bilgileri öğrenin öğesine dokunun.

Web sitenizdeki kullanıcılara en sevdikleri hayvanla ilgili soru sormak istediğinizi varsayalım. İ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>) kullanarak oluşturabilirsiniz. <label> içeren bir <input> ve <button> gönderin.

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 şu başlangıç etiketinden oluşur: <form> başlangıç etiketinde tanımlı isteğe bağlı özellikler ve bir bitiş etiketi (</form>).

Başlangıç ve bitiş etiketi arasına <input> ve <textarea> gibi form öğeleri ekleyebilirsiniz. her tür kullanıcı girişi için tasarlandı. 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), istekte bulunur. Bir komut dosyası bu isteğe yanıt verebilir ve verileri işleyebilir.

Varsayılan olarak istek, formun gösterildiği sayfaya gönderilir.

https://web.dev konumunda çalışan bir komut dosyası istediğinizi varsayalım işleme koymaya karar verdi. Bunu nasıl yapardınız? Deneyin!

Yanıtı aç/kapat

action özelliğini kullanarak komut dosyasının konumunu seçebilirsiniz.

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

Yukarıdaki örnek, https://example.com/animals için bir istekte bulunur. example.com arka ucundaki bir komut dosyası, /animals isteklerini işleyebilir ve formdaki verileri işleyebilir.

Veriler nasıl aktarılır?

Form verileri varsayılan olarak GET isteği şeklinde gönderilir. ve gönderilen veriler URL'ye eklenir. Bir kullanıcı "kurbağa" gönderirse yukarıdaki örnekte, tarayıcı aşağıdaki URL'ye bir istek gönderir:

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

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

İsterseniz forma, yöntem özelliğini değiştirerek bir POST isteği kullanma talimatı verebilirsiniz.

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

POST kullanıldığında, veriler isteğin gövdesi.

Veriler URL'de görünmez ve yalnızca ö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. Oturum açma formu sık kullanılan bir örnektir.

Veriler paylaşılabilirse GET yöntemini kullanabilirsiniz. Bu şekilde, veriler URL'ye dahil edildiği şekilde tarayıcı geçmişinize eklenir. Arama formlarında genellikle bunu kullanılır. Bu şekilde, arama sonucu sayfasına yer işareti koyabilirsiniz.

Artık form öğesinin kendisi hakkında bilgi edindiğinize göre, form alanlarını kullanarak formlarınızı etkileşimli hale getirin.

Öğrendiklerinizi sınayın

Form öğesi hakkındaki bilginizi test edin

Form öğesinin başlangıç etiketi nasıl görünür?

</form>
Neredeyse bu, <form> öğesinin bitiş etiketidir.
<form-container>
Tekrar deneyin.
<form>
🎉
<form-element>
Tekrar deneyin.

<form> öğesinin işlendiği yeri tanımlamak için hangi özelliği kullanabilirsiniz?

where
Tekrar deneyin.
action
Evet, action özelliği <form> öğesinin nerede işlendiğini tanımlar.
href
Tekrar deneyin.
url
Tekrar deneyin.

Varsayılan istek yöntemi nedir?

GET
🎉
POST
Tekrar deneyin.

Kaynaklar

<form> öğesi.