Ders_33 HTML Form Elemanları

HTML Formlarında <input> Elemanı

<input> elemanı, en önemli form elemanıdır ve farklı tipleri (type) vardır. type özelliğine atadığımız değerler ile, farklı türlerde input elemanı oluşturabiliriz.

Bu form elemanını daha ayrıntılı tanımak için bir sonraki dersimize bakınız.

<select> Elemanı (Drop-Down Listeleri)

<select> elemanı, aşağıya doğru açılan (drop-down) bir liste yapar. Aşağıdaki örneğe dikkat edelim:

<select name="arabalar">
<option value="araba1">Volvo</option>
<option value="araba2">Saab</option>
<option value="araba3">Fiat</option>
<option value="araba4">Audi</option>
</select>

Yukarıdaki <select> elemanının çıktısı şöyle olacaktır:

Volvo Saab Fiat Audi

Görlüdüğü gibi, listemizin her bir elemanını <option> tagı ile tanımlıyoruz.

Normalde, listenin ilk elemanı, sayfamızda önseçili görünen eleman olur. Fakat bu durum zorunlu değildir. İstediğimiz bir <option> tagına, selected özelliği ekleyerek, onu önseçili hale getirebiliriz. Örneğe dikkat edelim:

<select name="arabalar">
<option value="araba1">Volvo</option>
<option value="araba2" selected>Saab</option>
<option value="araba3">Fiat</option>
<option value="araba4">Audi</option>
</select> 
Yukarıdaki, form elemanı şöyle görünecektir:

Volvo Saab Fiat Audi

<textarea> Elemanı

<textarea> elemanı, birden fazla satırı olan bir metin bölgesi oluşturmamızı sağlar. Örneğe dikkat edelim:

<textarea name="mesajiniz" rows="10" cols="30">
iletmek istediğiniz talebinizi lütfen buraya yazınız...
</textarea>

rows="10" ve cols="30" özellikleri, oluşturacağımız textarea'nın satır ve sütun değerleridir. Yukarıdaki <textarea> elemanı şöyle görünecektir:

ben bir html öğrencisiyim...

<button> Elemanı

<button> elemanı, tıklanabilir bir düğme oluşturur. 

onclick özelliğine atadığımız değer ile, bu düğmeye tıklandığında, yapılmasını istediğimiz olayı belirtiriz. Örneğe dikkat edelim:

<button type="button" onclick="alert('Hepiniz hoş geldiniz!')">Buraya tıklayın!</button>  

Bu form elemanı şöyle bir düğme oluşturacaktır:

HTML5 Form Elemanları

Aşağıdaki form elemanları HTML5 ile birlikte gelen yeni elemanlarıdır.

• <datalist>
• <keygen>
• <output>

Bu elemanlar, yeni oldukları için, web tarayıcılar tarafından tanınamayabilirler. Fakat, tarayıcılar, tanıyamadıkları elemanları yoksayarak diğer elemanları okumaya devam ederler. Yani, yeni elemanlar, okunamasalar bile, sayfanızı bozmayacaktır.

HTML5 <datalist> Elemanı

Kullanıcılara, öntanımlı veriler sunarak işlerini kolaylaştırır. <select> elemanına benzer biçimde kullanılır ve çalışır. Örneğe dikkat edelim:

<form action="aksiyon.php">
<input list="web tarayıcılar" name="web tarayıcılar">

<datalist id="web tarayicilar">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist> 
</form>

Not: <datalist> elemanı safaride, IE9 ve daha önceki sürümlerinde çalışmaz.

HTML5 <keygen> Elemanı

<keygen> elemanı, ullanıcıların, gerçek kullanıcılar olduğu anlamak için, güvenli bir metot oluşturur.

<keygen> elemanı, formda, bir anahtar çifti oluşturmak için bir eleman oluşturur.

Form gönderildiğinde, biri özel biri genel olmak üzere iki anahtar oluşturulur.

Özel anahtar, kullanıcının tarayıcısında; genel anahtar ise sitenin serverında saklanır.

Gelecekte, aynı kullanıcıyı, bu iki anahtarın doğru eşleşmesi ile tanımak mümkün olacaktır.

Keygen bölgesi içeren bir form örneği:

<form action=" ">
Ad: <input type="text" name="kullanici">
Şifreleme: <keygen name="guvenlik">
<input type="submit">
</form>


Yukarıdaki form şöyle görünecektir:

Kullanıcı Adı:


Şifreleme:

HTML5 <output> Elemanı

<output> elemanı, bir hesaplamanın sonucunu verir.

Örneğe dikkat edelim:

<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range"  id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>

Örnek biraz karışık gelebilir. Bu formun çıktısı şöyle olacaktır:

0  100 +  = 

Eşittirden sonra; + işaretinin sağında ve solunda girilen değerlerin toplamını almanız gerekiyor.

sonraki ders için tıklayınız