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;

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.