Giri┼č yap

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─▒.

Tayfun Erbilen
125 g├╝n ├Ânce yazd─▒. Son g├╝ncelleme: 125 g├╝n ├Ânce