WEB TASARIMI-HTML FORMLAR SAVAŞ TUNÇER

... konulu sunumlar: "WEB TASARIMI-HTML FORMLAR SAVAŞ TUNÇER"— Sunum transkripti:

1 HTML FORMLAR SAVAŞ TUNÇER

2 HTML – Form Formlar bize HTML kullanarak sayfanızı ziyaret edenlerle temas kurmanızı sağlarlar. Formlar yoluyla ziyaretçilerin herhangi bir konuda görüşlerini alabiliriz; veya hazırlayacağımız bir formla ziyaretçilerden kişisel bilgilerini isteyebiliriz. Formlar... etiketleri arasına yazılırlar. Bu etiketin parametrelerini öğrenmeden önce form türlerine bir göz atalım.

3 Ziyaretçinin ismi, telefonu gibi kısa bilgilerini almak için kullanılır. Form Türleri text Kullanımı Parametreleri maxlength: Yazılabilecek maksimum text uzunluğu value: varsayılan değer size: Karakter cinsinden alanın uzunluğu name: isim vermek için kul. Örnek

4 Ziyaretçiden şifre bilgilerini almak için kullanılır. Girilen karakter “*” ile gösterilir. Form Türleri password Kullanımı Parametreleri maxlength: Yazılabilecek maksimum text uzunluğu value: varsayılan değer size: Karakter cinsinden alanın uzunluğu Örnek

5 Text kutusuna sığmayacak uzun bilgileri, mesela ziyaretçinin sayfa ile ilgili düşüncelerini almak için kullanılır. Form Türleri textarea... Kullanımı Parametreleri rows : Alanın karakter cinsinden yüksekliği cols : Alanın genişliği name : Nesneye isim vermek için kullanılır. Burası bir textarea! Örnek

6 Ziyaretçiye, verilen seçeneklerden birini, birkaçını veya hepsini seçme imkanı verir. Form Türleri checkbox Kullanımı Parametreleri checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur. seçenek 1 seçenek 2 Örnek

7 Ziyaretçiye, verilen seçeneklerden sadece birini seçme imkanı verir. Form Türleri radio Kullanımı Parametreleri checked: sayfa açıldığında 'checked' ibaresi bulunan kutu işaretli olur. seçenek1 seçenek2 seçenek3 Örnek

8 Ziyaretçiye seçeneklerden birini veya (multiple ifadesi ile) birkaçını seçme imkanı verir. Form Türleri select...... Kullanımı Parametreleri size: Select etiketinin karakter cinsinden boyutu selected: Görevi checked ifadesinin aynıdır. multiple: Ziyaretçinin birden çok seçim yapmasına olanak verir seçenek1 seçenek2 seçenek3 Örnek

9 Ziyaretçi doldurduğu formu bu düğmeye basarak gönderir. Form Türleri submit Kullanımı Parametreleri value: Butonun üzerine yazılacak metin buraya yazılır Örnek

10 Ziyaretçinin doldurduğu formda, ziyaretçinin yazdığı her şeyi siler. Form Türleri reset Kullanımı Parametreleri value: Butonun üzerine yazılacak metin buraya yazılır Örnek

11 Düğmelere JavaScript ile bazı işlevler kazandırılabilir. Form Türleri button Kullanımı Parametreleri value: Butonun üzerine yazılacak metin buraya yazılır Örnek

12 'Get' veya 'post' değerlerini alabilir. Method parametresinin değeri formu göndereceğiniz CGI programı açısından önemlidir. Etiketi method İşte etiketinin parametreleri ve bunların işlevleri:

13 Formu göndereceğiniz CGI programının adresini action parametresiyle bildirirsiniz. Etiketi action İşte etiketinin parametreleri ve bunların işlevleri:

14 Örnek – Ekran Görüntüsü Bilgisayar mühendisliği Elektronik mühendisliği Bilgisayar Programcılığı

15 Form HTML dersini nasıl buldunuz Adınız Şifre Cinsiyetiniz Erkek Kadın Seçiminiz Mükemmel İyi Fena Değil Fikrim Yok Görüşleriniz Lütfen fikrinizi girin Lütfen bölümünüzü seçin Bilgisayar Müh Elektronik Müh Bilgisayar Programcılığı

16 asd HTML dersini nasıl buldunuz Adınız Şifre Cinsiyetiniz Erkek Kadın Seçiminiz Mükemmel İyi Fena Değil Fikrim Yok Örnek

17 Görüşleriniz Lütfen fikrinizi girin Lütfen bölümünüzü seçin Bilgisayar Müh Elektronik Müh Deri Müh Diğer Örnek - Devamı

18

19 Örnek

20 HTML – Örnek