Web Tasarımının Temelleri

Transkript

1 1. Hafta Web Tasarımının Temelleri Öğr. Gör. Murat YAZICI Artvin Çoruh Üniversitesi, Artvin Meslek Yüksekokulu

2 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

3 <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

4 <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

5 <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

6 <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

7 <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

8 <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

9 <input> date özelliği... Tarih formatında bilgi girmek için kullanılır. <input type="date" name="dogumgunu"> Artvin MYO, Bilgisayar Teknolojileri 9

10 <input> required özelliği... Required: Doldurulması Zorunlu Alan. Artvin MYO, Bilgisayar Teknolojileri 10

11 <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

12 <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

13 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

14 <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

15 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

16 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

17 <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

18 Checked özelliği (varsayılan seçili) Sayfa yüklendiğinde, C ve PHP otomatik seçili gelecektir. Artvin MYO, Bilgisayar Teknolojileri 18

19 <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

20 <radio> name özelliklerinin aynı olmasına dikkat! <input type="radio" name="takim" value="1" checked> Galatasaray <br> Artvin MYO, Bilgisayar Teknolojileri 20

21 <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

22 <select> Artvin MYO, Bilgisayar Teknolojileri 22

23 <select> size özelliği... Artvin MYO, Bilgisayar Teknolojileri 23

24 <select> optgroup özelliği... Artvin MYO, Bilgisayar Teknolojileri 24

25 fieldset & legend Artvin MYO, Bilgisayar Teknolojileri 25

26 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

27 submit Artvin MYO, Bilgisayar Teknolojileri 27

28 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

29 reset Artvin MYO, Bilgisayar Teknolojileri 29

30 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

31 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

32 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

33 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