BTP208 İnternet Programcılığı II HTML5 ve Getirdiği Yenilikler (2. Kısım) Hazırlayan Öğr. Gör. Özgür ÖZŞEN HTML5 Yeni Form Elementleri HTML5 işlevi fazla olan ve daha fazla form elemanı sunmaktadır Tarayıcı desteği aşağıdaki gibidir: 1
HTML5 Yeni Form Elementleri datalist Bu element, giriş alanı için ayarlar listesi belirler. Datalist in içinde option elementi ile liste oluşturur. Datalist e id vererek, listelerdeki veri girişlerinin değerleri alınabilir. Kullanıcı ilgili alanı doldururken girdiği her harf sonrasında listede yer alan uygun elemanlar metin alanın altında aşağı doğru açılmakta ve kelimenin tamamını yazmadan seçilerek metnin kutu içine yazılması sağlanmaktadır. <input type="url" list="url_list" name="link" /> <datalist id="url_list"> <option label="w3schools" value="http://www.w3schools.com"/> <option label="google" value="http://www.google.com" /> <option label="microsoft" value="http://www.microsoft.com" /> </datalist> İpucu: Option elementi daima bir value taşımalıdır. List özelliği Metin alanına girilebilecek önceden tanımlı içerik olduğunda listözelliği kullanılır. <input> typesiçindeki text, search, url, telephone, email, datepickers, number, range ve color ile beraber çalışır. Örneğin; <input type="text" id="illistesi" list="iller" placeholder="lütfen bir il seçiniz" > <datalist id="iller"> <option value="istanbul"> <option value="ankara"> <option value="izmir"> <option value="eskişehir"> <option value="erzurum"> <option value="hakkari"> </datalist> 2
HTML5 Yeni Form Elementleri keygen Bu elementin amacı kullanıcıları doğrulamak için güvenli bir yol sunmaktır. Keygen elementi anahtar grubu üretecidir. Bir form onaylandığında 2 anahtar üretilir, birisi özel(private) birisi de halka açık(public) anahtardır. Özel anahtar istemcide depolanır ve halka açık anahtar da sunucuya gönderilir. Halka açık anahtar, gelecekte kullanıcıyı doğrulamak için bir istemci sertifikası üretecektir. Şu anda, tarayıcı desteği için bu element yeterince güvenli ve uygun olmayan bir standarttır. <form action="demo_form.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form> HTML5 Yeni Form Elementleri Output Outputelementi, hesaplama veya scriptçıktısı gibi çıktının farklı türleri için kullanılır. <output id="result" onforminput="rescalc()"></output> 3
Yeni form özellikleri; autocomplete novalidate Yeni input özellikleri; autocomplete autofocus form form overrides(formaction, formenctype, formmethod, formnovalidate, formtarget) heightandwidth list min, maxandstep multiple pattern(regexp) placeholder required Tarayıcı desteği 4
autocomplete Özelliği Form ya da giriş alanının(inputfield) autocompleteile otomatik tamamlama özelliğine sahip olmasını sağlar. autocompleteform etiketi ile çalışır. Ayrıca; input->text, search, url, telephone, email, password, datepickers, range ve color ile de kullanılır. Bu özelliğe sahip olan bir alanda yazmaya başlayan kullanıcı, tarayıcı alandaki verileri doldurabilecek verilere dair ayarları görebilecektir. <form action="demo_form.asp" method="get" autocomplete="on"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> E-mail: <input type="email" name="email" autocomplete="off" /><br/> <input type="submit" /> </form> autofocus Özelliği <inputtype= email autofocus> Sayfa yüklendiği zaman otomatik olarak bu alan içinin aktif olmasını sağlar. Not: Tüm input elemanları ile çalışmaktadır. User name: <input type="text" name="user_name" autofocus="autofocus" /> height ve width özellikleri input type girişindeki resim için yükseklik ve genişlik atamasını sağlar. Not: sadece input type içindeki image da çalışır. <input type="image" src="img_submit.gif" width="24" height="24" /> 5
form Özelliği Bu özellik input alanlarının kendisinin içinde olsa da olmasa da verilen id ile input alanlarının form elemanına aitmiş gibi davranmasını sağlar. Not: tüm input türleri ile çalışır. Örnek; <form action="demo_form.asp" method="get" id="user_form"> First name:<input type="text" name="fname" /> <input type="submit" /> </form> Last name: <input type="text" name="lname" form="user_form" /> form override özellikleri Bazı özellik ayarlarında üst üste bindirme yapmanızı sağlar. Bunun aldığı özellikler ise; formaction, formenctype, formmethod, formnovalidate, formtarget. <form action="demo_form.asp" method="get" id="user_form"> E-mail: <input type="email" name="userid" /><br /> <input type="submit" value="submit" /> <br /> <input type="submit" formaction="demo_admin.asp" value="submit as admin"/> <br /> <input type="submit" formnovalidate="true" value="submit without validation"/> <br /> </form> Not: override özelliği input girişlerindeki submit ve image ile beraber kullanılır. Aynı zamanda farklı onay butonları oluşturmada kullanılabilir. 6
min, maxve step özellikleri Input türlerinden tarih ve sayı girişlerine sınırlamalar getirmek için kullanılır. Max: girilebilecek maksimum değer, Min: izin verilen girilebilecek en düşük değer, step özelliği sayı artış ya da azalış aralığını belirler. Not: <input type özelliklerinden tarih toplayıcıları, sayılar ve range ile kullanılır. Points: <input type="number" name="points" min="0" max="10" step="3" /> Proje <progress min="0" max="100" value="60">60%</progress> tamamlandı. <meter max="10"> 9 araba </meter> novalidate Bu özellik, onaya basıldığında verinin doğrulanmamasının gerektiğini belirtir. Requirealanlar dahi kontrol edilmez. Not:<form> ve devamındaki <input> türlerinden text, search, url, telephone, email, password, date pickers, rangeve color ile çalışır. <form action="demo_form.asp" novalidate="novalidate"> E-mail: <input type="email" name="user_email" /> <input type="submit" /> </form> pattern özelliği Posta Kodu: <input id="zip" name="postakodu" pattern="[\d]{5}(-[\d]{4})"> Girilecek olan alanın 5 haneli ve yalnızca rakam olduğunu göstermektedir. Okunabilirlik konusunda HTML5 in yapısına biraz aykırı görünse de, programcılar için pattern tanıdık bir özelliktir. Tarayıcı tarafından bu kontrolün yapılması da HTML5 in güzel bir özelliğidir. Not: <input> türlerinden text, search, url, telephone, email, ve password ile çalışır. Country code: <input type="text" name="country_code" pattern="[a-z]{3}" title="three letter country code" /> <inputname="txt" type="text" pattern="[0 9]{4} [0 9]{3} [0 9]{2} [0-9]{2}\D{5,}" /> 7
Placeholder Özelliği Veri giriş alanları için yer tutucu bir metin tanımlamak için kullanılır. Tanımlanan bu metin elemana girilecek veri için bir ipucu içerir. Kullanıcı belirtilen elemana odaklandığında tanımlanan bu değer kaybolur, valueözelliği varsayılan bir değer tanımlaması yaparken, placeholder özelliği ise sadece bir ipucu tanımlaması yapar. HTML denönce bu gibi bir kullanım için çeşitli scriptlerkullanmak gerekmekteydi. Tarayıcının bu özelliğe destek vermemesi halinde, metin kutusunun içi boş olarak görünecektir. Not; <input> türlerinden text, search, url, telephone, email, ve passwordile çalışır. Alan boş olduğunda ipucu gözükebilmekte odaklanıldığında kaybolmaktadır. <form id="form1"> <input name="txt" type="text" placeholder="sadece adınızı giriniz!" /> <input type="submit" value="gönder" /> </form> required özelliği <input type= text required> Form gönderildiğinde bu alanın tarayıcı tarafından boş olup olmadığı kontrol edilmektedir. HTML5 den önce bu doğrulama için çeşitli scriptlerkullanmak gerekmekteydi. Not:Bu özellik <input> text, search, url, telephone, email, password, date pickers, number, checkbox, radio ve file ile kullanılmaktadır. <!DOCTYPE html> <html> <head> <meta charset="utf-8,tr" /> <title>required özelliği</title> <style type="text/css"> label { display: block; width: 300px; } </style> </head> <body> <h3>kullanıcı Kaydı</h3> <form action="kayit.aspx" method="post"> <label for="email"> E-mail adresi </label> <input id="email" type="email" required name="email" size="20"> <label for="text1"> Adı Soyadı </label> <input id="text1" type="text" required name="txt" size="20" /> <br> <input type="submit" value="kullanıcı Oluştur!"> </form> </body> </html> 8
multiple özelliği multiple özelliği bir input alanı için seçilebilen çoklu değerler sağlar. multipleözelliğini kullanarak arada virgül/noktalı virgül olmak kaydıyla birden fazla değer seçilebilir. Not: input types içindeki; email ve file ile kullanılır. <input name="email" type="email" multiple list="liste" /> <datalist id="liste"> <option value=zeynep@hotmail.com /> <option value="harun@hotmail.com" /> <option value="yigit@ornek.com" /> <option value="elif@ornek.com" /> </datalist> 9
10
11
12
13
HTML ve HTML5 Özellikleri (Attributes) 14
HTML ve HTML5 Özellikleri (Attributes) HTML ve HTML5 Olay Özellikleri (Attributes) Genel Olay Özellikleri HTML 4 de tarayıcıya, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi. Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamaktadır 15
HTML ve HTML5 Olay Özellikleri (Attributes) Window(pencere) Olay Özellikleri: Window nesnesi için olay tetikleyicileri. <body> etiketine uygulanmaktadır. Form Olayları HTML ve HTML5 Olay Özellikleri (Attributes) Bir HTML formu içerisinde olay tetiklenir. Tüm HTML5 elementlerine uygulanmaktadır ancak daha çok form elementlerine uygulanır: 16
HTML ve HTML5 Olay Özellikleri (Attributes) Klavye Olayları Olaylar klavye ile tetiklenir. Tüm HTML5 elementlerine uygulanır. HTML ve HTML5 Olay Özellikleri (Attributes) Mouse(Fare) Olayları Fare ve benzeri kullanıcı davranışları ile olay tetiklenir: Tüm HTML5 etiketlerine uygulanır. 17
HTML ve HTML5 Olay Özellikleri (Attributes) Media Olayları: Video, imaj ve ses gibi medyalarca tetiklenir. Tüm HTML5 elementlerine uygulanır. HTML ve HTML5 Olay Özellikleri (Attributes) 18
Sorular? 19