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

Ö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.

<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

Kaynaklar

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