Ö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.
Olası çözümlerden biri şu formu kullanmaktı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
Dosyaları göndermek için hangi enctype
değeri gereklidir?
multipart/form-data
multipart/form-files
form-data
form-files
Kullanıcı verileri <form>
olmadan gönderilebilir mi?
<form>
nasıl gönderilir?
<button>
öğesini tıklayın.Enter
tuşuna basın.<input type="image">
öğesini tıklayın.