1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI www.muratyazici.com Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu www.artvin.edu.tr
Formlar Kullanıcının da aktif olacağı dinamik web sayfaları Form Nesneleri o Textarea o Password o Text o CheckBox o Radio o Açılır Menüler o Reset o Submit Artvin MYO, Bilgisayar Teknolojileri 2
<form> etiketi HTML formları oluşturmak için kullanılır. Form oluşturmayı sağlayan tüm form elemanları <form>.</form> etiketleri arasında yer alır. Genel Kullanım: <form method="get-post" action="url" target="pencere">... </form> METHOD: Formdan girilecek olan bilgilerin, değerlendirici dosyaya hangi yöntem ile gönderileceğini belirtmek için kullanılır. POST ya da GET değerlerini alabilir. Artvin MYO, Bilgisayar Teknolojileri 3
<form> etiketi Genel Kullanım: <form method="get-post" action="url" target="pencere">... </form> ACTION: Formdan girilecek olan bilgilerin değerlendirileceği dosyanın URL adresini belirtmek için kullanılır. Artvin MYO, Bilgisayar Teknolojileri 4
<input> etiketi Form içerisinde bilgi almak için kullanılan etikettir. Hangi veri türünde girişin yapılacağını burada kullanılan type elemanı belirlemektedir. Type elemanının varsayılan değeri text(metin) olmakla birlikte belirtilecek olan (text, password, checkbox, radio,submit, reset gibi) farklı değerleri de alabilir. <input> etiketinin sonlandırıcı etiketi bulunmaz yani bu etiket kapatılmaz. <input type="text" name="kullaniciadi"> <input type="password" name="sifre"> Artvin MYO, Bilgisayar Teknolojileri 5
<input> etiketi <input type="text" name="kullaniciadi"> <input type="password" name="sifre"> SIZE ÖZELLİĞİ: Metin kutusunun boyutunu (genişliğini) belirlemek için kullanılır. Varsayılan değeri 20 dir. Artvin MYO, Bilgisayar Teknolojileri 6
<input> size özelliği... <input type="text" name="kullaniciadi"> <input type="password" name="sifre" size="15"> <input type="text" name="mesaj" size="40"> size=15 size=40 Artvin MYO, Bilgisayar Teknolojileri 7
<input> maxlength özelliği... MAXLENGTH: Girilecek olan verinin en fazla kaç karakterden oluşacağını belirlemek için kullanılır. <input type="text" name="kullaniciadi" maxlength="10"> <input type="password" name="sifre" maxlength="15"> Artvin MYO, Bilgisayar Teknolojileri 8
<input> date özelliği... Tarih formatında bilgi girmek için kullanılır. <input type="date" name="dogumgunu"> Artvin MYO, Bilgisayar Teknolojileri 9
<input> required özelliği... Required: Doldurulması Zorunlu Alan. Artvin MYO, Bilgisayar Teknolojileri 10
<input> value özelliği... TextBox a varsayılan bir değer atanabilir. Sayfa ilk yüklendiğinde TextBox içinde görülen değerdir. Kullanıcı değiştirmedikçe TextBox içinde bu değer kalır. <input type="text" name="username" value=" E-posta adresiniz..." size="25" maxlength="40"> Artvin MYO, Bilgisayar Teknolojileri 11
<input> placeholder özelliği... TextBox a varsayılan bir değer atanabilir. Sayfa ilk yüklendiğinde TextBox içinde görülen değerdir. Kullanıcı yazmaya başladıkça TextBox içindeki değer silinir. <input type="text" name="username" size="25" maxlength="40" placeholder="e-posta adresiniz "> Artvin MYO, Bilgisayar Teknolojileri 12
autofocus özelliği... HTML5 ile yeni gelen bir özelliktir. Bu özellik tanımlandığında sayfa yüklendikten sonra tanımlanan nesnenin odaklanacağını belirtir. Internet Explorer hariç popüler tarayıcılar desteklemektedir. <input type="text" name="username" size="25" maxlength="40" autofocus> Artvin MYO, Bilgisayar Teknolojileri 13
<textarea> etiketi Daha geniş çaplı yazıları sayfalarımızda gösterebiliriz. Text elemanının genişletilmiş hali. <textarea> </textarea> etiketleri arasında tanımlanır. cols ve rows özelliği readonly özelliği text textarea Artvin MYO, Bilgisayar Teknolojileri 14
cols ve rows özelliği... Textarea nesnesinin sütun ve satır büyüklükleri cols (sütun), rows (satır) 6 satır 45 karakter <textarea name="mesaj" cols="45" rows="6"></textarea> Artvin MYO, Bilgisayar Teknolojileri 15
readonly özelliği... Textarea içindeki yazıların sadece okunabilir olması için readonly özelliği kullanılır. <textarea name="mesaj" cols="45" rows="4" readonly> Burada yazılanları sadece okuyabilirsiniz! </textarea> Artvin MYO, Bilgisayar Teknolojileri 16
<checkbox> Hazırlamakta olduğunuz forma onay kutuları eklemek için kullanılır. Onay kutuları, listelenen seçeneklerden istediğiniz kadarını seçebilmenize veya tümünü seçilmemiş duruma getirmenize olanak sağlar. Artvin MYO, Bilgisayar Teknolojileri 17
Checked özelliği (varsayılan seçili) Sayfa yüklendiğinde, C ve PHP otomatik seçili gelecektir. Artvin MYO, Bilgisayar Teknolojileri 18
<radio> Kullanıcının verilen seçeneklerden sadece bir tanesini seçebileceği durumlar için kullanılır. Radio düğmelerinin birbirleri ile ilişkili olması ve name özelliklerinin aynı olması gerekmektedir. Checked özelliğini kullanarak sayfa yüklendiği zaman, seçili olmasını istediğiniz değer belirlenir. Radio düğmelerinin alacağı değerler value seçeneğinde belirlenir. Artvin MYO, Bilgisayar Teknolojileri 19
<radio> name özelliklerinin aynı olmasına dikkat! <input type="radio" name="takim" value="1" checked> Galatasaray <br> Artvin MYO, Bilgisayar Teknolojileri 20
<select> Form içinde açılır liste oluşturmak için kullanılır. Listeden tek eleman seçilebilir. Açılan listeler <select></select> etiketi ile tanımlanır. Liste elemanları <option></option> etiketi ile tanımlanır. Artvin MYO, Bilgisayar Teknolojileri 21
<select> Artvin MYO, Bilgisayar Teknolojileri 22
<select> size özelliği... Artvin MYO, Bilgisayar Teknolojileri 23
<select> optgroup özelliği... Artvin MYO, Bilgisayar Teknolojileri 24
fieldset & legend Artvin MYO, Bilgisayar Teknolojileri 25
submit Submit (gönder), form içerisinde yer alan içeriklerin sunucuya gönderilmesini sağlamak için kullanılır. Kullanımı: <input type="submit" value="gönder"> value özelliği düğme üzerinde istediğiniz metni yazmanıza olanak sağlar. Artvin MYO, Bilgisayar Teknolojileri 26
submit Artvin MYO, Bilgisayar Teknolojileri 27
reset Üzerine gelip tıklandığı zaman, form içeriğini temizleyip kullanıcının forma yeniden bilgi girişi sağlayan bir düğme (buton) oluşturulmasını sağlar. Kullanımı: <input type="reset" value="temizle"> value özelliği düğme üzerinde istediğiniz metni yazmanıza olanak sağlar. Artvin MYO, Bilgisayar Teknolojileri 28
reset Artvin MYO, Bilgisayar Teknolojileri 29
Kayan Yazı Ekleme (1) (Soldan sağa kayan yazı) <marquee direction=right> Artvin MYO </marquee> (Sağdan sola kayan yazı) <marquee> Artvin MYO </marquee> (Sağdan sola ve soldan sağa kayan yazı) <marquee behavior=alternate> Artvin MYO </marquee> Artvin MYO, Bilgisayar Teknolojileri 30
Kayan Yazı Ekleme (2) (Yukarıdan aşağıya kayan yazı) <marquee scrollamount="1" height="30" width="100%" direction="down" scrolldelay="100"> Artvin MYO </marquee> scrolldelay: marquee etiketi içinde kaydırılan yazının her hareketinde bir önceki yerleştirildiği zaman ile sonraki yerleştirileceği zaman arasındaki milisaniye cinsinden farkı belirler. (Varsayılan değer 85 ms.) <marquee> Varsayılan değer </marquee> <marquee scrolldelay="100"> 100 milisaniye </marquee> <marquee scrolldelay="150"> 150 milisaniye </marquee> Artvin MYO, Bilgisayar Teknolojileri 31
Kayan Yazı Ekleme (3) (Yukarıdan aşağıya kayan yazı) <marquee scrollamount="3" height="30" width="100%" direction="down" scrolldelay="100"> Artvin MYO </marquee> scrollamount: marquee etiketi içinde kaydırılan yazının her hareketinde bir önceki yerleştirildiği konum ile yeni yerleştirileceği konum arasındaki piksel cinsinden farkı belirler. (Varsayılan değer 6 pikseldir.) <marquee> Varsayılan değer </marquee> <marquee scrollamount="7"> 7 piksel </marquee> <marquee scrollamount="8"> 8 piksel </marquee> Artvin MYO, Bilgisayar Teknolojileri 32
Kayan Yazı Ekleme (4) (Kayan yazı döngü sayısı) <marquee loop="1" direction="left"> Artvin MYO </marquee> loop: marquee etiketi içindeki yazının kaç defa kayacağını gösterir. start ve stop parametreleri Artvin MYO, Bilgisayar Teknolojileri 33