HTML5 formları, önceki sürümlerine göre önemli ölçüde daha fazla işlev sunsa da, aynı şekilde kolayca tanımlanabilirler.
HTML5 gerçekten de çok sayıda yeni alan türü sunuyor. Mevcut tarayıcılar tarafından desteklenmeleri şu anda oldukça iyi durumda. Ancak burada yalnızca pratik şekilde kullanılabilen alan türlerinden bahsedeceğim.
Renk Seçici
Ziyaretçilere bir renk seçme imkanı sunabilirsiniz.
Böyle bir alana tıkladığınızda, tipik bir renk seçici açılır.
Aracılığıyla istenilen rengi seçebilirsiniz. Bu tür bir renk seçici, <input type="color" /> ile tanımlanır.
Favori renginizi seçin: <input type="color" name="lf" />
Alanda her zaman bir değer atanmalıdır. Bu değer eksik veya geçersizse otomatik olarak #000 (yani Siyah) alınır.
Tarih ve Saat
HTML5'te tarih ve saat bilgileri için alan türleri açısından birçok yenilik bulunmaktadır. Ve bu alan türleri gerçekten de bazen karmaşıklıktadır. Örneğin, ziyaretçilere bir tarih seçme alanı sunmak istediğinizde ne gibi adımların gerektiğini düşünün. Genellikle burada JavaScript (veya Flash) olmadan hiçbir şey yapılamaz. Ancak HTML5 sayesinde artık bu çok daha kolay. Burada sadece date tipinde bir giriş alanı tanımlamanız gerekmektedir.
<input type="date" />
Takvim görüntüsü ve uygulaması sadece tarayıcı tarafından sağlanmaktadır. Tarayıcılar, takvim görüntüsünü göstermek için uygun bir Widget gösterecektir. Google Chrome'da bir uygulama şu şekildedir:
date ile bir takvim tanımlanır, böylece kullanıcılar istedikleri tarihi seçebilirler. Seçim yapıldıktan sonra tarih otomatik olarak metin alanına eklenir.
Aynı şekilde, saat alanı da kolayca oluşturulabilir. Bu amaçla time tipinde bir alan kullanılır.
<input type="time" />
time ile tarayıcıların saat seçim kontrollerini göstermesi amaçlanır.
Benzer şekilde, week de rahatlıkla kullanılabilir. Bu alan, bir hafta seçme alanını gösterir.
<input type="week" />
Ek olarak, bir ay seçme alanı da gösterilebilir.
<input type="month" />
Her iki alan türü de, istenilen bilgileri ayarlamak için kontrol elemanlarının görüntülenmesini sağlar.
time ve date, sadece tarih seçimini veya sadece saat seçimini mümkün kılarken, datetime ve datetime-local her iki seçeneği birleştirmeyi sağlar.datetime'da tarih seçimi ve saat seçimi alanı yan yana gösterilir. (Şu anda sadece Safari ve Opera tarafından desteklenmektedir).
Bu bölümde tanıtılan form alanlarının şu anda tüm tarayıcılar tarafından desteklenmediği zaten belirtilmişti. Bunları yine de kullanmak isteyenler, ilgili JavaScript çözümlerine başvurabilirler. jQuery ve Dojo gibi büyük JavaScript çatıları, uygun betikler sunmaktadır. jQuery UI için aşağıdaki gibi görünebilir:
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
/* <![CDATA[ */
$(document).ready(function() {
$("#datepicker").datepicker();
});
/* ]]> */
</script>
</head>
<body>
<input type="text" id="datepicker" />
</body>
</html>Böylece, tarayıcı klasik date'i desteklemese bile güvende olacaksınız.
Rakam Alanları
number ile, başlıca rakamların girilmesi için özel olarak tasarlanmış bir alan sunulmaktadır.
En basit durumda, bir number alanı şu şekilde tanımlanabilir:
<input type="number" />
Rakamlar bu tür alanlara iki şekilde girilebilir:
• Klavye üzerinden
• Kontrol öğeleri üzerinden
Ekstra özellikler belirterek number alanları daha detaylı olarak tanımlanabilir. İlk olarak belirtilecek olan min ve max iki özniteliği, alanların değer aralıklarını belirlemek için kullanılabilir.
• min – en küçük değer
• max – en büyük değer
Bu iki öznitelik sadece tarayıcının kontrol öğeleri açısından etkilidir. Kullanıcıların klavye ile gerçekleştirdiği manuel girişleri bundan etkilenmez.
Hem tam hem de ondalık sayılar bu iki niteliğe atanabilir.step özniteliği ile tarayıcının kontrol öğeleri aracılığıyla hangi adımların izlenmesi gerektiği belirtilebilir.
<input type="number" min="0" max="8" step="2" />
Bu durumda tarayıcının kontrol öğeleri aracılığıyla sadece 0, 2, 4, 6 ve 8 değerleri seçilebilir.
Kaydırma Çubuğu
range alanları, belirlenmiş bir değer aralığında değer seçmeyi sağlar.
Tarayıcılar range alanını bir kaydırma çubuğu ile yorumlar.
<input type="range" min="0" max="10" step="2" value="6">
En küçük değer min özniteliği ile belirtilir. max en yüksek değeri tanımlar. Eğer min ve max öznitelikleri yoksa, tarayıcılar varsayılan olarak 0 ve 100 değerlerini kullanır.step, adım dizisini tanımlamak için kullanılır.
Arama Alanları Oluşturma
search öncelikle herhangi bir işlevi yoktur. Daha çok klasik metin giriş alanının bir tamamlayıcı elemanıdır. search alanlarının amacı, sadece bu alanların basit metin alanlarından görsel olarak farklılaşmasıdır. Genellikle tarayıcılar search alanının görünümünü üzerine almak isterler.
<input type="search" />
Nasıl uygulayacakları üreticilere bağlıdır. İyi bir kombinasyon, results özniteliğinin eklenmesidir.
<input type="search" results="5" placeholder="Ara..." />
results ile kaç önceki arama girişinin alan içinde gösterileceği belirlenir.
Ancak dikkat: results özniteliği HTML5 spesifikasyonunun bir parçası değildir.
