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

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

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

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

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

Ancak çoğu durumda, kullanıcılardan gelen verileri depoladığınızda veya işlediğinizde <form> öğesini kullanmanız gerekir. Bu modülde öğreneceğiniz gibi, <form> kullandığınızda tarayıcılarda bulunan ve normalde kendiniz oluşturmanız gereken birçok yerleşik işlevden yararlanabilirsiniz. <form>'lerde varsayılan olarak birçok erişilebilirlik özelliği de bulunur. Kullanıcı bir formu gönderdiğinde sayfanın yeniden yüklenmesini önlemek istiyorsanız <form> öğesini kullanmaya devam edebilir ancak JavaScript ile geliştirebilirsiniz.

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

Kullanıcı verilerini işlemenin en iyi yolunun <form> olduğunu öğrendiniz. Formların nasıl çalıştığını merak ediyor olabilirsiniz.

<form>, etkileşimli form denetimlerinin 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önderme nasıl çalışı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. 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, GET isteği kullanılarak ön uçta JavaScript tarafından veya GET ya da POST isteği kullanılarak arka uçta kod tarafından 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 istek gönderir. Ayrıca tarayıcı, Gönder düğmesinin formaction özelliğine sahip olup olmadığını kontrol eder. Bu durumda, burada tanımlanan URL kullanılır.

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

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.

Formu göster

Olası çözümlerden biri bu 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. Formunuzda <button> öğesi kullanabilirsiniz. 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, <input type="image" alt="Submit" src="submit.png"> kullanarak görsel bir Gönder düğmesi oluşturmaktır. Ancak artık CSS ile grafik düğmeler oluşturabileceğiniz için type="image" kullanılması önerilmez.

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

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

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

Öncelikle 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ükleyebilmesi 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önderilebildiğinden emin olmak için bu değeri multipart/form-data olarak değiştirin. Bu kodlama olmadan dosyalar POST isteğiyle gönderilemez.

Öğrendiklerinizi test etme

Form öğesi hakkındaki bilginizi test edin

Dosya göndermek için enctype değerinin ne olması gerekir?

multipart/form-data
🎉
multipart/form-files
Tekrar deneyin.
form-data
Tekrar deneyin.
form-files
Tekrar deneyin.

Is it possible to send user data without a <form>

Hayır
Tekrar deneyin.
Evet, JavaScript ile.
🎉
Evet, Flash ile.
Tekrar deneyin.
Evet, HTML5 ile.
Tekrar deneyin.

<form> nasıl gönderebilirsiniz?

Bir <button> simgesini tıklayın.
Tekrar deneyin.
Enter tuşuna basın.
Tekrar deneyin.
Bir <input type="image"> simgesini tıklayın.
Tekrar deneyin.
Yukarıdakilerin tümü.
🎉

Kaynaklar