Html ile Web İşlemleri 27 - Diğer Form Elemanları

FORM ELEMANLARI

3.7.3.3. <select>, <option>, <optgroup> Seçim Listesi Etiketleri

Seçenek sayısının çok fazla olduğu durumlar için <select> etiketi ile seçim listesi oluşturulur.
<option> etiketi, seçim listesi ögelerini belirtir (Görsel 3.43). <optgroup> etiketi, liste elemanlarını
gruplandırır. <select> etiketi bir veya birden fazla <option> etiketi içerir. <optgroup> etiketlerini
gruplandırır. <select> etiketi bir veya birden fazla <option> etiketi içerir. <optgroup> etiketleri
iç içe kullanılmaz. Multiple özelliği ile çok seçimli, size özelliği ile kaç seçenek görüneceği belirlenerek
sabit veya aşağıya açılan listeler oluşturulur.

<select name="iller" size="1">
<option value="plaka54">Sakarya</option>
<option value="plaka06">Ankara</option>
<option value="plaka34">İstanbul</option>
</select>

Görsel Eklenecek

Seçim listesinde tek seçenek görünüyor ise drop-down list (aşağıya açılan liste), listede birden
fazla seçenek görünüyor ise list box (sabit liste) adını alır (Görsel 3.44).

<select name="aylar" multiple>
<option value="1">Ocak</option>
<option value="2">Şubat</option>
<option value="3">Mart</option>
<option value="4">Nisan</option>
<option value="5">Mayıs</option>
<option value="6">Haziran</option>
</select>

Görsel Eklenecek

Seçim listeleri <optgroup> etiketi ile gruplandırılır. <optgroup> etiketi ile oluşturulan grup isimleri
seçilmez. </optgroup> kapama etiketi ile kullanılır (Görsel 3.45).

<select name="riskharitasi" multiple>
<option selected value="none">Hiçbiri</option>
<optgroup label="Kırmızı">
<option value="k1">Sakarya</option>
<option value="k2">Konya</option>
<option value="k3">Balıkesir</option>
</optgroup>
<optgroup label="Sarı">
<option value="s1">Eskişehir</option>
<option value="s2">Kırşehir</option>
<option value="s3">Yozgat</option>
</optgroup>
<optgroup label="Turuncu">
<option value="t1">Artvin</option>
<option value="t2">Çanakkale</option>
<option value="t3">Kütahya</option>
</optgroup>
<optgroup label="Mavi">
<option value="m1">>Uşak</option>
<option value="m2">Batman</option>
<option value="m3">Ağrı</option>
</optgroup>
</select>

Görsel Eklenecek

Sayfa açıldığında listedeki ilk seçenek seçili olarak gelir, farklı bir seçeneğin görünmesi için selected
özelliği kullanılır (Görsel 3.45).

3.7.3.4. <fieldset> ve <legend> Etiketleri

<fields> etiketi, form elemanlarını bir arada toplar ve bunların etrafında bir çerçeve oluşturur.
Oluşan çerçeve, tarayıcının genişliğine veya bulunduğu blokun genişliğine göre alanı kaplar. Bu
etiketin başlık kısmını <legend> etiketi oluşturur (Görsel 3.46).

Görsel Eklenecek

<form>
<fieldset>
<legend>Üyelik Bilgileri</legend>
<label>Ad Soyad : </label>
<input type="text" name="adSoyad" required="required"> <br/><br/>
<label>e-Posta : </label>
<input type="email" name="ePosta" required="required"> <br/><br/>
<label>Doğum Tarihi : </label>
<input type="date" name="dogumTarihi" required="required"> <br/><br/>
<input type="submit" value="Gönder"/>
<input type="reset" value="Temizle"/>
</fieldset>
</form>

3.7.3.5. <textarea> Etiketi

<textarea> etiketi, formda yazı alanı oluşturmak için kullanılır. Genellikle rows ve cols özellikleri
ile kullanılır. Rows yüksekliği, cols ise genişliği ifade etmek için kullanılır (Görsel 3.47).

Tabindex özelliği, form elemanları arasında klavyedeki Tab tuşu ile dolaşılacak sıranın belirlenmesine
imkân sağlar.

Görsel Eklenecek

<form>
<fieldset>
<legend>Yorum Gönder</legend>
<label>e-Posta:</label>
<input type="text" tabindex="1"/>
<label>Yorum:</label>
<textarea rows="3" cols="20" tabindex="2"></textarea> <br/><br/>
<input type="submit"value="Gönder"/>
<input type="reset" value="Temizle"/>
</fieldset>
</form>

Sıra Sizde

Fieldset özelliğini kullanarak mesajlaşma formu oluşturup tarayıcıda görüntüleyiniz.

3.7.3.6. <meter> Etiketi

<meter> etiketi, bilinen bir dizi, veya kesirli değer içinde bir skaler ölçüm tanımlar. Bu aynı zamanda
bir gösterge olarak da bilinir. Ölçüm için <meter> etiketi kullanılır (Görsel 3.48).

Görsel Eklenecek

<p><strong>Aldıkları puanlar:</strong></p>
<p><label for="bulent">Bülent:</label>
<meter id="bulent" min="0" low="40" high="90" max="100" value="55"></meter>50</p>
<p><label for="umit">Ümit:</label>
<meter id="umit" min="0" low="40" high="90" max="100" value="100"></meter>100</p>
<p><label for="fatih">Fatih:</label>
<meter id="fatih"min="0" low="40" high="90" max="100" value="70"></meter>70</p>
<p><label for="selcuk">Selçuk:</label>
<meter id="selcuk" min="0" low="40" high="90" max="100" value="90"></meter>90</p>

Sıra Sizde

<meter> etiketi kullanarak derslerde aldığınız puanların HTML uygulamasını oluşturunuz.

3.7.3.7. <progress> Etiketi

<progress> etiketi, görevin ilerleme durumunu tanımlar (Görsel 3.49). Bir görevin ilerleme durumunu
görüntülemek için JavaScript ve <progress> etiketi birlikte kullanılır. <progress> etiketi
ölçüm için kullanılmaz.

Görsel Eklenecek

<p><strong>Anketi tamamlama durumu:</strong></p>
<p><progress id="harun" max="100" value="40"></progress>
<label for="harun">Harun </label></p>
<p><progress id="ilhan" max="100" value="20"></progress>
<label for="ilhan">İlhan</label></p>
<p><progress id="enes" max="100" value="80"></progress>
<label for="enes">Enes</label></p>
<p><progress id="isa" max="100" value="60"></progress>
<label for="isa">İsa</label></p>
<p></p><progress id="kadir" max="100" value="50"></progress>
<label for="kadir">Kadir</label></p>

Sıra Sizde

<progress> etiketi kullanarak sınıfınıza ait sınıf başkanı seçim anket sonuçlarını gösteren
HTML uygulaması oluşturunuz.