HTML Dersleri [Ders no: 7]
HTML Form Etiketi

Eskiden kağıt formlar vardı. Şimdi etkileşimli kitaplar olan web siteleri var. Kağıt formların yerini HTML FORM almış durumda. HTML form etiketi aşağıdaki resim ile özetlenmiştir. Lütfen inceleyin.



HTML Form Etiketi

Yukarıdaki resmi kopyaladınız! Gözleriniz ile beyninize bir kopyasını aldınız. Yukarıdaki resim konunun özetini öğretir. Şimdi HTML Form Etiketini etraflıca öğrenmeye hazır mısınız?

HTML Form Etiketi (Örnek Kod):

Bu yukarıkdaki kodu sayfanın başında gördünüğünüz resim klavuzluğunda şöyle çözümleyin lütfen: Form etiketi etki alanında 3 tane input etiketi tanımlanmış. Forma bazı özellikler yazılmış ve bunlar 4 tanedir. Özelliklerinden ID ve Name aynı değeri almış.

Şimdi biraz gerilere götüreceğim sizi. Web sayfaları henüz yokken bu iş nasıl oluyordu gelin bi geriye gidelim.

Eskiden Kağıt Formlar Vardı

Form Temini

Eskiden kağıt formlar vardı bir kurum yada kuruluşa bu kağıtlar ile başvurulurdu. Kişi çeşitli bilgileri uygun şekilde vermeliydi. Silinmeyen yazı ile belli bir sırada. Elektronik olmayan klasik imzası ile onaylanmış şekilde.

Her ihtiyaca yönelik farklı formlar. Her birinin kendine ait bir adı var. Danışmadan arzunuz ne ise ona uygun olan kağıdı isterdiniz. Size bir kopyası verilirdi daha fazlası değil. Şimdi bu eylem web sunucudan sayfa istemeye dönüştü.

Eskiden formun adı vardı. Şimdi bunu name="kimlik_kontrol" ile yapıyoruz.

Eskiden gizli başvuru zarf içinde kapalı verilirdi. Şimdi bunu Method = Post ile yapıyoruz.



form method post

Öğrenmek aşamalı bir eylemdir. Bazı öğrenmelerin kullanılırlığı yüksektir. Birşeyin önceki halini bilirsek yeni halini kavramak daha köklü olur. Öğrenmek zevkli ve kısa sürede olur. Öğrendiğinizi uzun süre etkin şekilde kullanırsınız.

Arzuhalciler [title="...."]

Ayakkabı boyacılarını hatırlarım. Valiliğin yakınında ayakkabı boyamanın yanında dilekçe yazarak ve form doldurarak ihtiyaç görürlerdi. Bu konuda acemi başvuru yapacaklara az bi ücret karşılığında arzuhalcilik yaparlardı. Söyleyin bakalım arzuhalciler nereye yaklaştığınızda gözükürler...

Bilgisayarda yaklaşmanız imlec iledir. İmlec elemanların üzerine gelince gözüken ufak bilgilendirme title parametresi ile etikete iliştirilir.


form title

Daksil mi Yeni Kağıt mı [type=reset]

Sahteciliği önlemek için başvurunun tükenmez kalem ile yapılması gerekir. Daksil ile düzeltmeye izin veriliyorsa yanlışın üzerine sünger çekebilirdiniz. Karalama yapmak yasaktır. Her bir yanlış yaptığınızda yeni bir form daha istediğinizi düşünün hele bi... Siz teslim ettikten sonra mı daksillendi vs..

Daksil klavyedeki silme tuşlarına denk gelir. Boş yeni bir form kağıdı almanın bilgisayardaki karşılığı nedir? Form elemanlarının türünü belirttiğimiz type parametresine reset değeri vermektir. Bu şekidle bir buton oluşur. İşte bu butona kullanıcı tıkladığında girilen bütün bilgiler iptal olur.

Tek Başvuru [Sayfa Yenileme]

Bir formdan aynı kişi ikikez doldurmazdı. Form olan sayfayı yenilediğinizde ikinci bir başvuru yapmış olursunuz. Bunun önlenmesinin metodu vardır.

Bilgi Uyumu

Formdaki bir yere girilen bilgi diğer bazı bilgileri sınırlandırır. Örneğin köyde değil de şehirde oturan birisi ilçe seçmesi gerekir. İlçe seçince mahalle seçimi yapılmalıdır.

Form Kabul

Doldurulmuş formu kontrol eden göz kabul ettiyse artık işlem tamamlanmıştır. İlgili kurumda yetki ve tecrübesi olan bu göz uygunsuz bir bilgi girişini paylaşır. Gerek görürse tekrar bi form doldurtur. Gerek görmezse not düşer vs..

Form Özellikleri

HTML etiketleri İngilizce'dir. Etiketlerin özelliklerini belirten kelimeler de ingilizcedir. İsimlendirme ve kimliklendirme için Name ve ID özelliği kullanılır. Bunların ikisine de aynı değeri vermenizi öneririm. Javascript kodlamada ID ile muamele edeceğiz. PHP de ise name özelliği ile forma girilen bilgilere ulaşabiliriz.

Etiketin Dışı

Bütün form elemanlarını ilgili form açıldıktan sonra kapatılmadan önce yazarız. Oldu ki bir nedenle form bitişinden sonra yazmamız gerekirse nasıl yaparız? Bu durumda etiketin dışındaki bir elemanı bir forma ait kılmak için etkit özelliğine form="form_name" şeklinde değer vererek bu amaca ulaşılır.

Target

Form gönderme işlemi hangi web programına gönderilecek? Burada programdan kasıt .php uzantılı web sayfasıdır. Form gönderme işlemini İngilizce submit kelimesi ifade eder.

Form Method (GET ve POST)

Formdaki bilgiler sunucuya hangi yöntem ile gönderilecekse method="..." şeklinde belirtmeliyiz. GET ile gönderim olduğunda adres çubuğunda [Bilgiler URL formatında gider] gözükür. POST olan gönderme metodu ise kapalı zarf gibi işleve sahiptir.

HTTP protokolü gönderminde (GET yerine) POST metoduyla göndermek saklı olsa da tam güvenlik sağlamaz. Security kelimesinin baş harfi olan "S" nin ilave olunduğu HTTPS protokolü ile gönderilen POST tipi bilgi çok daha güvenlidir. Şifre gibi bir bilginin type="password" ile alınması ise etraftaki gözlerden saklama güvenliği sağlar.

HTTPS ile HTTP Farkı Security

Form Submit

Submit en genel ve basit şekilde bir type=submit etiketine ziyaretçinin tıklaması ile oluşur. Ziyaretçi taraflı form submit esnasında yapılacak işleri javascript ile yapabiliriz. Form etiketi bazı olaylara sahiptir. Event (olay) diye tabir edilen olaylarından onSubmit olayına Javascript ile kontrol programı yazabiliriz. return false yaptığımızda eylem boşa çıkartılır form gönderilmez.

Required (Zorunlu)

Tasarımda genellikle kırmızı bir yıldız konmuş form elemanları olur. Doldurulması zorunlu alanlar bu şekilde gösterilir. Required herhangi bir form elemanına girilebilen bir değerdir. HTML etiketlerine özellik (attribute) verirken nasıl yapıyorduk? Özellik ismini yazıp eşittir den sonra değerini yazıyorduk değil mi! Hidden gibi Required da [eşittir tırnak içinde değer ataması olmadan] direkt yazılır. Hidden gibi etiketi direkt etkiler.
Örneğin Type=Submit olan bir form elemanına tıklandığında required özelliği verilmiş bir etiket boş ise sayfanın (/tarayıcının) ayarındaki dil ile ziyaretçi uyarı alır.

Form Kontrol

Javascript de PHP de etkileşimi sağlar yani programlamayı sağlar. Required dışında bilgi kontrolü yapılacaksa Javascript ile yapabiliriz. Bilmenizi istediğim birşey var. "Javascript ziyaretçi tarafında çalışır sunucu taraflı çalışmaz." Sözü içinde bulunduğumuz 2022 yılında; web yazılım uzmanlarının bir çoğu için doğrudur. PHP sunucu tarafında çalışır. PHP'de ziyaretçi taraflı program yazmak mümkün değildir.

Form Gönderme

PHP programlama

Submit edilen formdaki bilgiler [varsa bilgi kontrol süreçleri çalıştıktan sonra] action değerindeki dosyaya gönderilir. Sunucuya gönderilen bu bilgiler PHP ile elde edilip SQL cümlesi ile veri tabanına kaydı gerçekleşir.

Form Action

Form etiketi action parametresi nedir? Formdaki bilgiler nereye iletilecekse bu parametre ile söylenir. Bu özelliğe CGI-Bin ataması çok yaygın değildir. Genellikle PHP veya aspx uzantılı bir sunucu taraflı program action özelliğinde yer alır. Form submit gerçekleştiğinde bu belirtilen dosyaya form bilgileri gönderilmiş olur.

SQL injection Hack

sql injection

Sayın hacker olmaya gelen arkadaş. Enjeksiyonu bilirsin... Vücut gibi sistemli, görkemli bir sanat eserine bir sıvı katmak için kullanılır. SQL injection ise form elemanına beklenen bilgi değil haklayacak bilgi girmek demektir. Girilen bilgi programcının öngörmediği algoritmayı tamamen alt üst edebilecek bir SQL komutudur. En basit olarak
Kullanıcı Adı:
Şifre:

Yukarıdaki iki bilginin alındığı ufak bir giriş ekranı formu olsun. Burada alınan bilgiler sunucuda şöyle bir cümlede kullanılsa:

"SELECT ID from kullanici where kullanici='...' and sifre='....'"

Hacker burada şifre yerine şunu girse:

or 1=1

ne olur? Bi düşün bakalım. Şifre ve kullanıcı ismi bilmese de eğer bu giriş formundaki değerler enjeksiyon temizliği yapılmadan SQL cümlesi oluşturulursa vah vah...

Adım Adım Bilgi Almak

Form ile adım adım bilgi almak teknik olarak defalarca ufak ufak formlar yapmaktır. Kullanıcının doldurmaktan sıkılıp vazgeçmesini önlemek için yapılır. Tek formun hazırlanıp bütün bilgiyi tek sayfada almakla arasında kullanıcı dostu yaklaşım farkı vardır.

HTML Form Örnekleri ; sonraki HTML dersimizin konusudur.





HTML Ana Sayfa       Tüm Sponsorlar

Bu Sayfanın Detayı:
Konusu: Web Yazılım için HTML Dersi.
Hazırlayan: İsmail PALA (1973-)
Yayın Tarihi: 2022-12-31 07:44:30
Kaç Gündür Yayında: +1137 Gün
Tekil Ziyaretçi : 493

Tüm Hakları Saklıdır. Copyright © 2022