Giri┼č yap

HTML'de Formlar

Form etiketlerinin as─▒l amac─▒, son kullan─▒c─▒dan bilgileri alarak yaz─▒l─▒ma aktarmakt─▒r. Bundan dolay─▒ her form etiketinin bir name niteli─či olur, ├ž├╝nk├╝ yaz─▒l─▒m taraf─▒nda bu nitelikte belirtilen isimlere g├Âre de─čerler al─▒n─▒r.

Ve tabii ki t├╝rl├╝ t├╝rl├╝ form etiketi var, ├Ârne─čin tek sat─▒rl─▒k girdiler i├žin <input>, ├žok sat─▒rl─▒ bilgiler i├žin <textarea>, liste i├žin <select>, birden fazla se├žim i├žin checkbox, birden fazla de─čerde tek se├žim i├žin radio etiketleri kullan─▒l─▒r. Tabi bu son ikisi yani checkbox ve radio asl─▒nda <input> etiketinin nitelikleri fakat ├Ânemli de─čil bilgi alma a├ž─▒s─▒ndan en ├žok kullan─▒ld─▒klar─▒ i├žin belirttim.

Peki ├Ârne─čin nerelerde kullan─▒l─▒r? Asl─▒nda kullan─▒c─▒dan veri al─▒nacak her alanda kullan─▒labilir, en basitinden ├╝ye giri┼či yap─▒lacak bir sayfada ┼č├Âyle bir kod yazmak yeterli olacakt─▒r;

<form action="" method="post">
        
    <label for="kadi">Kullan─▒c─▒ ad─▒</label>
    <input type="text" name="kullanici_adi" id="kadi"> <br>
    
    <label for="sifre">┼×ifre</label>
    <input type="password" name="sifre" id="sifre"> <br>
    
    <button type="submit">Giri┼č yap</button>
        
</form>

├ç─▒kt─▒s─▒ ise ┼č├Âyle g├Âz├╝kecektir;

Burada tabi ki a├ž─▒klanmas─▒ gereken ├žok ┼čey var. S─▒rayla a├ž─▒klayal─▒m.

  • <form action="" method="post"> - Form etiketleri bu etiket i├žerisinde yer al─▒r. Ve bu etiket baz─▒ nitelikler alarak i┼člevsel hale gelir. En s─▒k kullan─▒lan iki nitelik zaten ├Ârnekte yer al─▒yor, action="" buras─▒ form g├Ânderildi─činde hangi adrese g├Ânderilsin bilgiler onun belirlendi─či k─▒s─▒m. Bo┼č b─▒rak─▒l─▒r ise mevcut sayfada form g├Ânderme i┼člemi yap─▒l─▒r. method="post" bu ise, hangi metod ile g├Ânderilece─či. POST ile g├Ânderilen formlar URL dedi─čimiz taray─▒c─▒daki adres sat─▒r─▒nda g├Âz├╝kmez de─čer olarak. Ancak biz bunu post de─čilde GET olarak belirleseydik o zaman yaz─▒lan de─čerler form g├Ânderildi─činde adres ├žubu─čunda g├Âz├╝kecekti.
  • <label for="kadi">Kullan─▒c─▒ ad─▒</label> - Bu etiket form etiketlerine ba─člant─▒ i├žin kullan─▒l─▒r. Burada for="kadi" k─▒sm─▒, input'taki id="kadi" k─▒sm─▒na e┼čit. B├Âylece label etiketine t─▒kland─▒─č─▒nda otomatik olarak ilgili form etiketine odaklan─▒r.
  • <input type="text" name="kullanici_adi" id="kadi"> - Tek sat─▒rl─▒k de─čerleri kullan─▒c─▒dan almak i├žin input etiketi kullan─▒l─▒r. Bu etiket ├žok t├╝rl├╝ ama├žlar i├žin kullan─▒l─▒yor, ┼čimdilik h─▒zl─▒ca bir ├Âzet ge├želim. type="text" burada text oldu─ču i├žin normal yaz─▒ olarak belirttik ancak type de─čeri olarak belkide 20'nin ├╝zerinde de─čer var belirleyebilece─čimiz. Bunlar─▒n hepsine tek tek girece─čiz ancak ┼čimdi de─čil. name="kullanici_adi" burada ├Ânemli olan ├ž├╝nk├╝ dedi─čim gibi yaz─▒l─▒m dillerinde gelen de─čerleri buradaki name de─čerine g├Âre alaca─č─▒z. id="kadi" ise normal id tan─▒mlamas─▒. Zaten ID ve Class b├Âl├╝m├╝nde g├Ârd├╝k bunu ancak buradaki amac─▒ label'den t─▒kland─▒─č─▒nda bu etikete odaklanmas─▒ i├žin.
  • <input type="password" name="sifre" id="sifre"> - Yukar─▒dakinin ayn─▒s─▒ sadece tipi password buda yaz─▒lan de─čerleri ┼čifreli ┼čekilde g├Âstermeyi sa─čl─▒yor web sayfas─▒nda.
  • <button type="submit">Giri┼č yap</button> - Button etiketinde e─čer type="submit" var ise, ona t─▒kland─▒─č─▒nda mevcut form action'da belirlenen adrese method'da belirlenen metod ile g├Ânderilir.

E─čer bunlar ┼ču an anlam ifade etmiyor ise, yaz─▒l─▒m dillerinden birini ├Â─črendi─činizde ├žok daha anlaml─▒ olaca─č─▒ndan emin olun :) ┼×u an etiketlerin nas─▒l tan─▒mland─▒─č─▒n─▒, niteliklerin vs. neler oldu─čunu anlamak yeterli olacakt─▒r.

<form> Etiketi

Bu etiket di─čer form etiketlerini kapsayan etikettir. E─čer nitelik olarak method tan─▒mlanmad─▒ysa varsay─▒lan─▒ GET'tir. Yani adres ├žubu─čunda yaz─▒lan de─čerler form g├Ânderilirse g├Âz├╝k├╝r. E─čer action tan─▒ml─▒ de─čilsede otomatik olarak mevcut sayfaya g├Ânderilir de─čerler.

  • method - Hangi metod kullan─▒larak form de─čerleri iletilece─či belirlenir.
  • action - Form bilgilerinin hangi adrese g├Ânderilece─či belirlenir.
<form action="kaydet.php" method="post">
    ..
</form>

<input> Etiketi

En s─▒k kullan─▒lan form etiketi bu etikettir. Burada ├Ânemli olan type niteli─činin ne oldu─čudur, ├ž├╝nk├╝ bu etiket 20'ye yak─▒n tipe sahiptir ve her biri farkl─▒ i┼člevleri yerine getirir. ─░┼čte size birka├ž ├Ârnek;

Tip A├ž─▒klama
<input type="text"> Tek sat─▒rl─▒ a├ž─▒klama
<input type="radio"> Tekli se├žim d├╝─čmesi
<input type="checkbox"> ├çoklu se├žim d├╝─čmesi

Bu etiket i├žin ayr─▒ca bir sayfa ay─▒raca─č─▒z, ┼čimdilik bunlar─▒ bilsek yeterli.

<button> Etiketi

Bas─▒nca formu g├Ânderme i┼člemleri i├žin bu etiket kullan─▒l─▒r. E─čer type de─čeri submit ise, bas─▒nca formu g├Ânderme i┼člemini ger├žekle┼čtirir.

<button type="submit">G├Ânder</button>

<select> Etiketi

Bir liste olarak se├žme i┼člemi yapt─▒rmak istedi─čimizde bu etiketi kullan─▒yoruz. Hemen ├Ârne─čini inceleyelim;

<select name="takim">
    <option value="gs">Galatasaray</option>
    <option value="fb">Fenerbah├že</option>
    <option value="bjk">Be┼čikta┼č</option>
</select>

G├Âr├╝n├╝m├╝ ise ┼č├Âyle olacakt─▒r;

G├Ârd├╝─č├╝n├╝z gibi <select> etiketi i├žerisinde se├ženekler i├žin <option> etiketi bar─▒nd─▒r─▒yor. Ve her <option> etiketi value niteli─či i├žeriyor. Buda se├žilen se├žene─čin de─čerini temsil ediyor.

<textarea> Etiketi

├çok sat─▒rl─▒ bir bilgi al─▒naca─č─▒ zaman bu etiket kullan─▒l─▒r. ├ľrne─čin;

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

Burada name="hakkinda" yine yaz─▒l─▒m taraf─▒nda de─čeri almak i├žin kullan─▒l─▒yor, cols="30" geni┼čli─či rows="10" y├╝ksekli─či ayarlamak i├žin. Tabi CSS devreye girince bunlar─▒n pek bir ├Ânemi kalmayacak ama var oldu─čunu bilmekte fayda var.

<fieldset> Etiketi

Birbiriyle ba─člant─▒l─▒ form etiketlerini bu etiketi kullanarak bir araya getirebiliriz. ├ľrne─čin;

<form action="" method="post">

    <fieldset>
    
        <legend>Ki┼čisel Bilgileri:</legend>

        <label for="adsoyad">Ad-soyad</label> <br>
        <input type="text" name="adsoyad" id="adsoyad"> <br> <br>

        <label for="telefon">Telefon</label> <br>
        <input type="tel" name="telefon" id="telefon">

    </fieldset>

    <fieldset>
    
        <legend>Sosyal Medya:</legend>

        <label for="facebook">Facebook</label> <br>
        <input type="text" name="facebook" id="facebook"> <br> <br>

        <label for="twitter">Twitter</label> <br>
        <input type="text" name="twitter" id="twitter">

    </fieldset>

    <button type="submit">Kaydet</button>

</form>

Bu kodun ├ž─▒kt─▒s─▒ ┼č├Âyle g├Âz├╝kecek;

├çok kod yazm─▒┼č─▒z gibi g├Âr├╝nebilir. Asl─▒nda ┼ču etiketleri kulland─▒k yeni olarak;

<fieldset>
    <legend> Ba┼čl─▒k </legend>
</fieldset>

Zaten ├ž─▒kt─▒ya bak─▒nca etiketin tam amac─▒ anla┼č─▒l─▒yor, birbiriyle ba─član─▒tl─▒ form etiketlerini bir ├žer├ževe i├žinde bulu┼čturduk. Bu etiketlerde CSS kullan─▒m─▒yla tarih olan etiketler aras─▒nda.

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