Adobe Dreamweaver kendi görüşüme göre en iyi görsel web editörlerinden biri. Özellikle Cs serisinde eklenen yeni kontrol ve özelliklerle tasarımcıların işini büyük oranda kolaylaştırıyor. Bünyesine katılan Spry Js kütüphanesi sayesinde menü, navigasyon ve belli başlı web elementlerinin kontrolü oldukça basit bir şekilde yapılabiliyor. Bu makalemizde çok basit ve hızlı bir şekilde form alanlarının kontrolünü anlatacağız.

Form alanlarında biz aksini belirtmedikçe tüm alanların doldurulmasına gerek yoktur. Bu nedenle tasarımda formlar her zaman üzerinde iki kere düşünülmesi gereken elemanlardır. Formda istenilen bir değerin girilmemesi durumunda verilecek olan bir uyarı kullanıcı/ziyaretçiyi bilgilendirir ve buna göre hareket etmesi sağlanır. Bilgi girişinin sağlandığı bu elemanlar bu yüzden her zaman suistimale açıktırlar. Adobe Dreamweaver CS4 kullanarak önce basit bir form yapacağız ve sonra bu formda boş bırakılan yerlerde bir uyarı mesajının görünmesini sağlayacağız. Dilerseniz hemen başlayalım.

Öncelikle Dreamweaver’da boş bir Html dosya açalım. Sonra bir form oluşturalım. Bu formda kullanıcıdan adını ve e-posta adresini yazmasını isteyelim. 2 tane metin girdi elemanı ekleyelim. Sonrasında form menüsünden gönderme butonumuzu koyarak formumuzu tamamlayalım.

Hemen hemen aşağıdaki gibi bir form alanına sahip olmamız gerekiyor.

Şimdi fare ile formumuzun Ad soyad isteyen İnput bölümüne bir kere tıklayıp seçili hale getiriyoruz. Bu aşamadan sonra üst menüden Spry bölümüne geliyoruz. Burada Spry Validation Text Field butonuna tıklıyoruz. Böylece metin girdi alanımızda Spry js kullanarak bir form kontrolü sağlamış olduk. Aynı işlemi e-posta adresini istediğimiz metin girdi alanı için de yapalım.

Dokümanı .html uzantılı olarak kaydedelim ve tarayıcımızda izleyelim. Ad soyad veya e-posta alanlarından birini boş bırakıp formu onaylamaya çalıştığınızda form ögesinin yanında “A value is required” mesajı alacağız.

Dikkat ettiyseniz forma Text validation opsiyonunu eklediğimizde SpryValidationTextField.js ve SpryValitadionTextField.css isimli iki dosya da oluşuyor. Formun kontrolünü sağlayan ana js dosyası ve stilleri barındıran stil dosyası da çalışmamızın olduğu dizinde kayıt oluyor.

Stil dosyasında yapacağınız değişikliklerle uyarı mesajının daha iyi görünmesini sağlayabilir ve görünümünü özelleştirebilirsiniz. Sadece metin girdi alanlarında değil Textarea, Radio buton gibi diğer form ögelerinde de aynı kontrolü sağlayabilirsiniz. Umarım yararlı olur.

Rastgele Yazılar