Transcript Html03 - Kırklareli Üniversitesi Personel Web Sistemi

HTML FORM ELEMANLARI
Öğr. Gör. Emine TUNÇEL
Kırklareli Üniversitesi Pınarhisar Meslek Yüksekokulu
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
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
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">
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".../>)
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
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
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
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
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
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
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
Örnek Uygulama
•
Ornekform.html sayfasını oluşturunuz.