Form Tasarımı ve Veri İletimi

Siteler arasında gezinerek vakit geçirmek anlamına gelen WEB’de sörf tanımı da WEB 1.0 ile ortaya çıkan bir kavramdı. WEB 2.0, İnternet kullanıcılarının WEB sayfalarına bilgi girebildikleri yeni teknolojilerin ortaya çıkmasıyla anılmaya başlandı. Bu durum sosyal ağlar, yeni alışveriş, eğitim ve akla gelebilecek diğer sitelerin ortaya çıkmasını sağladı.

Formlar genelde kullanıcıların veri girdiği ya da seçim yaptığı alanlar ile bu bilgileri sunucuya gönderen düğmelerden oluşan bir bütündür.

Kutucuklara girilen bilgiler Gönder düğmesiyle sunucuya gönderilmektedir.

Form verilerinin sunucuda nereye gönderileceğini belirtir.

Form verilerinin hangi karakter kodlamasını kabul edeceğini belirtir. 

Form verileri sunucuya gönderildikten sonra cevabın hangi sayfada (Boş, açık olan, ana sayfa ya da en üstteki WEB sayfası) görüntüleneceğini belirtir.

Form elemanları genellikle <form>…</form> etiketleri arasında kalan alana girilen, kullanıcının veri girişi ya da seçim yaptığı birimlerdir.

Input elemanı genellikle <form> etiketi içinde kullanılır ve birçok formatta veri girebilmesini sağlar. Veri girişi tipi type komutuyla belirlenir ve kapama etiketi kullanılmadan özellikler eklenir.

Type = “password” kullanılır. Bu alana girilen karakterler güvenlik amacıyla ekranda * ya da  gibi sembollerle gizlenir. Forma ait bir gönder düğmesi var ise, gönder düğmesine basıldığında şifre, sifre isimli değişken olarak sunucuya gönderilmektedir.

Type = “tel” kullanılır. Tel elemanına autocomplete, list, maxlength, name, pattern, placeholder, readonly, required, size ve value özellikleri verilebilir. Telefon numarasının belirli bir şekilde girilmesi isteniyorsa kullanıcıya bilgi verebilmek için <input type=”tel” name=”telno” placeholder=”0 5XX XXX XX XX”> şeklinde düzenlenebilir. Burada telefon numarasının Türkiye’deki numaralandırma biçimi gösterilmiştir.

Type = “date” kullanılır. Date elemanına autocomplete, list, max, min, name, readonly, required, step ve value özellikleri verilebilir. Örneğin tarih alanına  1 Ocak 2000 tarihinden önceki tarihlerin girilmemesi isteniyorsa <input type=”date” name=”dogumgunu” min=”2000-0101”> şeklinde min özelliği kullanılabilir.

Type = “url” kullanılır. Gönder düğmesine basıldığında bu alana girilen WEB adresi, sayfa isimli değişken ile sunucuya gönderilmektedir. Url elemanı, girilen metinde http:// belirtecini kontrol eder. Alana girilen karakterlerde http:// belirteci yoksa tarayıcı uyarısını verir. Url elemanına autocomplete, list, maxlenght, name, pattern, readonly, required, size, ve value özellikleri tanımlanabilir.

Reset genel olarak çok fazla veri girilmesi gereken formlarda önceden girilmiş verilerin tarayıcı üstünde silinmesi için kullanılır. Başka bir deyişle form elemanlarına veri girilmişse, form elemanlarını sayfa yüklendiğindeki değerlerine döndürür. Ancak submit gibi düğmelerle veriler sunucuya gönderilmediği sürece, bilgiler sadece tarayıcı üstünde ilk değerlerine döner.

File, kullanıcının tarayıcıda dosya/dosyalar seçebilmesi için kullanılır. Seçim yapıldıktan sonra forma ait submit düğmesiyle dosya sunucuya gönderilebilir.

Color kullanıcının bir renk seçebilmesi için kullanılır. Seçilen renk, rengin sayısal ifadesi olarak sunucuya gönderilir. Color elemanına autocomplete, list, name ve value özellikleri verilebilir. Örneğin resimde gönderilen renk seçim düğmesinin renginin kırmızı olması isteniyorsa <input type=”color” name=”pastarengi” value=”#ff0000”> şeklinde value özelliği kullanılabilir.

Range (Aralıklı Kaydırma) kullanılır. Kullanıcının sayı değeri belirleyebilmesi için bir kaydırma çubuğu oluşturur. Belirlenen değer bir form verisi olarak sunucuya gönderilir.

Number (Sayı) kullanılır. Kullanıcının değer belirleyebilmesi ya da girebilmesi için bir sayı alanı oluşturur. Bu alan içinde yukarı ve aşağı oklar bulunur. Böylelikle kullanıcı girdiği ya da sayfada beliren değeri yukarı veya aşağı değiştirebilir. Belirlenen değer bir form verisi olarak sunucuya gönderilir.

Kullanıcının arama yapabileceği bir alan oluşturur. Aslında bu eleman İnternet üzerinden ya da diğer aramalar için gerekli özelliklere sahip değildir. Mevcut hâliyle yapabildiği tek şey, alana girilen değeri bir arama değeri olarak sunucuya göndermek, kulanıcı bilgisayarında gerekli WEB programlama dilleriyle çeşitli aramalar yaptırmaktır. Ayrıca x simgesiyle arama satırındaki mevcut değeri siler.

<form action="arama.asp">
Ara: <br>
<input type="search" name="aramayap">
<input type="submit">
</form>

Button elemanının type özelliği, oluşturulacak olan düğmenin türünü belirlemektedir.

Fieldset form elemanlarını görsel açıdan gruplamak için kullanılır. Fieldset içindeki elemanlar bir kutu içinde gözükürler. Legend ise gruplara başlık vermek için kullanılır.