HTML – Tablo ve Formlar

İçerik

1. HTML Tablolar

� İçiçe tablolar

� Hücre genişliği (Cells Width)

� Hücre dış ve iç aralığı (Cell Spacing and Padding)

� Sütun ve satır birleştirme (Span)

2

İçerik (2)2. HTML Formlar� Form Alanları ve Alan Kümeleri� Form Kontrolleri ve Etiketler

� Metin alanı (Text field)

� Çok satırlı metin (Text area)

� Seçim kutusu (Select)

� Radio button

� Checkbox

� Düğme (Button)

� Image button

� Saklı alanlar (Hidden fields)

� Sliders ve Spinboxes

� Doğrulama (Validation)alanları

3

HTML Tablolar

HTML Tablolar� Tablolar hücresel veri ifade etmekte kullanılır

� Bir tablo bir veya daha çok satırdan meydana

gelir

� Her bir satır bir veya daha fazla sütuna sahiptir.

� Tablolar birkaç temel etiketten oluşur: <table></table>: Tablo başlangıç ve bitşi<tr></tr>: Tablo satırı yaratır<td></td>: Hücresel veri yaratır

� Önceleri sayfa düzeni için de kullanılan tablolar artık kullanışlı değillerdir. Tablolar yerine CSSfloats ve positioning stilleri kullanılmalıdır.

5

HTML Tablolar (2)

� Tablo başlangıç ve bitişi

� Satır başlangıç ve bitişi

� Sütun/hücre başlangıç ve bitşi

6

<table> ... </table>

<tr> ... </tr>

<td> ... </td>

Basit Bir HTML Tablo – Örnek

7

<table cellspacing="0" cellpadding="5"><tr><td><img src="ppt.gif"></td><td><a href="dersnotu1.ppt">Ders Notu 1</a></td>

</tr><tr><td><img src="ppt.gif"></td><td><a href="dersnotu2.ppt">Ders Notu 2</a></td>

</tr><tr><td><img src="zip.gif"></td><td><a href="ders2-demo.zip">Ders 2 - Demolar</a></td>

</tr></table>

Basit Bir HTML Tablo – Örnek

8

<table cellspacing="0" cellpadding="5"><tr><td><img src="ppt.gif"></td><td><a href="dersnotu1.ppt">Ders Notu 1</a></td>

</tr><tr><td><img src="ppt.gif"></td><td><a href="dersnotu2.ppt">Ders Notu 2</a></td>

</tr><tr><td><img src="zip.gif"></td><td><a href="ders2-demo.zip">Ders 2 - Demolar</a></td>

</tr></table>

Data Cells and Header Cells

� Two kinds of cells in HTML 5 tables

� Data cells – containing the table data

� Header cells – used for the column names or some more important cells in a table

� Why two kinds of cells?

� Used to semantically separate the cells<tr>

<th>Full name</th> <th> Mark </th></tr><tr>

<td>Doncho Minkov</td> <td>Very good 5</td></tr><tr>

<td>Georgi Georgiev</td> <td>Exellent 6</td></tr>

HTML Tablo – Diğer Etiketler� Tablo satırları üç anlamsal bölüme ayrılmıştır:

başlık (header), içerik/gövde (body) ve alt bilgi(footer)

� <thead> tablo başlığını gösterir ve <td>bileşeni yerine <th> bileşenlerini içerir,

� <tbody> çok veri bulunan tablo satır koleksiyonunu gösterir

� <tfoot> tablo alt bilgisini österir fakat<tbody> etiketinden ÖNCE gelir.

� <colgroup> ve <col> sütunları tanımlar(çoğunlukla sütun genişliğini ayarlamak amacıyla kullanılır) 10

HTML Tablo – Diğer Etiketler: Örnek

11

<table><colgroup><col style="width:100px" /><col />

</colgroup><thead><tr><th>Column 1</th><th>Column 2</th></tr>

</thead><tfoot><tr><td>Footer 1</td><td>Footer 2</td></tr>

</tfoot><tbody><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>

</tbody></table>

başlık

altbilgi

En son gövde (veri) gelir

th

sütunlar

<table><colgroup><col style="width:200px" /><col />

</colgroup><thead><tr><th>Column 1</th><th>Column 2</th></tr>

</thead><tfoot><tr><td>Footer 1</td><td>Footer 2</td></tr>

</tfoot><tbody><tr><td>Cell 1.1</td><td>Cell 1.2</td></tr><tr><td>Cell 2.1</td><td>Cell 2.2</td></tr>

</tbody></table>

12

table-full.html

Alt bilgi kodlamada verilerden önce gelmesine rağmen tarayıcıda en

son görüntülenir

HTML Tablo – Diğer Etiketler: ÖrnekVarsayılan, başlık metni

kalın ve ortalıdır.

İçiçe (Nested) Tablolar

� Tablo verisi “hücreler” (<td>) içiçe tablolar içerebilir. (tablo içinde tablo):

13

<table><tr><td>İletişim:</td><td><table><tr><td>İlk isim</td><td>Soyisim</td>

</tr></table>

</td></tr>

</table>

nested-tables.html

� Hücreler arası boşluk(cellspacing)

� Hücreler arası boşluğu tanımlar.

Hücreler Arası Boşluk (Cell Spacing)

� Tablolar iki önemli niteliğe sahiptir:

14

cell cell

cell cell

� Hücre iç boşluğu (cellpadding)

� Hücre sınırı ile metin arasındaki boşluğu tanımlar

Hücre İç Boşluğu (Cell Padding)

15

cell

cell

cell

cell

Cell Spacing ve Padding – Örnek

16

<html><head><title>Tablo Hücreleri</title></head><body><table cellspacing="15" cellpadding="0"><tr><td>İlk Hücre</td><td>İkinci Hücre</td></tr>

</table><br/><table cellspacing="0" cellpadding="10"><tr><td>İlk hücre</td>

<td>İkinci Hücre</td></tr>

</table></body>

</html>

table-cells.html

Cell Spacing ve Padding – Örnek

17

<html><head><title>Tablo Hücreleri</title></head><body><table cellspacing="15" cellpadding="0"><tr><td>İlk Hücre</td><td>İkinci Hücre</td></tr>

</table><br/><table cellspacing="0" cellpadding="10"><tr><td>İlk hücre</td>

<td>İkinci Hücre</td></tr>

</table></body>

</html>

table-cells.html

Tablo Cell Spacing veCell Padding

Demo

� rowspan

� Hücrenin kaç tane sütun kaplayacağını belirtir

� colspan

� Hücrenin kaç tane sütun kaplayacağını belirtir

Sütun ve Satır Birleştirme

� Tablo hücreleri iki önemli niteliğe sahiptir:

19

cell[1,1] cell[1,2]

cell[2,1]

colspan="1"colspan="1"

colspan="2"

cell[1,1]cell[1,2]

cell[2,1]

rowspan="2" rowspan="1"

rowspan="1"

Sütun ve Satır Birleştirme – Örnek

20

<table cellspacing="0"><tr class="1"><td>Cell[1,1]</td>

<td colspan="2">Cell[2,1]</td></tr><tr class=“2"><td>Cell[1,2]</td>

<td rowspan="2">Cell[2,2]</td><td>Cell[3,2]</td></tr>

<tr class=“3"><td>Cell[1,3]</td><td>Cell[2,3]</td></tr>

</table>

table-colspan-rowspan.html

<table cellspacing="0"><tr class="1"><td>Cell[1,1]</td>

<td colspan="2">Cell[2,1]</td></tr><tr class=“2"><td>Cell[1,2]</td>

<td rowspan="2">Cell[2,2]</td><td>Cell[3,2]</td></tr>

<tr class=“3"><td>Cell[1,3]</td><td>Cell[2,3]</td></tr>

</table>

21

table-colspan-rowspan.html

Cell[2,3]Cell[1,3]

Cell[3,2]

Cell[2,2]

Cell[1,2]

Cell[2,1]Cell[1,1]

Sütun ve Satır Birleştirme – Örnek

Row and ColumnsSpansLive Demo

22

HTML 5 FormlarWeb Sayfasından Kullanıcı Verilerinin

Girilmesi

HTML Formlar

� Formlar site ziyaretçilerinden veri toplamanın en başta gelen yöntemidir.

� Form bloklarını yaratmak için:

� Örnek:

24

<form></form>

<form name="myForm" method="post" action="path/to/some-script.php">

...</form>

"action" niteliği form verilerinin hangi sayfaya gönderileceğini söyler

“method" niteliği form verilerinin nasıl gönderilmesi gerektiğini söyler– GET veya POST isteği üzerinden

Form Alanları

� Tek satır metin giriş alanı:

� Çok satır metin bölgesi alanı:

� Saklı (Hidden) alanlar kullanıcıya görünmeyen verileri saklar:

� Genellikle JavaScript kodlar tarafından kullanılır25

<input type="text" name=«ilkAdi" value= "Bu bir metin alanıdır" />

<textarea name= "yorumlar">Bu bir çok satırlı metin alanıdır</textarea>

<input type="hidden" name="hesap" value="Bu bir gizli metin alanıdır." />

Fieldsets

� Fieldsets ilişkili form alanı gruplarını kapsamak için kullanılırlar:

� <legend> fieldset başlığıdır.26

<form method="post" action="form.aspx"><fieldset>

<legend>Müşteri Detayı</legend><input type="text" id="isim" /><input type="text" id="telefon" />

</fieldset><fieldset>

<legend>Sipariş Detay</legend><input type="text" id="adet" /><textarea cols="40" rows="10"

id="uyarilar"></textarea></fieldset>

</form>

Form Giriş Kontrolleri

� Checkboxes:

� Radio buttons:

� Radyo düğmeleri gruplanabilir, grup içinden sadece birinin seçilmesine izin verilir:

27

<input type="checkbox" name= "meyve" value="elma" />

<input type="radio" name="sifat" value="Bay." />

<input type="radio" name="sehir" value="izmir" /><input type="radio" name=«sehir" value="ankara" />

Diğer Form Kontrolleri

� Açılır Liste (Dropdown menus):

� Gönder (Submit) düğmesi:

28

<select name="cinsiyet"><option value="1"

selected="selected">Erkek</option><option value="2">Kadın</option><option value="3">Diğer</option>

</select>

<input type="submit" name="submitBtn" value="Şimdi Uygula" />

Diğer Form Kontrolleri (2)

� Reset düğmesi – formu başlangış durumuna geri getirir.

� Image düğmesi– gönderme düğmesi gibidir fakat resim gösterilir ve tık koordinatı gönderilir

� Genel amaçlı düğme – Javascript içinde kullanılır, versayılan eylem yoktur.

29

<input type="reset" name="resetBtn" value="Reset the form" />

<input type="image" src="submit.gif" name="submitBtn" alt="Gönder" />

<input type="button" value="bana tıkla" />

Diğer Form Kontrolleri (3)

� Parola Girişi – Girilen metni * işareti ile maskeler/gizler

� Çoklu seçim alanı – tek satır yerine çok satırda madde listesi görüntüler

30

<input type="password" name="pass" />

<select name="urunler" multiple="multiple"><option value="1"

selected="selected">klavye</option><option value="2">fare</option><option value="3">monitör</option>

</select>

Diğer Form Kontrolleri (4)

� Dosya girişi– Dosyaları yüklemek için kullanılan bir alandır

� Dosya yükleme yapılacağı zaman dosyayı

gönderme biçimini tanımlamak için enctype

niteliği kullanılır. Genelde multipart/form-data

değerini alır.:

31

<input type="file" name="foto" />

<form enctype="multipart/form-data">...<input type="file" name="foto" />

...</form>

Etiketler

� Form etiketleri (label) , form alan ID’leri kullanılarak açıklayıcı metin konmasını sağlar.

� Bir etikete tıklamak ilişkili alana odaklanılmasını sağlar (checkboxes terslenir (toggled), radio düğmeleri seçili olur)

� Etiketler bir kullanılabilirlik ve erişilebilirlik özelliğiolup her ikisi de erişilebilirlik doğrulamasından geçmek için gereklidir.

32

<label for="fn">İlk İsim</label><input type="text" id="fn" />

HTML Form – Örnek

33

<form method="post" action="apply-now.php"><input name="subject" type="hidden" value="sinif" /><fieldset><legend>Akademik Bilgi</legend><label for="derece">Derece</label><select name="degree" id="derece">

<option value="LS">Lisans</option><option value="YL">Yüksek Lisans</option><option value="DR" selected="selected">Doktora

Programı</option></select><br /><label for="ogrenciNo">Öğrenci No</label><input type="password" name="ogrenciNo" />

</fieldset><fieldset><legend>Kişisel Bilgiler</legend><label for="ilkAd">İlk İsim</label><input type="text" name="ilkAd" id="ilkAd" /><br /><label for="sadi">Soyadı</label><input type="text" name="sadi" id="sadi" />

form.html

HTML Form – Örnek(2)

34

<br />Cinsiyet: <input name="gender" type="radio" id="gm" value="m" /><label for="gm">Erkek</label><input name="gender" type="radio" id="gf" value="f" /><label for="gf">Kadın</label>

<br /><label for="email">Eposta</label><input type="text" name="email" id="email" />

</fieldset><p><textarea name="terms" cols="30" rows="4"

readonly="readonly">KULLANIM ŞARTLARI...</textarea></p><p><input type="submit" name="submit" value="Form Gönder" /><input type="reset" value="Form Temizle" />

</p></form>

form.html (devam)

form.html (devam)

HTML Form – Örnek (3)

35

Sliders ve Spinboxes

Range ve Spinbox

� Kullanıcıların sadece sayısal değer girmelerine izin verir.

� min, max, step ve value

� Spinbox veya Slider, input tipine bağlıdır.

� Farklı tarayıcılarda farklı görünebilirler.

� Sliders ve Spinboxes Firefox üzerinde çalışmaz.

� Standart textbox olarak görüntülenirler.37

<input type="range" min="0" max="100" /><input type="number" min="0" max="100" />

HTML 5 yenlikler

� Autocomplete

� Tarayıcı önceden girilen değerleri saklar.

� Aynı sayfa daha sonra tekrar ziyaret edildiğinde bu bilgiler geri getirilir.

� Autofocus

� Sayfa yüklendiğinde alana odaklanılır/seçilir. Bilgi girişi için ilk burası işaret edilmiş olur.

� Required

� Doldurulması veya seçilmesi zorunlu alanları gösterir. 38

Giriş Alanları İçin Doğrulama� Email – e-posta için doğrulama

� Doğrulama için örüntü belirlenebilir.

� Mobil cihazlarda e-posta klavyesini getirir.

� URL – url için doğrulama

� Mobil cihazlarda url klavyesini getirri.

� Telefon

� Sayı klavyesini getirir.

39

<input type="email" required="true" pattern="[^ @]*@[^ @].[^ @]"/>

<input type="url" required="true" />

<input type="tel" required="true" />

TabIndex

� tabindex HTML niteliği , TAB tuşuna arka arkaya basıldığında form alanları ve bağlantılarının hangi sırada gezileceğini kontrol etmek amacıyla kullanılır.

� tabindex="0" (sıfır) - "natural" (doğal) sıra

� Eğer X > Y, tabindex="X" sahip bileşen tabindex="Y " sahip bileşenden önce tekrarlanır

� Negatif tabindex’e sahip bileşenler atlanır, bununla beraber, bu standartta tanımlı değildir

40

<input type="text" tabindex="10" />

HTML Çerçeveler (Frames)

<frameset>, <frame> ve <iframe>

(<frameset> ve <frame> HTML 5’te

Desteklenmiyor)

HTML Çerçeveler (Frames)� Çerçeveler tek bir web sayfası içinde birden

fazla HTML belgeyi göstermeye imkan sağlar.

� Sayfa yatay ya da düşey olarak birkaç görüntüye (çerçeveye) ayrılabilir.

� Çerçeveler HTML geliştirmenin önceki dönemlerinde (çağlarında ☺ ) popülerken artık kullanılmamaktadırlar. Sebep div, iframe, ajax v.b

� Çerçeveler tüm tarayıcı ve arama motorları tarafından desteklenmemektedir.

� <noframes> bileşeni uyumlu olmayan tarayıcılara içerik sağlamak amacıyla kullanılır. 42

HTML Çerçeve Demo

43

<html>

<head><title>Çerçeve Örnek</title></head>

<frameset cols="180px,*,150px"><frame src="sol.html" /><frame src="orta.html" /><frame src="sag.html" />

</frameset>

</html>

frames.html

sol.html belgesindeki (sol çerçevede görüntülenen

sayfa) <a> bağlantı bileşeninin target niteliğine

yazılan değere dikkat ediniz.

Satır İçi Çerçeveler (Inline Frames): <iframe>

� Satır içi çerçeveler bir web site içinde başka bir web sitesi sayfalarını göstermenin bir yoludur:

44

<iframe name="iframeGoogle" width="600" height="400" src="http://www.google.com" frameborder="yes" scrolling="yes"></iframe>

iframe-demo.html

HTML – Tablolar ve Formlar

Sorular?

Etkinlikler

46

1. Aşağıdaki iki web sayfasına benzer sayfayı

tablolar kullanarak oluşturunuz:

2. Yandaki web

sayfasının benzerini

form bileşenleri

kullanarak

oluşturunuz:

Etkinlikler (2)

3. Bu örnektekine

benzer örnek form

oluşturunuz:

47

ornek-form.png resmine bakınız.

Etkinlikler(3)

4. Hesap makinesi benzeri yapıyı HTML5 ile

gerçekleştiriniz.

48

Etkinlikler(4)

5. Tablo ve form etiketleri ile aşağıdaki sayfayı

oluşturunuz:

49

Etkinlikler(6)7. Aşağıdaki sayfayı HTML5 etiketleri ile oluşturunuz.

� İpucu: Fieldsets ve Nested tabloları kullanınız.

50