Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu

... konulu sunumlar: "Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu"— Sunum transkripti:

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

2 Html’de Form Elemanları
<form> Etiketi Tüm form elemanları <form></form> 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ı
<form> 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ı
<form> 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 action="sorgula.aspx" method="post" > Form üzerindeki hiçbir veri kullanıcı belirtmediği sürece gönderilmez. Kullanıcı verileri submit buton ile gönderilir. <INPUT TYPE="submit" VALUE="Gönder"> Reset butonu ile form verileri temizlenir <INPUT TYPE="reset" VALUE="Temizle">

5 Html’de Form Elemanları
<input> 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 (<input type="text"... />) Metin Alanları(<textarea.../>) Radyo Düğmeleri(<input type="radio"... />) İşaret Kutucukları(<input type="checkbox"... />) Kombo Kutuları(<select name="liste"...>) Şifre Satırı(<input type="password"... />) Dosya Yükleme(<input type="file".. />) Çerçeve Kutusu(<fieldset style="padding:2"...>) Gelişmiş Düğme(<button name="B1"...>) Resim(<input src="getaway.jpg" type="image"... />) Etiket(<label>Deneme</label>) Saklanmış Alan(<input type="hidden".../>)

6 Html’de Form Elemanları
Metin Kutusu (TextBox) Elemanı Kulanıcının tek satırlık veri girişi yapmasını sağlar <input type="text" …> ş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. <textarea>…</textarea> 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 <input type= "checkbox " ….> ş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 <input type="file"> 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. <fieldset> etiketi ile oluşturulur. <legend> etiketi <fieldset> 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 <button>…</button> etiketleri ile oluşturulur. <input type="button" /> ile oluşturulan düğmeden daha gelişmiş bir düğme eklenmesini sağlar. En önemli farkı <button>…</button> etiketlerinin kullanılabilmesidir. Dolayısıyla <img> etiketi ile birlikte kullanılarak buton için bir resim belirlenebilir

12 Html’de Form Elemanları
Resim Elemanı HTML <INPUT type=image> 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. <input type="image" name="btnResim" src="resim.jpg" /> 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 Ornekform.html sayfasını oluşturunuz.
Örnek Uygulama Ornekform.html sayfasını oluşturunuz.