Form öğesi hakkında ayrıntılı bilgi

Önceki bir modülde <form> öğesini nasıl kullanacağınızı öğrenmiştiniz. Bu modülde, formların nasıl çalıştığını ve ne zaman kullanıldığını öğreneceksiniz.

<form> öğesi kullanmalı mısınız?

Form kontrollerini her zaman bir <form> öğesine yerleştirmeniz gerekmez. Örneğin, kullanıcıların bir ürün kategorisi seçmesi için <select> öğesi sağlayabilirsiniz. Arka uçta veri depolamadığınız veya işlemediğiniz için burada <form> öğesine ihtiyacınız yoktur.

Ancak çoğu durumda, kullanıcılardan gelen verileri depolarken veya işlerken <form> öğesini kullanmanız gerekir. Bu modülde öğreneceğiniz gibi, <form> kullanmak, tarayıcılarda kendiniz oluşturmanız gereken birçok yerleşik işlev sunar. <form>'da da varsayılan olarak birçok erişilebilirlik özelliği bulunur. Bir kullanıcı form gönderdiğinde sayfanın yeniden yüklenmesini önlemek istiyorsanız <form> öğesini kullanmaya devam edebilirsiniz ancak JavaScript ile geliştirebilirsiniz.

<form> nasıl çalışır?

<form>, kullanıcı verilerini işlemenin en iyi yoludur. Formların nasıl çalıştığını merak ediyor olabilirsiniz.

<form>, etkileşimli form kontrollerinin kapsayıcısıdır.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

Form gönderimi nasıl çalışır?

<form> gönderdiğinizde tarayıcı, <form> özelliklerini kontrol eder. Veriler, method özelliğine göre GET veya POST isteği olarak gönderilir. method özelliği yoksa mevcut sayfanın URL'sine GET isteği gönderilir.

Form verilerine nasıl erişebilir ve bunları nasıl işleyebilirsiniz? Gönderilen veriler, ön uçtaki JavaScript ile GET isteği kullanılarak veya arka uçtaki kod ile GET ya da POST isteği kullanılarak işlenebilir. İstek türleri ve form verilerini aktarma hakkında daha fazla bilgi edinin.

Form gönderildiğinde tarayıcı, action özelliğinin değeri olan URL'ye istek gönderir. Ayrıca tarayıcı, Gönder düğmesinde formaction özelliği olup olmadığını kontrol eder. Bu durumda, orada tanımlanan URL kullanılır.

Ayrıca tarayıcı, <form> öğesindeki ek özellikleri arar. Örneğin, formun doğrulanıp doğrulanmayacağına (novalidate), otomatik tamamlama özelliğinin kullanılıp kullanılmayacağına (autocomplete="off") veya hangi kodlamanın kullanılacağına (accept-charset) karar verir.

Kullanıcıların en sevdikleri rengi gönderebilecekleri bir form oluşturmayı deneyin. Veriler POST isteği olarak gönderilmeli ve verilerin işlendiği URL /color olmalıdır.

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

Kullanıcıların formunuzu gönderebildiğinden emin olun

Formu göndermenin iki yolu vardır. Herhangi bir form kontrolünü kullanırken Gönder düğmesini tıklayabilir veya Enter tuşuna basabilirsiniz.

Gönder düğmenizi oluştururken her zaman harekete geçirici dil kullanın. Örneğin, Ödemeye git veya Değişiklikleri kaydet. Bu, kullanıcılarınızın formunuzun sonraki adımlarını anlamasına yardımcı olur.

Gönder düğmesini çeşitli şekillerde ekleyebilirsiniz. Bir seçenek, formunuzda <button> öğesini kullanmaktır. type="button" kullanmadığınız sürece Gönder düğmesi olarak çalışır. Diğer bir seçenek ise <input type="submit" value="Submit"> kullanmaktır.

Üçüncü seçenek ise <input type="image" alt="Submit" src="submit.png"> kullanarak grafiksel bir Gönder düğmesi oluşturmaktır. Ancak artık CSS ile grafik düğmeler oluşturabildiğiniz için type="image" kullanmanız önerilmez.

Son olarak, zaman aşımları eklemekten kaçının. Kullanıcılara form göndermeleri için istedikleri kadar süre tanıyın. Zaman aşımları veri kaybına neden olur ve kullanıcılarınızı rahatsız eder. W3C form zaman aşımı yönergelerini okuyun.

Kullanıcıların dosya göndermesine izin verme

Kullanıcıların gerekirse dosya yükleyip göndermesine izin vermek için <input type="file"> seçeneğini kullanın.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Öncelikle formunuza <input> öğesini type="file" ile birlikte ekleyin. Kullanıcıların birden fazla dosya yükleyebilmesi gerekiyorsa multiple özelliğini ekleyin.

Kullanıcıların dosya yükleyebilmesini sağlamak için bir değişiklik daha yapmanız gerekir: Formunuzda enctype özelliğini ayarlayın. Varsayılan değer: application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
...
</form>

Dosyaların gönderilebilmesi için bunu multipart/form-data olarak değiştirin. Bu kodlama olmadan dosyalar POST isteğiyle gönderilemez.

Bilgilerinizi sınayın

Form öğesiyle ilgili bilginizi test edin

Kaynaklar

• Form HTML öğesi
• Gönder düğmesiyle ilgili en iyi uygulamalar