HTML Form Kodlamasını Anlama: URL Encoded ve Multipart Forms

Bir formun kodlama türü, enctype özniteliği tarafından belirlenir. Üç değeri olabilir.

• application/x-www-form-urlencoded – URL kodlu bir formu temsil eder. Enctype niteliği herhangi bir şeye ayarlanmadıysa, bu varsayılan değerdir.
• multipart/form-data – Çok parçalı bir formu temsil eder. Bu tür form, kullanıcı dosya yüklemek istediğinde kullanılır.
• text/plain – HTML5’te tanıtılan, adından da anlaşılacağı gibi, verileri herhangi bir kodlama olmadan gönderen yeni bir form türü

Şimdi, onları daha iyi anlamak için her bir form tipine bir örnekle bakalım.

URL Encoded Form

Adından da anlaşılacağı gibi, bu tür bir form kullanılarak gönderilen veriler URL uç kodludur. Aşağıdaki formu alın,

<form action="/urlencoded?firstname=sxid&lastname=sxloth" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" value="sxidthesloth"/>
    <input type="text" name="password" value="sxlothsecret"/>
    <input type="submit" value="Submit" />
</form>

Burada formun bir POST isteği kullanılarak sunucuya gönderildiğini görebilirsiniz, bu onun bir gövdesi olduğu anlamına gelir. Ancak gövde nasıl biçimlendirilir? URL kodludur. Temel olarak, uzun bir (name, value) çiftleri dizisi oluşturulur. Her (ad, değer) çifti birbirinden bir & (ve işareti) işaretiyle ayrılır ve her (name, value) çifti için ad, değerden bir = (eşittir) işaretiyle ayrılır, örneğin,

key1=value1&key2=value2

Yukarıdaki form için,

username=sidthesloth&password=slothsecret

Ayrıca, eylem URL’sinde iletilen bazı sorgu parametrelerimiz olduğuna dikkat edin,

/urlencoded?firstname=sid&lastname=sloth.

URL kodlu gövde ve işlem URL’sinde iletilen sorgu parametreleri çok benzer görünmüyor mu? Benzer oldukları içindir. Yukarıda tartışılan aynı formatı paylaşırlar.

Yukarıdaki kodla bir HTML dosyası oluşturmayı deneyin ve geliştirme araçlarında nasıl gönderildiğini görün. İşte bir çırpıda,

Burada dikkat edilmesi gerekenler, application/x-www-form-urlencoded yazan Content-Type başlığı, sorgu dizesi ve form alanlarının yukarıda tartışıldığı gibi sunucuya aktarıldığıdır.

Not: Ekran görüntüsündeki Form Verileri terimi ile kafanız karışmasın. Google Chrome, form alanlarını bu şekilde temsil eder.

Her şey yolunda, ancak kodlama işlemine biraz daha var. Gönderilen değerlere bazı boşluklar ekleyelim, bir öncekiyle aynı olan ancak firstname değeri sid’den sid slayer’a ve username değeri sidthesloth’dan sid the sloth’a değişen aşağıdaki formu alalım.

<form action="/urlencoded?firstname=sid slayer&lastname=sloth" method="POST" enctype="application/x-www-form-urlencoded">
    <input type="text" name="username" value="sid the sloth"/>
    <input type="text" name="password" value="slothsecret"/>
    <input type="submit" value="Submit" />
</form>

Şimdi formu göndermeye çalışın ve form alanlarının geliştirme araçlarında nasıl aktarıldığını görün. İşte Chrome’da bir geliştirme araçları eki.

Multipart Forms

Çok parçalı formlar genellikle kullanıcının dosyaların sunucuya yüklenmesine ihtiyaç duyduğu bağlamlarda kullanılır. Bununla birlikte, nasıl çalıştıklarını anlamak için yeterli olduğu için sadece basit metin alanı tabanlı formlara odaklanacağız.

Yukarıdaki formu çok parçalı bir forma dönüştürmek için tek yapmanız gereken form etiketinin enctype niteliğini application/x-www-form-urlencoded‘den multipart/form-data‘ya değiştirmek.

<form action="/multipart?firstname=sid slayer&lastname=sloth" method="POST" enctype="multipart/form-data">
    <input type="text" name="username" value="sid the sloth"/>
    <input type="text" name="password" value="slothsecret"/>
    <input type="submit" value="Submit" />
</form>

Devam edelim ve gönderelim ve geliştirme araçlarında nasıl göründüğüne bakalım.

Content-Type Header

Content-Type başlığının değeri açıkça çok parçalı/form-veridir. Ama aynı zamanda başka bir değeri var, sınır. Yukarıdaki örnekte bunun değeri tarayıcı tarafından oluşturulur, ancak kullanıcı bunu da çok iyi tanımlayabilir, örneğin, border=sidtheslothboundary. Bir sonraki bölümde ne kadar yararlı olduğunu göreceğiz.

Request Body

İstek yükü, form alanlarının kendisini içerir. Her (ad, değer) çifti, aşağıdaki formatta bir MIME mesaj parçasına dönüştürülür,

--<<boundary_value>>
Content-Disposition: form-data; name="<<field_name>>"

<<field_value>>

Yukarıdaki biçim, her (ad, değer) çifti için tekrarlanır.

Son olarak, tüm yük, sonuna — eklenmiş sınır değeri ile sonlandırılır. Yani tüm istek şöyle görünüyor,

--<<boundary_value>>
Content-Disposition: form-data; name="<<field_name>>"

<<field_value>>
--<<boundary_value>>
Content-Disposition: form-data; name="<<field_name>>"

<<field_value>>
--<<boundary_value>>--

Şimdi sınır değerinin nasıl kullanıldığını görüyoruz.

application/x-www-form-urlencoding form durumunda, & ampersand türü, her (name, value) çifti arasında bir sınırlayıcı görevi görerek sunucunun bir parametre değerinin ne zaman ve nerede başlayıp nerede bittiğini anlamasını sağlar.

username=sidthelsloth&password=slothsecret

Çok parçalı/form-veri formu durumunda, sınır değeri bu amaca hizmet eder. Sınır değeri XXX ise, istek yükünün şöyle görüneceğini söyleyin:

--XXX
Content-Disposition: form-data; name="username"

sidthesloth
--XXX
Content-Disposition: form-data; name="password"

slothsecret
--XXX--

Tirelerin kendileri sınır değerinin bir parçası değil, talep formatının bir parçası olarak gereklidir. Yukarıdaki istek için İçerik Türü başlığı şöyle olacaktır:

Content-Type: multipart/form-data; boundary=XXX

Bu, tarayıcının her alanın ne zaman ve nerede başladığını ve bittiğini anlamasını sağlar.

Text/plain Forms

Bu formlar, sunucuya gönderildiğinde form alanlarının URL kodlu olmaması dışında, URL kodlu formlarla hemen hemen aynıdır. Bunlar genel olarak yaygın olarak kullanılmazlar, ancak HTML 5 spesifikasyonunun bir parçası olarak tanıtıldılar.

Bunları, makineler için değil, insan anlayışı için olduğu gibi kullanmaktan kaçının.

Spesifikasyondan alıntılandığı gibi,

Metin/düz biçimini kullanan yüklerin insan tarafından okunabilir olması amaçlanmıştır. Biçim belirsiz olduğu için bilgisayar tarafından güvenilir bir şekilde yorumlanamazlar (örneğin, bir değerdeki değişmez yeni satırı, değerin sonu).

Bu yazımızda form olaylarında sıklıkla karşılaştığımız enctype metodunu inceledik. Bu yazının kaynağını bağlantından ziyaret edebilirsiniz.