mobile-logo
Top

form Tag

  • All
  • Dijital pazarlama
  • Dijital, İyi Şeyler Podcast
  • E-Ticaret
  • Eğitim
  • Growth hacking
  • İnceleme
  • Kişisel
  • Rehber
  • Reklam
  • Sosyoloji
  • Teknoloji
  • Wordpress

Genel Olay Özellikleri

HTML 4; tarayıcıda, olaylara tetikleme izni vermiştir, tıpkı bir elemente tıklayınca çalışan Javascript gibi.

Javascript ve nesneye yönelik HTML de anlatacaklarım listesinde.

Aşağıdaki genel olay özellikler HTML5 içerisinde olayların etkileşimde bulunmasını sağlamakta.

Yeni : HTML5’teki yeni olay özellikleri.

Window(pencere) Olay Özellikleri

Window nesnesi için olay tetikleyicileri.

<body> tag’ına uygulanırlar:

ÖzellikDeğerTanım
onafterprint  YeniscriptBelge basıldıktan sonra çalışır
onbeforeprint  YeniscriptBelge basılmadan önce çalışır
onbeforeonload  YeniscriptBelge yüklenmeden önce çalışır
onblurscriptPencere odaklanmasını kaybedince çalışır
onerror   YeniscriptBir hata gerçekleştiğinde çalışır
onfocusscriptPencereye odaklandığında çalışır
onhaschange  YeniscriptBelge değiştirildiğinde çalışır
onloadscriptBelge yüklendiğinde
onmessage  YeniscriptMesaj tetiklendiğinde
onoffline  YeniscriptBelge çevrimdışı olduğunda
ononline  YeniscriptBelge çevrimiçi olduğunda
onpagehide  YeniscriptPencere gizli olduğunda
onpageshow YeniscriptPencere görünür olduğunda
onpopstate  YeniscriptPencerenin tarihi değiştiğinde ya da durumu
onredo  YeniscriptBelge bir tekrar yapma işlemine sahne olduğunda
onresize  YeniscriptPencere yeniden boyutlandırıldığında
onstorage  YeniscriptBir belge yüklendiğinde
onundo  YeniscriptBelge bir geri alma işlemine sahne olduğunda
onunload  YeniscriptKullanıcı belgeden ayrılınca


Form Olayları

Bir HTML formu içerisinde olay tetiklenir.

Tüm HTML5 elementlerine uygulanır,fakat çoğu form elementlerine uygulanır:

ÖzellikDeğerTanım
onblurscript bir element odaklanmasını yitirdiğinde
onchangescriptbir elment değiştiğinde
oncontextmenu Yeniscript bir kaynak menu tetiklendiğinde
onfocusscript Bir elemente odaklanıldığında
onformchange Yeniscript Bir form değiştiğinde
onforminput Yeniscript Bir form kullanıcı veri girişi aldığında
oninput Yeniscript Bir element veri girişi aldığında
oninvalid Yeniscript Bir element doğru olmadığında (invalid)
onresetscript Bir form resetlendiğinde
HTML5 desteklemiyor
onselectscript Bir elment seçildiğinde
onsubmitscriptBir form onaylandığında

Continue reading

by

Form attributes yani;

Yeni form özellikleri;

  • autocomplete,
  • novalidate

Yeni input özellikleri;

  • autocomplete,
  • autofocus,
  • form,
  • form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget),
  • height and width,
  • list,
  • min, max and step,
  • multiple,
  • pattern (regexp),
  • placeholder,
  • required,

Tarayıcı desteği;

AttributeIEFirefoxOperaChromeSafari
autocomplete8.03.59.53.04.0
autofocusHayır4.010.03.04.0
formHayır4.09.510.0Hayır
form overridesHayır4.010.510.0Hayır
height and width8.03.59.53.04.0
listHayır4.09.5HayırHayır
min, max and stepHayırHayır9.53.0Hayır
multipleHayır3.511.03.04.0
novalidateHayır4.011.010.0Hayır
patternHayır4.09.53.0Hayır
placeholderHayır4.011.03.03.0
requiredHayır4.09.53.0Hayır

autocomplete Özelliği

Form ya da giriş alanının(input field) autocomplete ile otomatik tamamlama özelliğine sahip olmasını sağlar.

Not; Form etiketi ile çalışır autocomplete. Ayrıca; input->text, search, url, telephone, email, password, datepickersi 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 şeylere dair ayarları göstermeye başlayacaktır.

Örnek ve deneme adresi için;

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

Not; bazı tarayıcılarda aktif etmeniz gerekebilir bu özelliği.

Continue reading
by

HTML5 birkaç yeni elemente ve özelliğine sahip formlar için.

Yeni form elementleri;

  • datalist
  • keygen
  • output

Tarayıcı desteği

ÖzellikIEFirefoxOperaChromeSafari
datalistHayır4.09.5HayırHayır
keygenHayır4.010.53.0Hayır
outputHayırHayır9.510.0Hayır

datalist Elementi

Giriş alanı için ayarlar listesi belirler bu element.

Datalist’in içinde option elementi ile liste oluşturur.

Datalist’e id vererek, listelerdeki veri girişlerinin değerlerini alabilirsiniz;

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

Deneme adresi…

İpucu;  Option elementi daima bir value taşımalı.

Continue reading
by

HTML ile kendi web sayfalarınızı oluşturabilirsiniz.  W3Schools.com ‘dan yapacağım bu çeviriler ile HTML’yi kolaylıkla öğrenebileceksiniz. HTML’nin öğrenmesi kolaydır ve zevkli bulacaksınız bu dili.

Başlangıç olarak bilgi; çevirileri(başlıklar hariç) çift tırnak içinde göstereceğim. Kendi yazdıklarım normal yazı olarak kalacak. Anlatacaklarımı uygulayabilmeniz için ilk önce denetim masasından klasör seçeneklerini bulmanız ve klasör uzantılarını göster halini seçmelisiniz. Ardından istediğiniz bir alanda(mesela masaüstünde) bir klasör açın web ismini verin. Klasörün içine girin(fare ile çift tık). Fare ile sağ tuş tıklayın ve metin belgesi(yeni metin.txt diye yazar) dosyasını oluşturun. Biz bu yeni metin.txt dosyası ile HTML dosyalarımızı oluşturacağız. Yeni metin.txt dosyasını açın ve farklı kaydete tıklayın. Açılan pencerede isim kısmına index.html yazın ve kaydedin web klasörümüzün içine. index.html klasörüne çift tıklayın ve browser(chrome, firefox, opera, internet explorer gibi)’da görebilelim. Artık web klasörümüzün içinde yeni metin.txt ve index.html adlı iki dosya olacağını biliyorsunuz ve artık hazırsınız. Bunu hazırlayamadıysanız bile, örnekleri uygulayabilmeniz için W3Schools‘taki metin editörünü paylaşmış olacağım. Sol taraftaki verileri silip, etiketleri(anlatacağım) yazarsınız ve edit and click me yazan yere basarsınız sağ tarafta da web sayfasının durumunu görebilirsiniz böylece. Bu benim ilk çalışmam. Umarım hepimize yararlı olur. Anlaşılmayan yerleri yorum olarak yazabilirsiniz/sorabilirsiniz. Kolay gelsin.

HTML, Formlar ve Girişler

En önemli konu bence. Benim en çok zorlandığım konuydu zamanında yanlış öğrendiğim için. Ama siz, daha şanslısınız.

HTML formları bir server’a veya kurucuya Türkçesi ile, veri göndermek için kullanılır. Daha doğrusu kullanıcıdan veri elde etmek için.

Bir form, giriş elemanları içerebilir. Yazı alanları(text fields), checkbox’lar(çoklu seçim kutuları, üzerlerinde tik olabilen kare kutucuklar), radio-button’lar (radyo butonları tekli seçime izin verirler), submit button’lar (onaylama butonları, girilen verileri göndermeye yarar) ve daha fazlası gibi… Bir form, seçim listeleri, textarea, fieldset, legend ve etiket elemanları da içerebilir. Hepsi açıklanacak bu derste.

Misal;

<form>
.
input elements
.
</form>

HTML Formları – Giriş Elemanları

En önemli form elemanlarından biri giriş elemanlarıdır.

Giriş elementleri kullanıcının bilgisini seçmesini ya da girmesini sağlar.

Bir giriş elemanı type özelliğine göre değişiklik gösterir. Bir giriş elemanı yazı alanı girebilmek için, kendisine uyan şıklara tik atmak için, şifre girmek için password yani, radio button’dan seçim yapmak için, girdiği verileri onaylamak ya da resetlemek gibi daha fazla şey olabilir.

En çok kullanılan girişler aşağıda anlatılacaktır.

Continue reading
by

Yine yazılı bir izin olmaksızın alıntı yapma yasağı var bu kitapta. Bu yüzden içeriğinden alıntı yapmadan anlatacağım ancak.Kitap; Dikeyeksen Yayıncılık tarafından basılmış, Şubat 2011 birinci baskısı.  Sayfa ve baskı kalitesi çok yüksek. 239 sayfa. Ertuğrul Haskan'ın özverili çalışması ile hazırlanmış. İlk baştaki yazma amacı herkesin...

by