ÖZniteliklerinde Yeni Form Elemanlarının nitelikleri

HTML5, yeni form öğeleri tanıtır ve tüm form öğelerine birkaç yeni özellik sunar. Web sayfalarını tasarlarken ve oluştururken, bu yeni nitelikleri ve yetenekleri herhangi bir form öğesine uygulayabilirsiniz:

• otofokus : Bu özniteliğe sahip bir öğe, ilk kullanıcı girişinin odağıdır. Otomatik odaklama özniteliğini formun ilk öğesine uygulamak ve form başına yalnızca bir otomatik odaklanma alanına sahip olmak yaygın bir uygulamadır. Kod şöyle:

  ad 
  Tarayıcı otomatik odaklama özniteliğini kabul etmiyorsa, zararlı bir şey olmaz ve yine de JavaScript tabanlı bir çözüm kullanabilirsiniz.
  

• desen : Bununla formu doğrulamak için kullanılan normal bir ifade belirtebilirsiniz. İçerik normal ifade ile eşleşirse, alan geçerli kabul edilir. Bu özniteliği yalnızca standart doğrulama teknikleri yeterli olmadığında kullanın; normal ifadelerde hata ayıklamak zor olabilir.

  Bir desen belirlediğinizde, örnek kodda olduğu gibi desenin ne olduğunu belirtmek için bir başlık özniteliği de ekleyin:

  Tarayıcı, bunu kullanıcı için bir ipucu olarak kullanabilirsiniz. Desen bilgilerini yer tutucu metin olarak eklemek de yararlı olabilir.

  yer tutucu : Yer tutucu, bir etiket etiketi gerektirmeden bir metin alanının amacını gösteren geçici bir etiket görevi görür. Kullanıcı alanı etkinleştirir etkinleştirmez, yer tutucu metin kaybolur. Basit kodun bir örneği:

  Tüm tarayıcı yer tutucu metni desteklemez ve bazıları yer tutucu özniteliğini yok sayar. Aynı şekilde, alan zaten doldurulmuşsa, yer tutucu görünür olmayacaktır. Kullanıcılar her metin alanına ne yazacaklarını bildirecekleri için bu sebeplerden dolayı bir etiket ekleyin.

  Yer tutucu metin, girdinin nasıl biçimlendirileceğini belirtmek için özellikle yararlıdır (özellikle doğrulama veya desenle zorlanacaksa).

• gerekli : Desteklenen tarayıcılar, doldurulmazlarsa, gerekli tüm alanları işaretleyecektir (belki de kırmızı renkle vurgulayarak). Bazı tarayıcılar kullanıcı ile bir form göndermeye çalışırsa da bir uyarı gönderecektir gerekli alanları boşaltın.

  Özel: gerekli sahte sınıf, formunuzdaki tüm gerekli öğelere CSS stili uygulamanıza izin verir (örneğin, kenarlık veya arka plan rengi vererek). Gerekli öğeleri kırmızı bir çerçeve ile işaretlemek için CSS stiline bir örnek:

  : required {border: 1px solid red;}
  

  Gerekli alan varsa (gerekli nitelikle birlikte), geçersiz sayılacaktır. Bir miktar değer içerir.

  Doğrulama: Form doğrulama, Web geliştirme işleminin en zor kısımlarından biridir. Kullanıcı bilgilerini soracak bir form oluşturmak oldukça kolaydır, ancak kullanıcının bilgilerin doğru bir şekilde girdiğinden emin olmak oldukça zor olabilir.

  HTML5 size yardımcı olur. Özel amaçlı giriş öğelerini kullandığınızda, tarayıcı form alanının uygun bir biçimde olduğundan emin olmak için otomatik olarak kontrol edecektir. Giriş geçerli değilse, form genellikle gönderilmez ve geçersiz alanla ilgili özel: geçersiz CSS sahte sınıfı ilişkilendirilir. Geçersiz durum:

  : geçersiz {background-color: red;}
  

  Bu CSS durumu etkin olduğunda, geçersiz alanların tümü: geçersiz stil özelliklerine sahip olacaktır. Örneğin, bir renk alanınız varsa ve burada tanımlanan kırmızı arka plan CSS stili varsa, kullanıcı geçerli bir renge girmedikçe renk alanının kırmızı bir arka planı olur (tanınan bir renk adı veya altı renk değeri). Aynı şekilde, geçerli bir e-posta adresi girilene kadar e-posta alanı kırmızı renkte gösterilir. Forma başka bir kod eklemenize gerek yoktur. Geçersiz girişleri görüntülemek için CSS eklemeniz yeterlidir ve gerisini tarayıcı kullanacaktır.

  Bu öğeye novalidate özniteliğini ekleyerek herhangi bir alanın geçerliliğini kapatabilirsiniz.

  Tarayıcının tüm alanları doğrulanana kadar bir formu işleme reddetmesi mümkündür, ancak bu davranış henüz HTML5 uyumlu tarayıcılar arasında evrensel görünmemektedir.