Form İşlemlerini Yapmak ve Oturum Yönetimini Gerçekleştirmek

Form İşlemlerini Yapmak ve Oturum Yönetimini Gerçekleştirmek

11 Ocak 2020 0 Yazar: emrebalasar

Formların internet siteleri üstündeki etkisini ve kullanım yöntemlerini anlayabilmek için öncelikle statik ve dinamik siteler arasındaki farkı iyi kavramak gerekir. O zaman öncelikle kısaca statik ve dinamik site kavramlarına bir bakalım.

FORM İŞLEMLERİ

Genel bir bakış açısıyla web siteleri iki kategoride incelenebilir. Bunlar, durağan ve etkileşimli web siteleridir. Durağan, diğer bir ifade ile statik web siteleri web sayfalarının hazırlandıktan sonra hiçbir değişime uğramayan ve sadece tek taraflı bilgi akışının olduğu sayfalardır. Bilgi, web sayfası sunucusundan sayfayı ziyaret eden internet tarayıcısına, diğer bir ifade ile istemciye doğrudur. Site tamamen siteyi oluşturan kişi tarafından düzenlenebilir.

Durağan web sitelerinde veri akışı
Durağan web sitelerinde veri akışı

İkinci web sitesi çeşidi ise, günümüzde yaygın olarak kullanılan dinamik (etkileşimli) web siteleridir. Dinamik sitelerde kullanıcı etkileşimi ön plandadır. Web sayfalarına yeni içerikler eklenebilir, var olanlar güncellenebilir ya da silinebilir. Dinamik web sitelerinde, bilgi, web sayfası sunucusundan sayfayı ziyaret eden tarayıcıya olabileceği gibi tarayıcıdan web sayfası sunucusuna doğru da olabilir.

Dinamik web sitelerinde veri akışı
Dinamik web sitelerinde veri akışı

Dinamik bir web sitesi, her kullanıcı için ya da her ziyarette özel olarak oluşturulabilir. Dünya üzerindeki her kullanıcı, bir siteye kendi kullanıcı adıyla girdiğinde diğer kullanıcılardan farklı bir içeriğe erişebilir. Bu farklı içerik, web sitesinin renkleri, teması, müzikleri, sitedeki yetki derecesi vb. şeklinde olabilir. Günümüz internetindeki popüler siteler dinamik sitelerdir.

Dinamik web sitelerini hazırlamada en çok kullanılan yapı formlardır. HTML formları çeşitli kontrolleri içeren ve ziyaretçi tarafından değiştirilebilen yapılardır. Formların içerdiği kontrol yapıları şunlardır;

  • buttonlar (button, submit, reset)
  • checkbox
  • radio
  • text
  • hidden
  • password
  • textarea
  • select
  • option
  • file
  • image

Form Oluşturma

Bir HTML formu <form> etiketi ile başlar ve </form> etiketi ile sonlanır. Bu etiketler arasına yerleştirilen kontrol yapılarıyla formumuzu oluşturmuş oluruz. HTML formları çeşitli görevleri yerine getirmek için kullanılabilir. Örneğin anketler, yorum bölümleri, kullanıcı üyelik bölümleri, forumlar, sosyal paylaşım sitelerindeki video paylaşımı, resim paylaşımı ya da paylaşılanların beğenilmesi, derecelendirilmesi vb. </form> etiketinin üç temel özelliği form oluşturmak için önemlidir

  • action: Formdaki bilgilerin gönderileceği url adresi.
  • method: Bilginin gönderilme yöntemi.POST yada GET yöntemlerine sahiptir. Değer atanmadığı durumlarda GET yöntemi kullanılır. İleri konularda kullanımlarına değinilecektir.
  • name: Formun ismidir. Bu özelliğe değer verirken PHP’nin değişken kurallarına uymak gerekir.
<form action= "url_adresi" method= "get name’’= "form_ismi"></form> 

Form etiketi bir formun oluşabilmesi için önemlidir fakat form kontrol yapıları olmadan anlamlı bir form oluşturmuş olmayız. Yukarıdaki örneği inceleyebilirsiniz.

Form Kontrol Yapılarını Kullanma

HTML formlarının etkin bir şekilde kullanılması kontrol yapıları ile mümkündür. Kontrol yapıları sayesinde amaca uygun formlar oluşturulabilir ve internet kullanıcılarının kullanımına sunulabilir. Kontrol yapıları sahip oldukları çeşitlilikle kullanıcıların kolay ve anlaşılabilir bir şekilde formları kullanmalarını sağlamaktadır.

Formlarda kullanılan kontrol yapıları oluşturulurken her kontrolün sahip olduğu “name” özelliği vardır. Name özelliği formlardan gelen bilgi elde edilirken kullanılmaktadır. Form kontrol yapıları aşağıda kullanımları ile listelenmiştir.

<input> Kullanımı

Genel amaçlı bir form etiketidir. Sonlandırıcı etiketi yoktur. Girdi türü type öğesinde belirtilerek farklı girdilerin alınmasını sağlar.

Girilecek KodGörevi
type = “eleman türü”Eleman türü belirtilir. text, password, checkbox, radio, submit, reset, file, hidden, image, button değerlerinden biri kullanılır. Etiketin bu değerlerle nasıl kullanıldığı aşağıda örneklerle açıklanmaya çalışılacaktır.
name = “isim”Girilen verinin hangi değişken ismi altında değerlendirileceğini belirtmek için kullanılır. Mutlaka belirtilmelidir.
value = “değer”“radio” ve “checkbox” dışında bu parametrenin kullanımı isteğe bağlıdır. Belirtilecek “değer”, eleman türüne göre değişir. Etiketin varsayılan değeri olarak kullanılır.
size = “değer”“text” ve “password” elemanlarında karakter sayısını, diğerlerinde ise piksel cinsinden genişliği belirtmek için kullanılır.
maxlength = “değer”“text” ve “password” elemanlarında girilebilecek en çok karakter sayısını belirtmek için kullanılır. Ön tanımlı değeri sınırsızdır.
checked = “değer”Sadece “radio” ve “checkbox” elemanlarında seçili eleman “olarak belirtmek için kullanılır. Diğerlerinde yok sayılır.
src = “dosya ismi”“image” elemanında resim dosyasını belirtmek için kullanılır.
alt = “metin”Fare eleman üzerindeyken balon içinde görünecek açıklama metni için kullanılır.
align = “left|center|right”Elemanın form üzerinde nasıl konumlanacağını belirtmek için kullanılır.
readonlyVeri girme amacıyla kullanılmayacak elemanlar içindir.
disabledVeri girişi engellenecek elemanlar içindir.

Tablo 1 etiketi yardımcı kodları

Örnek Form
Örnek

<textarea> Kullanımı

Formumuza uzun metinler yazmak için kullanılmaktadır. Örneğin adres bilgisi ya da yorum girişi için kullanılabilecek bir form elemanıdır.

<textarea rows="5" cols="20" name="adres"></textarea>

Textarea yukarıda gördüğünüz örnekte olduğu gibi kullanılır. Rows, satır sayısını belirtir cols ise sütün sayısını belirtir.

<select> ve <option> Kullanımı

Formlarımızda seçim kutuları oluşturmak için kullanılan yapılardır. Örneğin bir şehir seçimi için kullanılabilir. <select> ve <option> kullanılırken “name” özelliğinin <select> etiketi içerisinde “value” özelliğinin ise <option> içerisinde kullanılması gerekmektedir.

<select name="sehir">
<option value="Ankara">Ankara</option>
<option value="İstanbul">İstanbul </option>
<option value="Samsun">Samsun</option>
</select>

İşletmelerde Beceri Eğitim kategorisine buradan! gidebilirsiniz. Daha fazlası için W3schools’dan yardım alabilirsiniz.