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!
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>
<form>
öğesinin bitiş etiketidir.<form-container>
<form>
<form-element>
<form>
öğesinin işlendiği yeri 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