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