Form öğesinin yakından görünümü

Önceki modülde, <form> öğesinin nasıl kullanılacağını öğrendiniz. Bu modülde, bir formun nasıl çalıştığını ve ne zaman kullanılacağını öğreneceksiniz.

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

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

Bununla birlikte, çoğu durumda kullanıcılardan gelen verileri saklar veya işlerken <form> öğesini kullanmanız gerekir. Bu modülde öğreneceğiniz gibi, <form> kullanmak, başka türlü kendi başınıza oluşturmak zorunda kalacağınız tarayıcılarda birçok yerleşik işlev sağlar. <form> ayrıca varsayılan olarak birçok erişilebilirlik özelliği yerleşik olarak sunar. Kullanıcılar form gönderdiğinde sayfanın yeniden yüklenmesini önlemek istiyorsanız <form> öğesini yine de kullanabilirsiniz ancak bu öğeyi JavaScript ile geliştirebilirsiniz.

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

Kullanıcı verilerini yönetmenin en iyi yolunun <form> olduğunu öğrendiniz. Şimdi formun nasıl çalıştığını merak ediyor olabilirsiniz.

<form>, etkileşimli form kontrollerine yönelik bir kapsayıcı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önderme işlemi nasıl yapılır?

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

Form verilerine nasıl erişebilir ve bu verileri nasıl işleyebilirsiniz? Gönderilen veriler bir GET isteği kullanılarak ön uçta JavaScript tarafından ya da GET veya POST isteği kullanılarak arka uçtaki kod 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 bir istekte bulunur. Ayrıca tarayıcı, Gönder düğmesinin formaction özelliğinin olup olmadığını kontrol eder. Bu durumda, burada tanımlanan URL kullanılır.

Ayrıca tarayıcı, <form> öğesinde ek özelliklere bakar. Örneğin, formun doğrulanmasının gerekip gerekmediğine (novalidate), otomatik tamamlamanın mı kullanılacağına (autocomplete="off") veya hangi kodlamanın kullanılması gerektiğine (accept-charset) karar vermek için bu özelliklere bakar.

Kullanıcıların en sevdikleri rengi gönderebilecekleri bir form oluşturmayı deneyin. Veriler POST isteği olarak gönderilmeli ve verilerin işleneceğ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

Form göndermenin iki yolu vardır. Gönder düğmesini tıklayabilir veya herhangi bir form denetimini kullanırken Enter tuşuna basabilirsiniz.

Gönder düğmesini çeşitli şekillerde ekleyebilirsiniz. Seçeneklerden biri, formunuzun içinde bir <button> öğesi kullanmaktır. type="button" kullanmadığınız sürece bu düğme, Gönder düğmesi olarak çalışır. Başka bir seçenek de <input type="submit" value="Submit"> kullanmaktır.

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

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

Gerekirse kullanıcıların dosya yüklemesine ve göndermesine izin vermek için <input type="file"> kullanın.

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

Önce formunuza type="file" içeren bir <input> öğesi 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 gerekiyor. Formunuzda enctype özelliğini ayarlayın. Varsayılan değer application/x-www-form-urlencoded değeridir.

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

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

Öğrendiklerinizi sınayın

Form öğesi hakkındaki bilginizi test edin

Kaynaklar

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