Sunum yükleniyor. Lütfen bekleyiniz

Sunum yükleniyor. Lütfen bekleyiniz

HTML FORM ELEMANLARI Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu.

Benzer bir sunumlar


... konulu sunumlar: "HTML FORM ELEMANLARI Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu."— Sunum transkripti:

1 HTML FORM ELEMANLARI Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

2 Html’de Form Elemanları Etiketi Tüm form elemanları etiketleri arasında tanımlanır Form elemanlarına girilen verilerin hangi yapıya devredileceğini belirler Aldığı parametreler; Action: Formlar aracılığı ile alınan ziyaretçi verilerinin nereye gönderileceğini belirler. Method: Formlar aracılığı ile alınan ziyaretçi verilerinin hangi yöntemle gönderileceğini belirler

3 Html’de Form Elemanları Etiketi – Method Parametresi Ziyaretçi tarafından girilen verilerin belirtilen adrese ne şekilde gönderileceğini belirler. 2 çeşit veri gönderim metodu vardır. Bunlar; POST: Verileri HTTP isteği üzerine yazarak yollamadır. Form verileri adres satırında görüntülenmezler. Daha güvenli ancak, daha yavaştır GET: Tüm veriler URL adresine eklenerek yollanır. Gönderilen veri miktarı sınırlıdır. (100’den fazla karakter gönderiminde POST metodu kullanılmalıdır) POST metoduna göre daha fazla sayıda tarayıcı tarafından desteklenir Gönderilen veriler adres satırında özel bir formatta görüntülenirler

4 Html’de Form Elemanları Etiketi – Action Parametresi Ziyaretçinin form elemanlarına girmiş olduğu verilerin nereye gönderileceğini belirler. Ziyaretçi verileri, bir mail adresi ya da.php,.aspx sayfasına gönderilebilir Form üzerindeki hiçbir veri kullanıcı belirtmediği sürece gönderilmez. Kullanıcı verileri submit buton ile gönderilir. Reset butonu ile form verileri temizlenir

5 Html’de Form Elemanları Etiketi Çeşitli işleve sahip form nesnelerini eklemek için kullanılır. TYPE özelliği, eklenecek form nesnesinin çeşidini belirler Form hazırlanırken kullanılan alanlar; Metin Kutusu ( ) Metin Alanları( ) Radyo Düğmeleri( ) İşaret Kutucukları( ) Kombo Kutuları( ) Şifre Satırı( ) Dosya Yükleme( ) Çerçeve Kutusu( ) Gelişmiş Düğme( ) Resim( ) Etiket( Deneme ) Saklanmış Alan( )

6 Html’de Form Elemanları Metin Kutusu (TextBox) Elemanı Kulanıcının tek satırlık veri girişi yapmasını sağlar şeklinde tanımlanır Aldığı özellikler; MAXLENGHT: Metin kutusuna girilecek karakter sayısını belirler SİZE: Metin kutusunun sayfada görünen boyutunu belirler VALUE: Metin kutusunun ilk değerini ayarlamak için kullanılır NAME: Metin kutusunu adlandırmak için kullanılır READONLY: Metin kutusuna değer girilmesini engeller. Yalnızca atanan ilk değer görünür Eğer metin kutusuna girilen verilerin görünmesini istemiyorsanız type parametresinin değerini PASSWORD yapın

7 Html’de Form Elemanları Metin Alanı (Textarea) Elemanı Çok satırdan oluşan metin kutusudur. … html etiketleri ile tanımlanır Ziyaretçi den adres, istek, şikayet ve görüş gibi bilgiler almak için kullanılır. Aşağıda verilen özellikleri alır; Cols: Metin alanının karakter cinsinden uzunluğunu verir. Rows: Metin alanının kaç satırdan oluşacağını belirler Name: isim belirlemek için kullanılır

8 Html’de Form Elemanları CheckBox Elemanı Birden fazla seçenek arasından birden fazla seçim yapma imkanı tanıyan form nesneleridir şeklinde tanımlanır Aldığı parametreler; Checked: Seçili olup olmayacağını belirleyen özelliktir Name: İsmini belirler Value: Checkbox kontrolü seçildiğinde gönderilecek veriyi belirler

9 Html’de Form Elemanları Dosya Yükleme Elemanı HTML etiketi, sunucuya dosya gönderme/yükleme(upload) kontrolü oluşturulmasını sağlar Dosya gönderilmesi için FORM etiketinin method özelliğinin post, enctype özelliğinin multipart/form-data olarak belirtilmiş olması gerekir

10 Html’de Form Elemanları Çerçeve Kutusu Form üzerinde birbiri ile ilişkili girişler, etiketler ve diğer kontrollerin gruplandırılmasını sağlar. etiketi ile oluşturulur. etiketi elemanı içerisinde kullanılarak gruplandırılan bölgeye bir başlık atanmasını sağlar

11 Html’de Form Elemanları Gelişmiş Düğme … etiketleri ile oluşturulur. ile oluşturulan düğmeden daha gelişmiş bir düğme eklenmesini sağlar. En önemli farkı … etiketlerinin kullanılabilmesidir. Dolayısıyla etiketi ile birlikte kullanılarak buton için bir resim belirlenebilir

12 Html’de Form Elemanları Resim Elemanı HTML etiketi, resimli form gönderme butonu oluşturulmasını sağlar. Ayrıca, oluşturulan bu resimli butona tıklandığında resmin üzerinde tıklanan konumun soldan ve üstten uzaklıkları kontrol ismi ile birlikte isim.x ve isim.y şeklinde isimlendirilerek, sorgu parametresi olarak sayfa adresine eklenip sunucuya gönderilir. Eğer, INPUT type=image etiketi bir form etiketi içinde değilse içerdiği resim gösterilir fakat, üzerine tıklandığında herhangi bir işlem yapmaz.form Resme tıklandığında, tıklanan konuma göre aşağıdakine benzer bir sorgu oluşturulur ………. image.html?btnResim.x=101&btnResim.y=12

13 Örnek Uygulama Ornekform.html sayfasını oluşturunuz. Ornekform.html


"HTML FORM ELEMANLARI Öğr. Gör. Emine TUNÇEL Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu." indir ppt

Benzer bir sunumlar


Google Reklamları