Html 5 ile gelen form elemanları
4250 0

Html5 İle Gelen Form Elemanları

Bu başlık altında html5 ile gelen yeni form elemanlarından ve bunların kullanımlarından bahsedeceğim. Dikkat edilmesi gereken henüz bu elemanların tüm tarayıcılarda verimli çalışmadığıdır. Kısa süre içerisinde tüm tarayıcılarda standart hale gelecektir. Aşağıda tüm inputların ortak özelliklerini yazalım ve diğer başlıklar altında bahsettiğimiz nesneye has özelliklerden bahsederiz.

Özellik Açıklama Aldığı Değerler
value Metin kutusunun içerisindeki değeri değiştirir. Karakter
name Her form elemanının kendine has bir ismi olmak zorunda Karakter
maxlength Metin kutusuna yazılacak karakterleri sınırlandırmak için kullanılır.
Yukarıda 15 karakter ile sınırlandırılmış.
Sayısak değer
size Metin kutusuna karakter cinsinden bir genişlik vermek için kullanılır.
Yukarıdaki mrtin kutusu 30 karakter genişliğe sahip.
Sayısal değer
type Tüm input elementlerinde olması gereken ve o nesnenin tipini belirten özellik.
Yukarıda metin kutusu için aldığı değer "text" dir.
color, date,  datetime,  datetime-local,  email,  month,  number,  range,  search, tel, time,  url, week
autocomplete Html5 ile gelen bir özellik, önceden kayıtlı verilerin çıkmasını engeller. Siz bir metin kutusuna bir şeyler yazmaya başladığınızda daha önceden benzer bir şeyler yazılmışsa otomatik olarak tarayıcı bunları çıkarır, bu durumu engellemek için değeri "off" yapılmalıdır. on | off
autofocus Html5 ile gelen bir özellik, sayfa yüklendiğinde otomatik olarak odaklanılmasını istediğiniz input elemanına yazabilirsiniz. autofocus
placeholder Html5 ile gelen bir özellik, başlangıçta metin kutusu içerisinde görünmesini istediğiniz metni yazabilirsiniz. Tıklanıp yeni bir metin yazılmaya başlandığında kaybolacaktır. Karakter
required Bir input alanının boş bırakılmasını istemiyorsanız zorunlu hale getirmek için kullanılır. required
pattern Html5 ile gelen bir özellik, regexp yazım formatı ile kullanıcıyı istediğiniz formata uygun veri girişine zorlamanız mümkün.  Regexp
disabled Metin kutusunu pasif duruma getirir, veri girişine izin verilmez. disabled

Bu özelliklerin kullanımlarına örnek vermeye çalışalım;

Kullanıcı adı ve şifre istenen bir formumuz olsun. Kullanıcı adının 25 karaterden fazla olmasını istemiyorsanız, şöyle bir kısıtlama yapılabilir.

<form action="" method="get" name="formDeneme">
	<input type="text" name="kullanici_adi" maxlength="25"/> <br/>
	<input type="password" name="sifre"/> <br/>
	<button type="submit" name="gonder">Gönder</button>
</form>

Örnek Form

"maxlength" ile girilecek azami karakter sayısını belirtebilirsiniz.


Böyle bir formda metin kutularının daha açıklayıcı olmasını isteyebilirsiniz. Bu durumda html-5 ile gelen bir özellik olan "placeholder" işinizi görecektir.

<input type="text" name="kullanici_adi" placeholder="Kullanıcı Adı"/> <br/>
<input type="password" name="sifre" placeholder="Şifre"/> <br/>

Placeholder

Görüldüğü gibi çok daha açıklayıcı oldu. Metin kutusu içerisine tıklanıp bir şeyler yazılmaya başlanırsa bu açıklayıcı yazılar kaybolur. 


Form yüklendiği anda bir input elemanının aktif olmasını isterseniz "autofocus" bu probleminizi çözer.

<input type="text" name="kullanici_adi" autofocus="on" placeholder="Kullanıcı Adı"/>

Autofocus

Görüldüğü gibi sayfa yüklendiği anda kullanıcı adı metin kutusu aktif halde.


Metin kutusuna daha önce değerler girilmiş ve form gönderilmiş ise tekrar giriş yapıldığında otomatik tamamlama işlemi yapılır. Bu olayın istenmediği hallerde "autocomplete" özelliği "off" yapılmalıdır. Aşağıdaki resimde "off" edilmemiş hali görülmekte.

Autocomplete

<input type="text" name="kullanici_adi" autocomplete="off" placeholder="Kullanıcı Adı"/>

Bu kodu yazarsanız otomatik tamamlama yapılmayacaktır.


Formda veri girilmesi zorunlu alanlarınız varsa bu alanların boş bırakılmaması için "reqired" özelliğini kullanın. Bu alana veri girişi yapılmadan formun gönderilmesine izin verilmez.

<input type="text" name="kullanici_adi" required placeholder="Kullanıcı Adı"/>

Required

Kullanıcı adı alanı boş bırakılıp Gönder butonuna tıklandığında oluşan görüntü yukarıdaki gibidir.


Number (Sayı) İnput Elemanı

Sayısal verilerin daha rahat alınabilmesi için kullanılan nesnedir. Değer elle girilebilir veya yandaki yukarı aşağı butonları ile giriş yapılabilir.

<input type="number" name="sayi1" step="3"/>

Number Nesnesi

Number Nesnesine Ait Özellikler

Özellik Açıklama Aldığı Değerler
step Number nesnesinin artış miktarını belirtir. Yandaki oklara tıklayarak artırma yada azaltma yapılabilir. Sayısal Değer

Output Elemanı

Görsel programlama dillerinde kullanılan label nesnesine benziyor. Adından da anlaşılacağı üzere tarayıcıda bir çıktı oluşturmak için kullanılıyor. 

<output name="deneme">Deneme Çıktısı</output>

Output elementi

Meter Elemanı

Bu element sayesinde görsel bir şekilde bir oran değerini gösterebileceksiniz. Bu gibi durumlar için hesaplamalar ve görsel çalışmalar yapmanıza gerek kalmaz. Toplam aralığı ve eldeki değeri belirtin olsun bitsin.

<meter value="25" min="0" max="100"></meter>

Meter Elementi

Eğer belli aralıktaki değerleri farklı renklerde göstermek isterseniz "low" ve "high" özelliklerini kullanmalısınız. 

<meter value="25" min="0" max="100" low="50" high="70"></meter>

Meter Elementi 2

Yukarıda not sistemine göre bir ayarlama yapmaya çalıştık. 0-100 arasında 25 notunun renklendirme işleminin sonucunda sarı renkte göründü. Halbuki kırmızı görünmesi daha gerçekçi olurdu. Burada "optimum" değeri belirtirsek renklerde daha doğru sonuçlar elde ederiz. Aynı örneği "optimum" değeri vererek uygulayalım.

<meter value="25" min="0" max="100" low="50" high="70" optimum="100"></meter>

Meter Elementi 3

<meter value="75" min="0" max="100" low="50" high="70" optimum="100"></meter>

Meter Elementi 4

Gördüğünüz gibi low değerinden küçük değerler kırmızı, low-high arası sarı, high üzeri yeşil renkte görünüyor.

Meter Elemanı Özellikleri

Özellik Tanım Aldığı Değerler
min Belirtilecek aralığın minimum değerini temsil eder. Sayısal Değer
max Belirtilecek aralığın maximum değerini temsil eder. Sayısal Değer
value min ve max ile belirtilen aralıkta gösterilecek değeri temsil eder. Sayısal Değer
low-high Renk değerlerinin aralığını belirtmek için kullanılırlar. Sayısal Değer
optimum Renk değerlerinin değişim aralığını ayarlamak için kullanılır. Sayısal Değer

Progress Elemanı

Meter elemanı ile neredeyse aynı görünüme ve amaca sahip, aradaki fark görüntü. Progress elemanı daha çok yükleniyor efektine sahip. Görünümü ve kullanımına aşağıda bir örnek verelim.

<progress id="yukleniyor" max="100" value="45"></progress>

Progress Elementi

 

^
X