Not:

Dreamweaver Creative Cloud güncelleştirmelerinde HTML form öğeleri desteği geliştirilmiştir. Bilgi için bkz. Form öğeleri için geliştirilmiş HTML5 desteği.

Web formları hakkında

Bir ziyaretçi web tarayıcısında görüntülediği bir web formuna bilgi girip gönder düğmesini tıkladığında, bilgiler sunucu tarafı komut dosyası veya uygulaması tarafından işleneceği sunucuya gönderilir. Sunucu, işlenen bilgileri kullanıcıya (veya istemciye) geri göndererek veya formun içeriğine dayalı başka bir eylem gerçekleştirerek yanıt verir.

Çoğu uygulama sunucusuna veri gönderen PHP, ASP ve ColdFusion gibi formlar oluşturabilirsiniz. ColdFusion'ı kullanırsanız formlarınıza ColdFusion'a özgü form kontrolleri de ekleyebilirsiniz.

Not:

Ayrıca formu verilerini doğrudan bir e-posta alıcısına da gönderebilirsiniz.

Form nesneleri

Dreamweaver'da girdi türlerine form nesneleri denir. Form nesneleri kullanıcıların veri girmesine olanak tanıyan mekanizmalardır. Forma aşağıdaki form nesnelerini ekleyebilirsiniz:

Metin alanları

Her türde alfasayısal metin girişini kabul eder. Metin tek satır, birden çok satır veya girilen metnin yıldızlar veya metni görüntüleyenlerden gizlemek için metnin yıldız işaretleri veya madde işaretleri ile değiştirildiği bir şifre alanı olarak görüntülenebilir.

Form nesneleri

Not:

Şifre alanı kullanılarak sunucuya gönderilen şifreler ve diğer bilgiler şifrelenmez. Aktarılan bilgiler elde edilebilir ve alfasayısal metin olarak okunabilir. Bu nedenle güvenli tutmak istediğiniz veriler için her zaman şifreleme sağlamanız gerekir.

Gizli alanlar

Kullanıcı tarafından girilen ad, e-posta adresi veya görüntüleme tercihi gibi bilgileri depolar ve daha sonra kullanıcı siteyi tekrar ziyaret ettiğinde bu verileri kullanır.

Düğmeler

Tıklatıldığında eylemler gerçekleştirir. Düğme için özel ad veya etiket ekleyebilir veya önceden tanımlanmış “Gönder” veya “Sıfırla” etiketlerinden birini kullanabilirsiniz. Sunucuya form verileri göndermek veya sunucuyu sıfırlamak için bir düğme kullanın. Ayrıca komut dosyasında tanımladığınız başka işleme görevlerini de atayabilirsiniz. Örneğin, düğme atanan değerlere göre seçilen öğelerin toplam maliyetini hesaplayabilir.

Onay kutuları

Tek bir seçenek grubu içinde birden çok yanıta olanak tanır. Kullanıcı geçerli olan sayıda seçenek belirleyebilir. Aşağıdaki örnekte üç onay kutusu öğesi gösterilmektedir: Sörf, Dağ Bisikleti ve Rafting.

Onay kutuları

Radyo düğmeleri

Hariç tutulan seçimleri temsil eder. Radyo düğmesi grubundaki bir düğmenin seçilmesi gruptaki (grup, aynı adı taşıyan iki veya daha çok düğmeden oluşur) diğer tüm düğmelerin seçimini kaldırır. Aşağıdaki örnekte Rafting seçili olan seçenektir. Kullanıcı Sörf seçeneğini tıklatırsa, Rafting düğmesi otomatik olarak temizlenir.

Radyo düğmeleri

Liste menüleri

Kullanıcıların birden çok seçenek belirlemesine olanak tanıyan kaydırma listesinin içindeki seçenek değerlerini görüntüler. Liste seçeneği kullanıcıların sadece tek öğe seçebilmesini sağlayan bir menüde seçenek değerlerini görüntüler. Sınırlı alanınız olduğunda ancak birden çok öğeyi mutlaka görüntülemeniz gerektiğinde veya sunucuya döndürülen değerleri denetlemek için menüleri kullanın. Kullanıcıların geçersiz veriler dahil istedikleri her şeyi yazabildikleri menülerin aksine, menü tarafından döndürülen kesin değerleri ayarlarsınız.

Not:

HTML formundaki bir açılır menü grafik açılır menü ile aynı değildir. Grafik açılır menü oluşturma, düzenleme ve gösterme ya da gizleme hakkında daha fazla bilgi için bu bölümün sonundaki bağlantıya bakın.

Atla menüleri

İçinde her seçeneğin bir belge veya dosyaya bağlandığı bir menü eklemenize olanak tanıyan gezinme listeleri veya açılır menülerdir.

Dosya alanları

Kullanıcıların bilgisayarlarındaki bir dosyaya gözatıp dosyayı form verisi olarak yükleyebilmelerini sağlar.

Görüntü dosyaları

Forma görüntü ekleyebilmenizi sağlar. Görüntü alanlarını Gönder veya Sıfırla düğmeleri gibi grafik düğmeleri oluşturmak için kullanın. Görüntüyü veri gönderme dışında işler gerçekleştirmek üzere kullanmak için form nesnesine davranış eklenmesi gerekir.

HTML formu oluşturma

(Yalnızca Creative Cloud kullanıcıları): HTML5 desteğinin bir parçası olarak, Özellikler panelinde form öğeleri için yeni nitelikler kullanıma sunuldu. Ayrıca, Ekle panelinin Formlar bölümünde dört yeni form öğesi (E-posta, arama, telefon, URL) kullanıma sunuldu. Daha fazla bilgi için bkz. Form öğeleri için geliştirilmiş HTML5 desteği.

  1. Sayfa açın ve ekleme noktasını formun görünmesini istediğiniz yere yerleştirin.
  2. Ekle > Form seçeneğini belirleyin veya Ekle panelindeki Formlar kategorisini seçin ve Form simgesini tıklatın.

    Tasarım görünümünde formlar noktalı kırmızı anahat ile gösterilir. Bu anahattı görmüyorsanız, Görünüm > Görsel Yardımcılar > Görünmez Öğeler'i seçin.

  3. HTML formunun özelliklerini Özellik denetiminde (Pencere > Özellikler) ayarlayın:

    a.Belge penceresinde formu seçmek için form ana hattını tıklatın.

    b.Form Adı kutusunda formu tanımlamak için benzersiz bir ad girin.

    Formun adlandırılması, formun JavaScript veya VBScript gibi bir komut dosyası oluşturma dili ile referans gösterilmesini veya denetlenmesini mümkün kılar. Formu adlandırmazsanız, Dreamweaver formn sözdizimini kullanarak bir ad oluşturur ve sayfaya eklenen her form için n değerini artırır.

    c.Eylem kutusunda yolu yazarak veya uygun sayfa ya da komut dosyasına gitmek için klasör simgesini tıklatarak, form verilerini işleyecek sayfayı veya komut dosyasını belirtin. Örnek: processorder.php.

    d.Yöntem açılır menüsünde form verilerini sunucuya gönderme yöntemini belirtin.

    Aşağıdaki seçeneklerden birini belirleyin:

    Varsayılan Form verilerini sunucuya göndermek için tarayıcının varsayılan ayarını kullanır. Genellikle varsayılan değer GET yöntemidir.

    GET Değeri sayfayı isteyen URL'ye ekler.

    POST Form verilerini HTTP isteğine gömer.

    Uzun formlar göndermek için GET yöntemini kullanmayın. URL'ler 8192 karakterle sınırlanmıştır. Gönderilecek veri miktarı çok büyükse veriler kesilir ve bu durum beklenmeyen veya başarısız işleme sonuçlarına neden olabilir.

    GET yöntemi ile iletilen parametreler tarafından oluşturulan dinamik sayfalar, sayfayı yeniden oluşturmak için gerekli tüm değerler tarayıcının Adres kutusunda görüntülenen URL'de bulunduğundan, yer imi olarak işaretlenebilir. Bunun aksine, POST yöntemi ile iletilen parametreler tarafından oluşturulan dinamik sayfalar yer imi olarak işaretlenemez.

    Gizli kullanıcı adları ve şifreleri, kredi kartı numaraları veya diğer gizli bilgileri topluyorsanız, POST yöntemi GET yöntemine göre daha güvenli görünebilir. Ancak, POST yöntemi ile gönderilen bilgiler şifrelenmez veya bilgisayar korsanları tarafından kolayca elde edilebilir. Güvenliği sağlamak için güvenli bir sunucuya güvenli bir bağlantı kullanın.

     

    e.(İsteğe Bağlı) Şifre Türü açılır menüsünde işlenmek üzere sunucuya gönderilen verilerin MIME kodlama türünü belirtin.

    Varsayılan application/x-www-form-urlencode ayarı genellikle POST yöntemi ile birlikte kullanılır. Dosya yükleme alanı oluşturuyorsanız multipart/form‑data MIME türünü kullanın.

     

    f.(İsteğe Bağlı) Hedef açılır menüsünde çağrılan program tarafından döndürülen verilerin görüntüleneceği pencereyi belirtin.

    Adı verilen pencere zaten açık değilse, o adla yeni bir pencere açılır. Aşağıdaki hedef değerlerden herhangi birini ayarlayın:

    _blank Hedef belgeyi yeni bir adlandırılmamış pencerede açar.

    _parent Hedef belgeyi geçerli belgeyi görüntülenen pencerenin ana penceresinde açar.

    _self Hedef belgeyi, formun gönderildiği pencerede açar.

    _top Hedef belgeyi geçerli pencerenin gövdesinde açar. Bu değer, orijinal belge bir çerçevede görüntülenmiş olsa bile hedef belgenin tam pencereyi kaplamasını sağlamak için kullanılır.

  4. Sayfaya form nesneleri ekle:

    a.Ekleme noktasını form nesnesinin formda görünmesi gereken yere ekleyin.

    b. Ekle > Form menüsünde veya Ekle panelinin Formlar kategorisinde nesneyi seçin.

    c.Girdi Etiketi Erişilebilirlik Nitelikleri iletişim kutusunu tamamlayın. Daha fazla bilgi için, iletişim kutusundaki Yardım düğmesini tıklatın.

    Not:

    Girdi Etiketi Erişilebilirlik Nitelikleri iletişim kutusunu görmüyorsanız, biçim nesnesini eklemeye çalışırken Ekleme noktasını Kod görünümünde denemiş olabilirsiniz. Ekleme noktasının tasarım görünümünde olduğundan emin olun ve tekrar deneyin. Bu konu hakkında daha fazla bilgi için, David Powers'ın Dreamweaver'da HTML formları oluşturma makalesine bakın.

    d.Nesnelerin özelliklerini ayarlayın.

    e.Nesne için Özellik denetiminde bir ad girin.

    Her metin alanı, gizli alan, onay kutusu ve liste/menü nesnesinin formdaki nesneyi tanımlayan benzersiz bir adı olmalıdır. Form nesnesi adları boşluk veya özel karakter içeremez. İstediğiniz alfasayısal karakter ve alt çizgi (_) birleşimini kullanabilirsiniz. Nesneye atadığınız etiket alanın değerini (girilen veri) depolayan değişken adıdır. Bu, işlenmek için sunucuya gönderilen değerdir.

    Not:

    Gruptaki tüm radyo düğmeleri aynı ada sahip olmalıdır.

    f.Sayfadaki metin alanını, onay kutusunu veya radyo düğmesini etiketlemek için nesnenin yanını tıklatın ve etiketi yazın.

  5. Formun mizanpajını ayarlayın.

    Formlarınızı formatlamak için satır kesmeleri, paragraf kesmeleri, önceden formatlanmış metin veya tablolar kullanın. Başka bir forma form ekleyemezsiniz (diğer bir deyişle, etiketleri çakıştıramazsınız), ancak sayfaya birden çok form ekleyebilirsiniz.

    Formlar tasarlarken kullanıcıların neye yanıt verdiklerini bilmelerini sağlamak için form alanlarını etiketlemeyi unutmayın. Örneğin, ad bilgileri istemek için "Adınızı yazın" etiketini kullanın.

    Form nesneleri ve etiket alanları için yapı sağlamak üzere tablolar kullanın. Formlarda tablolar kullanırken tüm tablo etiketlerinin form etiketleri arasına dahil edildiğinden emin olun.

Form oluşturma hakkında bir eğitim için bkz. www.adobe.com/go/vid0160_tr.

Formları CSS ile stilize etme hakkında bir eğitim için bkz. www.adobe.com/go/vid0161_tr.

Metin Alanı nesne özellikleri

Metin alanı nesnesini seçin ve özellik denetiminde aşağıdaki seçeneklerden birini ayarlayın:

Karakter Genişliği

Alanda görüntülenebilecek maksimum karakter sayısını belirtir. Bu sayı, alana girilebilen maksimum karakter sayısını belirten Maks. Karakter'den az olabilir. Örneğin, Karakter Genişliği 20 (varsayılan değer) olarak ayarlanmışsa ve kullanıcı 100 karakter girerse, metin alanında o karakterlerin sadece 20'si görülür. Alandaki karakterleri görememenize rağmen, bunlar alan nesnesi tarafından tanınır ve işlenmek üzere sunucuya gönderilir.

Maks. Karakter

Tek satırlı metin alanları için kullanıcının girebileceği maksimum karakter sayısını belirtir. Posta kodlarını 5 basamakla sınırlamak, şifreleri 10 karakterle sınırlamak vs. için Maks. Karakter özelliğini kullanın. Maks. Karakter kutusunu boş bırakırsanız kullanıcılar istedikleri metin miktarını girebilir. Metin alanın genişliğini aşarsa, metin kayar. Kullanıcı maksimum karakter sayısını aşarsa form bir uyarı sesi verir.

Sayı Satırları

(Çok Satırlı seçeneği belirlendiğinde kullanılabilir) Çok satırlı metin alanları için alanın yüksekliğini ayarlar.

Devre Dışı

Metin alanını devre dışı bırakır.

Salt okunur

Metin alanını, salt okunur bir metin alanı haline getirir.

Tür

Alanı tek satırlı, çok satırlı veya şifre alanı olarak atar.

Tek satırlı

Girdi etiketinde sonuçlanır ve tür niteliği metin olarak ayarlanır. Karakter Genişliği ayarı boyut niteliği ile eşlenir ve Maks. Karakter ayarı maksuzunluk niteliği ile eşlenir.

Çok satırlı

Metinalanı etiketi ile sonuçlanır. Karakter Genişliği ayarı sütunlar niteliği ile eşlenir ve Sayı Satırları ayarı satırlar niteliği ile eşlenir.

Şifre

Girdi etiketinde sonuçlanır ve tür niteliği şifre olarak ayarlanır. Karakter Genişliği ve Maks. Karakter ayarları, tek satırlı metin alanları ile aynı niteliklerle eşlenir. Kullanıcı şifre metin alanına yazı yazdığında girdi diğer kullanıcıların görmesini önlemek için madde işareti veya yıldız işareti olarak görünür.

Bşlngç değeri

Form ilk kez yüklendiğinde alanda görüntülenen değeri atar. Örneğin, bir not veya örnek değer ekleyerek kullanıcının alana bilgi girdiğini belirtebilirsiniz.

Sınıf

Nesneye CSS kurallarını uygulayabilmenizi sağlar.

Düğme nesnesi seçenekleri

Düğme Adı

Düğmeye bir ad atar. İki ayrılmış ad olan Gönder ve Sıfırla, forma sırasıyla form verilerini işleyen uygulama veya komut dosyasına göndermesini veya tüm form alanlarını ilk değerlerine sıfırlamasını bildirir.

Değer

Düğmede görünen metni belirler.

Eylem

Düğme tıklatıldığında ne olacağını belirler.

Formu Gönder

Kullanıcı düğmeyi tıklattığında form verilerini işlenmek üzere gönderir. Veriler sayfaya gönderilir veya formun Eylem özelliğinde komut dosyası belirtilir.

Formu Sıfırla

Düğme tıklatıldığında formun içeriği temizlenir.

Yok

Düğme tıklatıldığında gerçekleştirilecek eylemi belirtmek için seçenek. Örneğin, kullanıcı düğmeyi tıklattığında başka bir sayfayı açan bir JavaScript davranışı ekleyebilirsiniz.

Sınıf

Nesneye CSS kurallarını uygular.

Onay Kutusu nesne seçenekleri

Denetlenen Değer

Onay kutusu işaretlendiğinde sunucuya gönderilecek değeri ayarlar. Örneğin, bir ankette kesinlikle katılıyorum seçeneği için 4 değerini, kesinlikle katılmıyorum seçeneği içinse 1 değerini ayarlayabilirsiniz.

İlk Durum

Form tarayıcıya yüklendiğinde onay kutusunun seçilip seçilmediğini belirler.

Dinamik

Sunucunun onay kutusunun durumunu dinamik olarak belirleyebilmesini sağlar. Örneğin, veritabanı kaydında depolanan Evet/Hayır bilgilerini görsel olarak sunmak için onay kutularını kullanabilirsiniz. Tasarım sırasında bu bilgileri bilmezsiniz. Çalışma zamanında sunucu veritabanı kaydını okur ve değer Evet ise onay kutusunu işaretler.

Sınıf

Nesneye Basamaklı Stil Sayfaları (CSS) kurallarını uygular.

Tek radyo düğmesi nesne seçenekleri

Denetlenen Değer

Radyo düğmesi seçildiğinde sunucuya gönderilecek değeri ayarlar. Örneğin, bir kullanıcının kayak seçeneğini belirlediğini göstermek için İşaretlenen Değer kutusuna kayak yazabilirsiniz.

İlk Durum

Form tarayıcıya yüklendiğinde radyo kutusunun seçilip seçilmediğini belirler.

Dinamik

Sunucunun radyo düğmesinin durumunu dinamik olarak belirleyebilmesini sağlar. Örneğin, veritabanı kaydında depolanan bilgileri görsel olarak sunmak için radyo düğmelerini kullanabilirsiniz. Tasarım sırasında bu bilgileri bilmezsiniz. Çalışma zamanında sunucu veritabanı kaydını okur ve radyo düğmesindeki değerin belirlediğiniz değerle eşleşip eşleşmediğini denetler.

Sınıf

Nesneye CSS kurallarını uygular.

Liste/Menü

Menüye bir ad atar. Ad benzersiz olmalıdır.

Tür

Menünün tıklatıldığında aşağıya mı açıldığını (Menü seçeneği) yoksa kaydırılabilen bir öğe listesi mi görüntülediğini (Liste seçeneği) belirtir. Form tarayıcıda görüntülendiğinde sadece bir seçeneğin görüntülenmesini istiyorsanız Menü seçeneğini belirleyin. Diğer seçenekleri görüntülemek için kullanıcı aşağı oku tıklatmalıdır.

Kullanıcıların birden çok öğe seçebilmelerini sağlamak için form tarayıcıda görüntülendiğinde seçeneklerin bazılarını veya tümünü listelemek için Liste seçeneğini belirleyin.

Yükseklik

(Sadece Liste türü) Menüde görüntülenen öğe sayısını ayarlar.

Seçimler

(Sadece Liste türü) Kullanıcının listeden birden çok öğe seçip seçemeyeceğini gösterir.

Liste Değerleri

Öğeleri form menüsüne ekleyebilmenizi sağlayan bir iletişim kutusu açar:

  1. Listedeki öğeleri eklemek ve kaldırmak için Artı (+) ve Eksi (–) düğmelerini kullanın.

  2. her menü öğesi için bir metin etiketi ve isteğe bağlı değer girin.

    Listedeki her öğe bir etikete (listede görünen metin) ve değere (öğe seçildiğinde işleyen uygulamaya gönderilen değer) sahiptir. Değer belirtilmezse bunun yerine işleyen uygulamasına etiket gönderilir.

  3. Listedeki öğeleri yeniden düzenlemek için yukarı ve aşağı ok düğmelerini kullanın.

    Öğeler listede Liste Değerleri iletişim kutusu ile aynı sırada görünür. Listedeki ilk öğe sayfa tarayıcıya yüklendiğinde seçilen öğedir.

Dinamik

Sunucunun menüde ilk kez görüntülenen bir öğeyi dinamik olarak seçebilmesini sağlar.

Sınıf

Nesneye CSS kurallarını uygulayabilmenizi sağlar.

Başlangıçta Seçili

Listede seçilen öğeleri varsayılan olarak ayarlar. Listedeki öğe veya öğeleri tıklatın.

Dosya yükleme alanları ekleme

Kullanıcıların bilgisayarlarındaki kelime işlemci belgesi veya grafik dosyası gibi bir dosyayı seçebilmelerini sağlayan ve dosyayı sunucuya yükleyen bir dosya yükleme alanı oluşturabilirsiniz. Dosya alanı, ayrıca Gözat düğmesi içermesi dışında diğer metin alanları gibi görünür. Kullanıcı yüklemek istediği dosyanın yolunu el ile girer veya dosyayı bulup seçmek için Gözat düğmesini kullanır.

Dosya yükleme alanlarını kullanabilmeniz için dosya gönderimlerini işleme yeteneğine sahip bir sunucu tarafı komut dosyası veya sayfasına sahip olmanız gerekir. Form verilerini işlemek için kullandığınız sunucu teknolojisinin belgelerine bakın. Örneğin, PHP kullanıyorsanız, http://us2.php.net/features.file-upload.php adresindeki çevrimiçi PHP kılavuzunda “Dosya yüklemelerini işleme” bölümüne bakın.

Dosya alanları, tarayıcıdan sunucuya dosya iletmek için POST yöntemini kullanmanızı gerektirir. Dosya formun Eylem kutusunda belirttiğiniz adrese gönderilir.

Not:

Dosya alanını kullanmadan önce, anonim dosya yüklemelerine izin verildiğini doğrulamak için sunucunuzun yöneticisine başvurun.

  1. Sayfaya form ekleme (Ekle > Form).
  2. Özellik denetimini görüntülemek için formu seçin.
  3. Form Yöntemini POST olarak ayarlayın.
  4. Şifre Türü açılır menüsünde multipart/form-data değerini seçin.
  5. Eylem kutusunda sunucu tarafı komut dosyasını veya yüklenen dosyayı işleme yeteneğine sahip sayfayı belirtin.
  6. Ekleme noktasını form ana hattının içine yerleştirin ve Ekle > Form > Dosya Alanı seçeneğini belirleyin.
  7. Özellik denetiminde aşağıdaki seçeneklerden birini ayarlayın:

    Dosya Alanı Adı

    Dosya alanı nesnesinin adını belirtir.

    Karakter Genişliği

    Alanda görüntülenebilecek maksimum karakter sayısını belirtir.

    Maks. Karakter

    Alanın tutabileceği maksimum karakter sayısını belirtir. Kullanıcı dosyayı bulmak için gözatarsa, dosya adı ve yolu belirtilen Maks karakter değerini aşabilir. Ancak, kullanıcı dosya adını ve yolu yazmayı denerse, dosya alanı sadece Maks. Karakter ile belirtilen karakter sayısına izin verir.

Görüntü düğmesi ekleme

Görüntüleri düğme simgeleri olarak kullanabilirsiniz. Görüntüyü veri gönderme dışında işler gerçekleştirmek üzere kullanmak için form nesnesine davranış eklenmesi gerekir.

  1. Belgede ekleme noktasını form ana hattının içine yerleştirin.
  2. Ekle > Form > Görüntü Alanı seçeneğini belirleyin.

    Görüntü Kaynağını Seç iletişim kutusu görünür.

  3. Görüntü Kaynağı Seç iletişim kutusundaki düğme için görüntüyü seçin ve Tamam'ı tıklatın.
  4. Özellik denetçisinde aşağıdaki seçeneklerden birini ayarlayın:

    Görüntü Alanı

    Düğmeye bir ad atar. İki ayrılmış ad olan Gönder ve Sıfırla, forma sırasıyla form verilerini işleyen uygulama veya komut dosyasına göndermesini veya tüm form alanlarını ilk değerlerine sıfırlamasını bildirir.

    Kaynak

    Düğme için kullanmak istediğiniz görüntüyü belirtir.

    Alt

    Görüntünün tarayıcıya yüklenememesi olasılığına karşı açıklayıcı metin girmenizi sağlar.

    Hizala

    Nesnenin hizalama niteliğini ayarlar.

    Görüntüyü Düzenle

    Varsayılan görüntü düzenleyicinizi başlatır ve görüntü dosyasını düzenlenmek üzere açar.

    Sınıf

    Nesneye CSS kurallarını uygulayabilmenizi sağlar.

  5. Düğmeye JavaScript davranışı eklemek için bir görüntü seçin ve ardından Davranışlar panelinde (Pencere > Davranışlar) davranışı seçin.

Gizli alan nesnesi seçenekleri

GizliAlan

Alanın adını belirtir.

Değer

Alana bir değer atar. Bu değer, form gönderildiğinde sunucuya iletilir

Radyo düğmeleri grubu ekleme

  1. Ekleme noktasını form ana hattının içine yerleştirin.
  2. Ekle > Form > Radyo Grubu seçeneğini belirleyin.

  3. İletişim kutusunu doldurun ve Tamam'ı tıklatın.

    a.Ad kutusunda radyo düğmesi grubunun adını girin.

     Radyo düğmelerini parametreleri sunucuya geri gönderecek şekilde ayarlarsanız, parametreler adla ilişkilendirilir. Örneğin, grubu myGroup olarak ayarlar ve form yöntemini GET olarak ayarlarsanız (diğer bir deyişle, kullanıcı gönder düğmesini tıklattığında formun form parametreleri yerine URL parametrelerini göndermesini istiyorsanız), URL'de sunucuya myGroup="CheckedValue" ifadesi gönderilir.

    b.Gruba radyo düğmesi eklemek için Artı (+) düğmesini tıklatın. Yeni düğme için bir etiket ve denetlenen değer girin.

    c.Düğmeleri yeniden sıralamak için yukarı veya aşağı oklarını tıklatın.

    d.Sayfa tarayıcıda açıldığında belirli bir radyo düğmesinin seçilmesini ayarlamak için Buna Eşit Değer Seç kutusuna radyo düğmesinin değerine eşit bir değer girin.

    Statik bir değer girin veya kutunun yanındaki şimşek simgesini tıklatıp olası denetlenen değerler içeren bir kayıt kümesi seçerek dinamik bir değer girin. Her iki koşulda da belirttiğiniz değerin, gruptaki radyo düğmelerinin denetlenen değeri ile eşleşmesi gerekir. Radyo düğmelerinin denetlenen değerlerini görüntülemek için her radyo düğmesini seçin ve düğmenin Özellik denetçisini (Pencere > Özellikler) açın.

    e.Dreamweaver'ın düğmeler için kullanmasını istediğiniz mizanpaj formatını seçin. Düğmelerin mizanpajını satır kesmeleri veya tablo kullanarak oluşturun. Tablo seçeneğini belirlerseniz, Dreamweaver tek sütunlu bir tablo seçer ve radyo düğmelerini sola ve etiketleri sağa yerleştirir.

    Ayrıca özellikleri Özellik denetçisinde veya doğrudan Kod görünümünde de ayarlayabilirsiniz.

Bir grup onay kutusu ekleme

  1. Ekleme noktasını form ana hattının içine yerleştirin.
  2. Ekle > Form > Onay Kutusu Grubu seçeneğini belirleyin.

  3. İletişim kutusunu doldurun ve Tamam'ı tıklatın.

    a.Ad kutusunda onay kutusu grubunun adını girin.

    Onay kutularını parametreleri sunucuya geri gönderecek şekilde ayarlarsanız, parametreler adla ilişkilendirilir. Örneğin, grubu myGroup olarak ayarlar ve form yöntemini GET olarak ayarlarsanız (diğer bir deyişle, kullanıcı gönder düğmesini tıklattığında formun form parametreleri yerine URL parametrelerini göndermesini istiyorsanız), URL'de sunucuya myGroup="CheckedValue" ifadesi gönderilir.

    b.Gruba bir onay kutusu eklemek için Artı (+) düğmesini tıklatın. Yeni onay kutusu için bir etiket ve denetlenen değer girin.

    c.Onay kutularını yeniden sıralamak için yukarı veya aşağı oklarını tıklatın.

    d.Sayfa tarayıcıda açıldığında belirli bir onay kutusunun seçilmesini ayarlamak için Buna Eşit Değer Seç kutusuna onay kutusunun değerine eşit bir değer girin.

    Statik bir değer girin veya kutunun yanındaki şimşek simgesini tıklatıp olası denetlenen değerler içeren bir kayıt kümesi seçerek dinamik bir değer girin. Her iki koşulda da belirttiğiniz değerin, gruptaki onay kutularının denetlenen değeri ile eşleşmesi gerekir. Onay kutularının denetlenen değerlerini görüntülemek için her onay kutusunu seçin ve kutunun Özellik denetimini (Pencere > Özellikler) açın.

    e.Dreamweaver'ın onay kutuları için kullanmasını istediğiniz mizanpaj formatını seçin.

    Onay kutularının mizanpajını satır kesmeleri veya tablo kullanarak oluşturun. Tablo seçeneğini belirlerseniz, Dreamweaver tek sütunlu bir tablo seçer ve onay kutularını sola ve etiketleri sağa yerleştirir.

    Ayrıca özellikleri Özellik denetiminde veya doğrudan Kod görünümünde de ayarlayabilirsiniz.

Dinamik form nesneleri oluşturma

Dinamik form nesnesi, ilk durumu tasarım sırasında form tasarımcısı tarafından değil, sayfa sunucudan istendiğinde sunucu tarafından belirlenen bir form nesnesidir. Örneğin, kullanıcı menüye sahip bir form içeren bir PHP sayfası istediğinde, sayfadaki bir PHP komut dosyası menüyü otomatik olarak veritabanında depolanan değerlerle doldurur. Sunucu daha sonra tamamlanan sayfayı kullanıcının tarayıcısına gönderir.

Form nesnelerini dinamik yapmak site bakımını kolaylaştırabilir. Örneğin, pek çok sitede kullanıcılara seçenek kümesi sunmak için menüler kullanılır. Menü dinamik olursa, sitedeki aynı menünün tüm örneklerini güncelleştirmek için menü öğelerini tek bir yerde (öğelerin depolandığı veritabanı tablosunda) ekleyebilir, kaldırabilir veya değiştirebilirsiniz.

Dinamik HTML form menüsü ekleme veya değiştirme

HTML form menüsünü veya liste menüsünü dinamik olarak veritabanı girişleriyle doldurabilirsiniz. Çoğu sayfa için HTML menü nesnesini kullanabilirsiniz.

Başlamadan önce ColdFusion, PHP veya ASP sayfasına bir HTML formu eklemeniz ve menü için kayıt kümesi veya başka bir dinamik içerik kaynağı tanımlamanız gerekir.

  1. Sayfanıza HTML Liste/Menü form nesnesi ekleyin:

        a.Sayfadaki HTML formunun içini tıklatın (Ekle > Form > Form).

        b.Form nesnesini eklemek için Ekle > Form > Liste/Menü'yü tıklatın.

  2. Aşağıdakilerden birini yapın:

    • Yeni veya varolan HTML Liste/Menü form nesnesini seçin ve ardından Özellik denetimindeki Dinamik düğmesini tıklatın.

    • Ekle > Veri Nesneleri > Dinamik Veri > Dinamik Seçim Listesi seçeneğini belirleyin.

  3. Dinamik Liste/Menü iletişim kutusunu doldurun ve Tamam'ı tıklatın.

      a.Kayıt Kümesinden Seçenekler açılır menüsünde içerik kaynağı olarak kullanılacak kayıt kümesini seçin. Ayrıca bu menüyü daha sonra hem statik hem de dinamik liste/menü öğelerini düzenlemek için kullanırsınız.

      b.Statik Seçenekler alanında listeye veya menüye varsayılan bir öğe girin. Bu seçeneği ayrıca dinamik içerik ekledikten sonra liste/menü nesnesindeki statik girişleri düzenlemek için de kullanın.

      c.(İsteğe Bağlı) Listedeki öğeleri eklemek ve kaldırmak için Artı (+) ve Eksi (–) düğmelerini kullanın. Öğeler İlk Liste Değerleri iletişim kutusu ile aynı sıraya sahiptir. Listedeki ilk öğe sayfa tarayıcıya yüklendiğinde seçilen öğedir. Listedeki öğeleri yeniden düzenlemek için yukarı ve aşağı ok düğmelerini kullanın.

      d.Değerler açılır menüsünde menü öğelerinin değerlerini içeren alanı seçin.

      e.Etiketler açılır menüsünde menü öğelerinin etiketlerini içeren alanı seçin.

      f.(İsteğe Bağlı) Sayfa tarayıcıda açıldığında veya kayıt formda görüntülendiğinde belirli bir menü öğesinin seçildiğini belirlemek için, menü öğesinin değerine eşit bir değeri Buna Eşit Değer Seç kutusuna girin.

        Statik bir değer girebilir veya kutunun yanındaki şimşek simgesini tıklatıp veri kaynakları listesinden dinamik bir değer seçerek dinamik bir değer belirtebilirsiniz. Her iki durumda da belirttiğiniz değer menü öğesi değerlerinden biriyle eşleşmelidir.

     

Varolan HTML form menülerini dinamik yapma

  1. Tasarım görünümünde liste/menü form nesnesini seçin.
  2. Özellik denetiminde Dinamik düğmesini tıklatın.
  3. İletişim kutusunu doldurun ve Tamam'ı tıklatın.

HTML metin alanlarında dinamik içerik görüntüleme

Form tarayıcıda görüntülendiğinde HTML metin alanlarında dinamik içerik görüntüleyebilirsiniz.

Başlamadan önce ColdFusion, PHP veya ASP sayfasında formu oluşturmanız ve metin alanı için kayıt kümesi veya başka bir dinamik içerik kaynağı tanımlamanız gerekir.

  1. Sayfanızdaki HTML formunda metin alanını oluşturun.
  2. Özellik denetiminde Dinamik Veri iletişim kutusunu görüntülemek için İlk Değer kutusunun yanındaki şimşek simgesini tıklatın.
  3. Metin alanına değer sağlayacak olan kayıt kümesi sütununu seçin ve Tamam'ı tıklatın.

Dinamik Metin Alanı iletişim kutusu seçeneklerini ayarlama

  1. Metin alanını Metin Alanı açılır menüsünden dinamik yapmak için ayarlayın.
  2. Değeri Buna Ayarla kutusunun yanındaki şimşek simgesini tıklatın, veri kaynakları listesinden bir veri kaynağı seçin ve Tamam'ı tıklatın.

    Veri kaynağı metin bilgileri içermelidir. Listede veri kaynağı görünmüyorsa veya kullanılabilen veri kaynakları gereksinimlerinizi karşılamıyorsa, yeni bir veri kaynağı tanımlamak için Artı (+) düğmesini tıklatın.

HTML onay kutusunu dinamik olarak önceden seçme

Form tarayıcıda görüntülendiğinde onay kutusunun seçilip seçilmeyeceğine sunucunun karar vermesini sağlayabilirsiniz.

Başlamadan önce ColdFusion, PHP veya ASP sayfasında formu oluşturmanız ve onay kutuları için kayıt kümesi veya başka bir dinamik içerik kaynağı tanımlamanız gerekir. İdeal olarak içerik kaynağı Evet/Hayır veya true/false gibi Boolean verileri içermelidir.

  1. Sayfanızda bir onay kutusu form nesnesi seçin.
  2. Özellik denetiminde Dinamik düğmesini tıklatın.
  3. Dinamik OnayKutusu iletişim kutusunu doldurun ve Tamam'ı tıklatın:
    • Böyleyse Denetle kutusunun yanındaki şimşek simgesini tıklatın ve alanı veri kaynaklarının yanından seçin.

      Veri kaynağı Evet ve Hayır veya doğru ve yanlış gibi Boole verileri içermelidir. Listede veri kaynağı görünmüyorsa veya kullanılabilen veri kaynakları gereksinimlerinizi karşılamıyorsa, yeni bir veri kaynağı tanımlamak için Artı (+) düğmesini tıklatın.

    • Eşit kutusuna onay kutusunun seçili olarak görünmesi için alanın sahip olması gereken değeri girin.

      Örneğin, kayıttaki belirli bir alan Evet değerine sahip olduğunda onay kutusunun seçili görünmesi için Eşit kutusuna Evet değerini girin.

    Not:

    Bu değer ayrıca kullanıcı formun Gönder düğmesini tıklattığında da döndürülür.

HTML radyo düğmesini dinamik olarak önceden seçme

Kayıt tarayıcıdaki HTML formunda görüntülendiğinde HTML radyo düğmesini dinamik olarak önceden seçin.

Başlamadan önce ColdFusion, PHP veya ASP sayfasında formu oluşturmanız ve en az bir HTML radyo düğmesi grubu eklemeniz (Ekle > Form > Radyo Grubu) gerekir. Ayrıca radyo düğmeleri için bir kayıt kümesi veya başka bir dinamik içerik kaynağı tanımlamanız gerekir. İdeal olarak içerik kaynağı Evet/Hayır veya doğru/yanlış gibi Boole verileri içermelidir.

  1. Tasarım görünümünde radyo grubundaki bir radyo düğmesini seçin
  2. Özellik denetçisinde Dinamik düğmesini tıklatın.
  3. Dinamik Radyo Grubu iletişim kutusunu doldurun ve Tamam'ı tıklatın.

Dinamik Radyo Grubu iletişim kutusu seçeneklerini ayarlama

  1. Radyo Düğmesi Grubu açılır menüsünde sayfada bir form ve radyo grubu düğmesi seçin.

    Radyo Düğmesi Değeri kutusunda gruptaki tüm radyo düğmelerinin değerleri görüntülenir.

  2. Değerler listesinden dinamik olarak önceden seçilecek bir değer seçin. Bu değer Değer kutusunda görüntülenir.
  3. Buna Eşit Değer Seç kutusunun yanındaki şimşek simgesini tıklatın ve gruptaki radyo düğmesi için olası denetlenen değerleri içeren bir kayıt kümesi seçin.

    Seçtiğiniz kayıt kümesi radyo düğmelerinin denetlenen değerleriyle eşleşen değerler içerir. Radyo düğmelerinin denetlenen değerlerini görüntülemek için her radyo düğmesini seçin ve düğmenin Özellik denetçisini (Pencere > Özellikler) açın.

  4. Tamam'ı tıklatın.

Dinamik Radyo Grubu iletişim kutusu seçeneklerini ayarlama (ColdFusion)

  1. Radyo Grubu açılır menüsünden bir radyo grubu ve form seçin.
  2. Buna Eşit Değer Seç kutusunun yanındaki şimşek simgesini tıklatın.
  3. Dinamik Veri iletişim kutusunu doldurun ve Tamam'ı tıklatın.

      a.Veri kaynakları listesinden bir veri kaynağı seçin.

      b.(İsteğe Bağlı) Metin için veri formatı seçin.

      c.(İsteğe Bağlı) Dreamweaver'ın dinamik metin görüntülemek için sayfanıza eklediği kodu değiştirin.

  4. Dinamik Radyo Grubu iletişim kutusunu kapatmak için Tamam'ı tıklatın ve Radyo Grubu'na dinamik içerik yer tutucusunu yerleştirin.

HTML form verilerini doğrulama

Dreamweaver, kullanıcının doğru veri türünü girdiğinden emin olmak için belirtilen metin alanlarının içeriğini denetleyen JavaScript kodu ekleyebilir.

Formlarınızı oluşturmak ve belirtilen form öğelerinin içeriğini doğrulamak için Spry formu widget'larını kullanabilirsiniz. Daha fazla bilgi için aşağıda listelenen Spry konularına bakın.

Ayrıca Dreamweaver'da belirtilen alanların içeriğini doğrulayan ColdFusion formları da oluşturabilirsiniz. Daha fazla bilgi için aşağıda listelenen ColdFusion bölümüne bakın.

  1. En az bir metin alanı ve Gönder düğmesi içeren bir HTML formu oluşturun.

    Doğrulamak istediğiniz her metin alanının benzersiz bir ada sahip olduğundan emin olun.

  2. Gönder düğmesini seçin.
  3. Davranışlar panelinde (Pencere > Sunucu Davranışları) Artı (+) düğmesini tıklatın ve listeden Formu Doğrula davranışını seçin.
  4. Her metin alanı için doğrulama kuralları ayarlayın ve Tamam'ı tıklatın.

    Örneğin, kişinin yaşı için ile ilgili bir metin alanına sadece sayı girilebileceğini belirtebilirsiniz.

    Not:

    Formu Doğrula davranışı sadece belgeye bir metin alanı eklendiğinde kullanılabilir.

HTML form nesnelerine JavaScript davranışları ekleme

Dreamweaver'da depolanan JavaScript davranışlarını, düğme gibi HTML form nesnelerine ekleyebilirsiniz.

  1. HTML form nesnesini seçin.
  2. Davranışlar panelinde (Pencere > Sunucu Davranışları) Artı (+) düğmesini tıklatın ve listeden bir davranış seçin.

HTML form düğmelerine özel komut dosyaları ekleme

Bazı formlar, form verilerini işlenmek üzere sunucuya göndermek yerine, form işleme gerçekleştirmek için JavaScript veya VBScript ya da istemcide başka bir eylem kullanır. Kullanıcı düğmeyi tıklattığında belirli bir istemci tarafında komut dosyası çalıştırmak üzere form düğmesini yapılandırmak için Dreamweaver'ı kullanabilirsiniz.

  1. Formda bir Gönder düğmesi seçin.
  2. Davranışlar panelinde (Pencere > Sunucu Davranışları) Artı (+) düğmesini tıklatın ve listeden JavaScript Çağır'ı seçin.
  3. JavaScript Çağır kutusunda kullanıcı düğmeyi tıklattığında çalıştırılacak JavaScript işlevini girin ve Tamam'ı tıklatın.

    Örneğin, processMyForm() gibi henüz varolmayan bir işlevin adını girebilirsiniz.

  4. JavaScript işleviniz henüz belgenin baş kısmında bulunmuyorsa, şimdi ekleyin.

    Örneğin, belgenin baş kısmındaki JavaScript işlevini, kullanıcı Gönder düğmesini tıklattığında bir mesaj görüntüleyecek şekilde tanımlayabilirsiniz:

    function processMyForm(){ 
        alert('Thanks for your order!'); 
    }

Erişilebilir HTML formları oluşturma

HTML form nesnesi eklediğinizde form nesnesini erişilebilir yapabilir ve daha sonra erişilebilirlik niteliklerini değiştirebilirsiniz.

Erişilebilir form nesnesi ekleme

  1. İlk kez erişilebilir form nesneleri eklediğinizde form nesneleri için Erişilebilirlik iletişim kutusunu etkinleştirin (bkz. Çalışma alanını görsel geliştirme için en iyileştirme).

    Bu sadece tek seferlik bir adımdır.

  2. Belgede ekleme noktasını form nesnesinin görünmesini istediğiniz yere yerleştirin.
  3. Ekle > Form seçeneğini belirleyin ve eklemek için bir form nesnesi seçin.

    Girdi Etiketi Erişilebilirlik Nitelikleri iletişim kutusu görünür.

  4. İletişim kutusunu doldurun ve Tamam'ı tıklatın. Seçeneklerin kısmi bir listesi aşağıda belirtilmiştir:

    Not:

    Ekran okuyucuda nesne için Etiket niteliği olarak girdiğiniz ad okunur.

    Kimlik

    Form alanına bir kimlik atar. Bu değer JavaScript'ten alan referansta bulunmak için kullanılabilir; değer ayrıca Stil seçenekleri altındaki for Niteliğini Kullanarak Etiket Ekle seçeneğini belirlediğinizde niteliğin değeri olarak da kullanılır.

    Etiketle Sar Etiketi

    Form öğesinin çevresine aşağıdaki gibi bir etiket sarar:

    <label> <input type="radio" name="radiobutton" value="radiobutton"> RadioButton1</label>

    For Niteliğini Kullanarak Etiket Ekle

    Form öğesinin çevresine aşağıdaki gibi etiket sarmak için for niteliğini kullanır:

    <input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> <label for="radiobutton">RadioButton2</label>

    Bu seçim, tarayıcının onay kutusu ve radyo düğmesi ile ilişkili metni odak dikdörtgeni ile görüntülemesini sağlar ve kullanıcının sadece onay kutusu ve radyo kontrol düğmesi yerine ilişkili metnin herhangi bir yerine tıklatarak onay kutusunu veya radyo düğmesini seçebilmesini sağlar.

    Not: Bu erişilebilirlik için tercih edilen seçenektir; ancak, işlevsellik tarayıcıya bağlı olarak değişebilir.

    Etiket Yok

    Aşağıdaki gibi etiket kullanmaz:

    <input type="radio" name="radiobutton" value="radiobutton"> RadioButton3

    Erişim Anahtarı

    Tarayıcıda form nesnesini seçmek için klavye eşdeğerini (bir harf) ve Alt tuşunu (Windows) veya Control tuşunu (Macintosh) kullanır. Örneğin, Erişim Anahtarı olarak B girerseniz, Macintosh tarayıcısı olan kullanıcılar form nesnesini seçmek için Control+B yazabilir.

    Sekme Dizini

    Form nesneleri için bir sekme sırası belirler. Nesne için sekme sırası belirlerseniz tüm nesneler için sekme sırası belirlemeniz gerekir.

    Sekme sırası belirlemek, sayfada başka bağlantılar ve form nesneleri olduğunda ve kullanıcının belirli bir sırada bu sekmelerde ilerlemesi gerektiğinde yararlıdır.

  5. Form etiketi eklemek için Evet'i tıklatın.

    Form nesnesi belgede görünür.

    Not:

    İptal'e basarsanız, form nesnesi belgede görünür ancak Dreamweaver, erişilebilirlik etiketlerini veya niteliklerini bununla ilişkilendirmez.

Form nesnesi için erişilebilirlik değerlerini düzenleme

  1. Belge penceresinde nesneyi seçin.
  2. Aşağıdakilerden birini yapın:
    • Kod görünümünde uygun nitelikleri düzenleyin.

    • Sağ tıklatın veya (Windows) Control tuşuna basarak tıklatın (Macintosh) ve ardından Etiketi Düzenle'yi seçin.

Bu çalışma Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License kapsamında lisanslanmıştır  Creative Commons şartları, Twitter™ ve Facebook sitelerinde paylaşılanları kapsamaz.

Yasal Uyarılar   |   Çevrimiçi Gizlilik İlkesi