Önceki modülden <form>
öğesinin nasıl kullanılacağını öğrendiniz.
Bu modülde, bir formun işleyiş şekli ve ne zaman kullanılacağı açıklanmaktadır.
<form>
öğesi kullanmalı mısınız?
Form kontrollerini her zaman bir <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 <form>
öğesine ihtiyacınız yoktur.
Ancak çoğu durumda kullanıcılardan gelen verileri depoladığınızda veya işlediğinizde
<form>
öğesini kullanmalısınız.
Bu modülde öğreneceğiniz gibi, <form>
kullanmak, normalde kendi başınıza oluşturmak zorunda kalacağınız tarayıcılardan çok sayıda yerleşik işlev sağlar.
<form>
ayrıca varsayılan olarak birçok erişilebilirlik özelliğine sahiptir.
Kullanıcı bir form gönderdiğinde sayfanın yeniden yüklenmesini önlemek istiyorsanız
<form>
öğesini kullanmaya devam edebilirsiniz, ancak öğeyi
JavaScript.
<form>
nasıl çalışır?
Kullanıcı verilerini işlemenin en iyi yolunun <form>
olduğunu öğrendiniz.
Şimdi bir formun nasıl çalıştığını merak ediyor olabilirsiniz.
<form>
, etkileşimli form kontrolleri için 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 süreci nasıl işler?
Bir <form>
gönderdiğinizde, tarayıcı <form>
özelliklerini kontrol eder. Veriler GET
olarak gönderilir
method
özelliğine göre POST
isteği. method
özelliği yoksa
Geçerli sayfanın URL'sine GET
isteği gönderildi.
Form verilerine nasıl erişebilir ve bu verileri nasıl işleyebilirsiniz?
Gönderilen veriler, ön uçta GET
isteği kullanılarak JavaScript tarafından işlenebilir.
veya GET
ya da POST
isteği kullanarak arka uçta kod girerek
görebilirsiniz.
Daha fazla bilgi:
istek türleri ve form verilerinin aktarılması hakkında daha fazla bilgi edinin.
Form gönderildiğinde, tarayıcı action
özelliğinin değeri olan URL'ye bir istek gönderir.
Ayrıca, tarayıcı Gönder düğmesinde formaction
özelliğinin olup olmadığını kontrol eder.
Böyle bir durumda, burada tanımlanan URL kullanılır.
Dahası, tarayıcı <form>
öğesinde ek özellikler arar.
örneğin, formun doğrulanıp doğrulanmayacağına (novalidate
) karar vermek için
otomatik tamamlama (autocomplete="off"
) veya hangi kodlamanın kullanılması gerektiğini (accept-charset
) seçin.
Kullanıcıların en sevdikleri rengi gönderebileceği bir form oluşturmaya çalışın.
Veriler bir 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 olma
Form göndermenin iki yolu vardır.
Gönder düğmesini tıklayabilir veya herhangi bir form kontrolünü 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 Gönder düğmesi olarak çalışır.
Diğer bir seçenek de <input type="submit" value="Submit">
kullanmaktır.
Üçüncü seçenek, <input type="image" alt="Submit" src="submit.png">
kullanmaktır.
grafiksel bir Gönder düğmesi oluşturun.
Ancak, artık CSS ile grafik düğmeler oluşturabileceğiniz için type="image"
kullanmanız önerilmez.
Kullanıcıların dosya göndermesine izin ver
Gerektiğinde kullanıcıların dosya yükleyip gönderebilmesi için <input type="file">
kullanın.
<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>
İlk olarak 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 bunu 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 gerekir?
multipart/form-data
multipart/form-files
form-files
form-data
<form>
olmadan kullanıcı verileri gönderilebilir mi
<form>
nasıl gönderilir?
Enter
tuşuna basın.<button>
simgesini tıklayın.<input type="image">
öğesini tıklayın.