HTML form nedir?

HTML form, ziyaretçiden veri almak ve bu veriyi bir hedefe göndermek için kullanılan sayfa bölümüdür. Kullanıcı adı, e-posta, arama kelimesi, seçim veya mesaj gibi bilgileri <input>, <select> ve <textarea> kontrolleriyle toplar; <button> ile gönderim başlatır. Formun kendisini <form> elementi oluşturur. Verinin gerçekten kaydedilmesi veya işlenmesi için formun gönderdiği adreste bir sunucu uygulaması bulunmalıdır.

HTML form nasıl çalışır?​

Bir formun temel çalışma akışı şöyledir:

1. Kullanıcı form alanlarını doldurur veya seçenekleri belirler.
2. Tarayıcı, name niteliği bulunan gönderilebilir alanların değerlerini isim-değer çiftleri olarak toplar.
3. Gönderme düğmesine basıldığında tarayıcı, veriyi action niteliğinde belirtilen adrese yollar.
4. method="get" kullanılırsa veriler genellikle URL sorgu parametrelerine eklenir. method="post" kullanılırsa veriler isteğin gövdesinde gönderilir.
5. Sunucu veriyi doğrular, işler ve bir sonuç sayfası veya yanıt döndürür.

label elementi alanın ne istediğini açıklar. for değeri, ilgili alanın id değeriyle eşleştiğinde etiket ile alan birbirine bağlanır. Bu yapı klavye ve yardımcı teknolojilerle kullanımı kolaylaştırır. required gibi nitelikler ise tarayıcı tarafında temel zorunlu alan kontrolü sağlar; sunucu tarafında ayrıca doğrulama yapılmalıdır.

En küçük form işaretlemesi​

Aşağıdaki kodu bir HTML sayfasına ekleyebilirsiniz. Gönderimi tamamlamak için sayfanın sunucudan sunulması ve /form-handler yolunun uygulamada tanımlanması gerekir:


Kodu yerleştirdikten sonra alana html yazıp Ara düğmesine basın. Tarayıcı, hedef adresi /form-handler?q=html biçiminde çağırmayı dener. Adreste bu yolu karşılayan bir sunucu uç noktası varsa arama işlemi yapılır ve sonuç döndürülür.

Başarısız durumda görülen 404 Not Found yanıtı, HTML formunun bozuk olduğunu değil, /form-handler adresinde işlem yapan bir sunucu kaynağı bulunmadığını gösterir. Yerel dosyayı doğrudan açtığınızda bu adresi karşılayacak bir sunucu da olmayabilir. Sonraki adım, kullandığınız PHP, Node.js veya başka sunucu teknolojisinde bu yolu oluşturmak ve gelen q değerini sunucuda işlemektir. Form tek başına veritabanına kayıt yapmaz.

Hangi nitelik ne zaman kullanılır?​

Formu tasarlarken en önemli kararlar şunlardır:
Form içindeki button elementi varsayılan olarak gönderme davranışı kazanabildiği için amacını açık yazmak iyi bir uygulamadır. Form gönderecek düğmede type="submit", yalnızca JavaScript çalıştıracak veya başka bir işlem yapacak düğmede type="button" kullanın. name niteliği olmayan veri girişlerinin değeri gönderime dahil edilmez; disabled alanlar ve seçilmemiş checkboxlar da gönderilmez. Bu nedenle yalnızca name eklemek yeterli değildir; bu nedenle sunucunun okuyacağı her alanın anlamlı bir name değeri olmalıdır.

Sık yapılan hatalar​

1. Alanı id ile tanımlayıp name eklememek: Alan ekranda görünür ancak gönderilen veride yer almaz.
2. label for ile alan id değerlerini eşleştirmemek: Etiketin tıklanabilir ve anlaşılır ilişkisinden yararlanılamaz.
3. Form yerine div kullanıp gönderimi kendiniz taklit etmek: Tarayıcının yerleşik gönderim, klavye ve doğrulama davranışlarını gereksiz yere kaybedersiniz.
4. POST’u şifreleme sanmak: Parola ve kişisel veri için HTTPS gerekir; POST yalnızca verinin URL yerine gövdede taşınmasını sağlar.
5. Yalnızca tarayıcı doğrulamasına güvenmek: Kullanıcı required kontrolünü aşabilecek istekler gönderebilir; sunucu gelen veriyi mutlaka yeniden doğrulamalıdır.
6. Bir formu başka bir form içine yerleştirmek: İç içe formlar geçerli ve öngörülebilir bir yapı değildir; her işlem için ayrı, bağımsız form kullanın.

Sık sorulan sorular​

HTML form için JavaScript zorunlu mudur?​

Hayır. Temel veri gönderimi JavaScript olmadan yapılabilir. JavaScript; sayfayı yenilemeden gönderim, özel arayüz davranışları veya ek istemci kontrolleri gerektiğinde kullanılır.

Dosya yüklemek için yalnız input type="file" yeterli mi?​

Sunucu dosya kabul ediyorsa formda method="post" ve enctype="multipart/form-data" kullanın. Sunucu dosyanın boyutunu, türünü ve saklama koşullarını ayrıca doğrulamalıdır; dosya seçicinin görünmesi dosyanın güvenle kaydedildiğini göstermez.

Ekranda dolu görünen bir alan neden sunucuya ulaşmayabilir?​

Önce name değerini, alanın disabled olup olmadığını ve doğru forma bağlı bulunup bulunmadığını kontrol edin. Salt okunur bir değer göndermek gerekiyorsa destekleyen giriş türlerinde readonly ile disabled farkını değerlendirin.