HTML'de Form Etiketleri

Bu bölümde hemen hemen tüm form etiketlerini birer örnekle anlamaya çalışacağız. Eğer anlamadıklarınız olursa, etiketlerin kendi referans sayfalarına bakabilirsiniz. Eğer öyle bir sayfayı arayıo bulamadıysanız da muhtemelen hazırlanma aşamasındadır :)

<input> Etiketi

Tek satırlık bilgi almak için bu etiket kullanılır. Ayrıca type niteliğindeki değere görede görünümünde değişkenlikler olabilir.

<input type="text" placeholder="Kullanıcı adınız">

Burada placeholder niteliği, eğer input değerim boşsa gözükecek yazıyı temsil ediyor. İçini doldurduğunuzda bu yazının kaybolduğunu görebilirsiniz.

Ayrıca input'un içeriğini doldurmak istersek value niteliğini kullanıyoruz. Örneğin;

<input type="text" value="Prototürk">

<textarea> Etiketi

Çok satırlık bilgi almak için bu etiket kullanılır. Örnek vermek gerekirse;

<textarea name="hakkinda" cols="30" rows="10"></textarea>

Burada cols genişliği, rows yüksekliği ayarlamak için kullanılan etiketlerdir. Ancak CSS ile düzenleme yaptığımızdan beri bunları çok kullanmıyoruz.

Eğer textarea'nın içeriğini belirleyecekseniz <textarea> .. </textarea> etiketieri arasında belirlemelisiniz. Yani;

<textarea name="hakkinda" cols="30" rows="10">
Prototürk.com - Yazılım ve Tasarım Dersleri
Şimdi sırasıyla bakalım neler öğreniyoruz..
</textarea>

<select> Etiketi

Listeden seçtirerek bilgi almak için bu etiketi kullanabiliriz. İster tek bilgi, ister birden fazla bilgiyi listeden seçtirerek almamız mümkün. Öncelikle normal kullanımını görelim;

<select name="cinsiyet">
    <option value="">Cinsiyetinizi Seçin</option>
    <option value="1">Erkek</option>
    <option value="2">Kadın</option>
</select>

Gördüğünüz gibi <select> etiketi aslında <option> etiketlerinin kapsayıcısı. <option> etiketleri, listedeki elemanları belirlemek için kullandığımız etiket. Burada value niteliği web sayfasına giren kişilere gözükmez, onun yerine <option> .. </option> etiketleri arasındaki yazı gözükür. value değeri, yazılım tarafına gönderilen değerdir. Şimdilik bunu bilelim, yazılım derslerinde zaten detaylandıracağız.

Ayrıca birden fazla seçme işlemi için multiple niteliği eklemek yeterli.

<select name="hobiler[]" multiple>
    <option value="Bisiklet">Bisiklet</option>
    <option value="Yüzme">Yüzme</option>
    <option value="Koşma">Koşma</option>
    <option value="Futbol">Futbol</option>
    <option value="Kitap Okuma">Kitap Okuma</option>
</select>

Tabi burada eğer multiple kullanılmışsa, name niteliğinin değerinin sonuna [] gelir. Bunun nedenini şimdilik hiç kafanıza takmayın, bilin yeter. Yazılımla alakalı olduğundan bu şekilde kullanmamız gerekir.

Bu nitelikle birlikte kullanabileceğimiz diğer nitelik ise size niteliği, görünecek max. liste elemanını belirlemke için kullanılır. Örneğin size="3" dediğimizde, ilk 3 eleman gözükür diğerlerini görmek için scroll etmek gerekir aşağı doğru.

<select name="hobiler[]" multiple size="3">
    <option value="Bisiklet">Bisiklet</option>
    <option value="Yüzme">Yüzme</option>
    <option value="Koşma">Koşma</option>
    <option value="Futbol">Futbol</option>
    <option value="Kitap Okuma">Kitap Okuma</option>
</select>

Ayrıca listeden birisini seçili getirmek için <option> etiketine selected niteliği eklenir. Örneğin;

<select name="cinsiyet">
    <option value="">Cinsiyetinizi Seçin</option>
    <option value="1" selected>Erkek</option>
    <option value="2">Kadın</option>
</select>

Eğer multiple niteliği var ise, birden fazla selected yazılabilir ancak yok ise tek bir liste elemanı seçilmelidir.

<button> Etiketi

Tıklanır bir buton oluşturmak için kullanılır. Eğer type niteliği submit ise tıklandığında form'u gönderme işlemini sağlar. Genelde de <form> etiketi içerisinde kullanılır ancak bazen front-end yaparken başka alanlarda da kullanılıp CSS ile şekli değiştirilebilir.

<button type="submit">Giriş yap</button>

checkbox Etiketi

Aslında buna özel bir etiket yok, <input> etiketinde type değerini checkbox yaparak kullanıyoruz. Örneğin;

<label><input type="checkbox" name="kural" value="1"> Kuralları okudum ve kabul ediyorum</label>

radio Etiketi

Bunun içinde etiket yok aynı checkbox'ta olduğu gibi <input> etiketinde type değeri radio yaparak kullanıyoruz. Checkbox'tan farkı, bunda seçeneklerden birisini seçebilir son kullanıcı, örneğin;

<p> Yorum özelliği aktif edilsin mi?</p>
    
<label>
    <input type="radio" name="ozellik" value="1"> Evet
</label>
<label>
    <input type="radio" name="ozellik" value="2"> Hayır
</label>

Bu ve checkbox aynı zamanda checked niteliği alırlar. Yani birisini varsayılan olarak seçili getirmek isterseniz checked ekleyebilirsiniz. Örneğin;

<p> Yorum özelliği aktif edilsin mi?</p>
    
<label>
    <input type="radio" name="ozellik" value="1" checked> Evet
</label>
<label>
    <input type="radio" name="ozellik" value="2"> Hayır
</label>

<datalist> Etiketi

HTML'in 5. sürümünd eklenen bu etiket ile input'a bir değer girilirken belirlediğimiz bir listeyi gösterebiliyoruz. Böylece aradıklarını kolayca bulup seçebiliyorlar. Örneğin;

<form>
    <input list="tarayicilar">
    <datalist id="tarayicilar">
        <option value="Google Chrome">
        <option value="Mozilla Firefox">
        <option value="Opera">
        <option value="Safari">
        <option value="Edge">
        <option value="Internet Explorer">
    </datalist>
</form>

Görünüş olarak <select> etiketine benziyor ancak <option> etiketleri kapatılmamış haline. Ayrıca <input> etiketindeki id değeri, <datalist> etiketindeki list değerine eşit olmalı.