HTML Form Oluşturma

bLastX · 22 Şub 2024

HTML Form Nedir?

Form bir başka sayfaya bilgi göndermemizi sağlayan bir HTML elementtir. HTML'de başka bir sayfaya bilgi POST ve GET olmak üzere iki şekilde gönderilir. Form elementi ile bilgi göndermek için bu iki yöntemden birini kullanabilirsiniz. Form ile gönderilecek veriler form tagı içinde bulunmalı ve her elementin name özelliğine bir değer verilmeli. Form ile gönderilen veri PHP ya da ASP gibi dillerle alınıp işlenebilir.

Form oluşturma örneği:

HTML:

<!DOCTYPE html>
<html>
    <body>
         <form>
             <input type="text" name="isim">
             <input type="submit" value="Gönder">
         </form>
    </body>
</html>

Yukarıdaki örnekte form içinde bulunan input elementine kullanıcı tarafından yazılacak değer butona basıldığında aynı sayfaya GET yöntemi ile gönderilir. GET yöntemi veriyi URL adresinin sonuna ekler, adres çubuğuna bakarsanız yazdığınız değeri görebilirsiniz. Bu veriyi aşağıdaki PHP kodu ile alıp işleyebilirsiniz.

HTML:

<?php
//a değişkenine form ile gönderilen isim değişkeni kaydediliyor.
$a = $_GET['isim'];
?>
<!DOCTYPE html>
<html>
    <body>
        <p>
            <?php
            //a değişkeni ekrana yazdırılıyor.
            echo $a;
            ?>
        </p>
        <form>
            <input type="text" name="isim">
            <input type="submit" value="Gönder">
        </form>
    </body>
</html>

Form Elementinin Özellikleri

method: Bu özellikle gönderme yöntemi belirlenir. Değeri POST ya da GET olmalı.

action: Form bilgilerinin gönderileceği sayfayı bu özellikle belirliyoruz.

target: Formun yönlendireceği sayfanın nerede açılacağını belirler. Alabileceği değerler şunlardır _self: aynı sayfa, _blank: yeni sekme.

Bu form örneğinde bilgiler POST yöntemi ile test.php sayfasına gönderilir ve sayfanın yeni sekmede açılması sağlanır.

HTML:

<!DOCTYPE html>
<html>
    <body>
        <form method="POST" action="test.php" target="_blank">
            <input type="text" name="isim">
            <input type="submit" value="Gönder">
        </form>
    </body>
</html>

Yukarıdaki formun gönderileceği test.php sayfasının içeriği.

HTML:

<?php
    $a=$_POST['isim'];
?>
<!DOCTYPE html>
<html>
    <body>
        <p>İsim:<?php echo $a; ?></p>
    </body>
</html>

Form İle Gönderilebilecek Veriler

Form tagları arasına yazılan input, select, textarea, elementlerindeki veriler form ile gönderilebilir. input elementi formda en sık kullanılan elementtir. input birçok farklı tipte kullanılır bunlar:

text: Kısa metin girişi için kullanılır.

password: Şifre girişi için kullanılır. Yazılan karakterler görünmez.

checkbox: Onay kutusu. Seçimi 1 ya da 0 olarak gönderir.

hidden: Bu tip ekranda görünmez value özelliğine verilen değer form ile gönderilir.

file: File tipi bilgisayarda kayıtlı bir dosyayı sunucuya göndermemize olanak sağlar. Resim, video veya başka tipte dosyaları gönderebiliriz.

Form ile kullanıcı adı ve şifre gönderme örneği:

HTML:

<!DOCTYPE html>
<html>
    <body>
        <form method="POST" action="test.php">
            <input type="text" name="user" > <br>
            <input type="password" name="pass" ><br>
            <input type="checkbox" name="remember" >Beni hatırla <br>
            <input type="submit" value="Gönder">
        </form>
    </body>
</html>

test.php sayfası:

HTML:

<?php
    $user=$_POST['user'];
    $pass=$_POST['pass'];
    $remember=$_POST['remember'];
?>
<!DOCTYPE html>
<html>
    <body>
        <p>Kullanıcı Adı: <?php echo $user; ?></p>
        <p>Şifre: <?php echo $pass; ?></p>
        <p><?php echo $remember?'Beni hatırla':''; ?></p>
    </body>
</html>

input text özelliğinin yetersiz kaldığı durumlarda uzun metinleri göndermede textarea kullanılır.

Textarea ve select verilerini form ile gönderme:

HTML:

<!DOCTYPE html>
<html>
    <body>
        <form method="POST" action="test.php">
            Renk:
            <select name="renk">
                <option value="1" >Beyaz</option>
                <option value="2" >Sarı</option>
                <option value="3" >Yeşil</option>
                <option value="4" >Mor</option>
            </select><br>
            <label>Açıklama</label><br>
            <textarea name="aciklama"></textarea>
            <input type="submit" value="Gönder">
        </form>
    </body>
</html>

test.php içeriği:

HTML:

<?php
    $renk=$_POST['renk'];
    $aciklama=$_POST['aciklama'];
?>
<!DOCTYPE html>
<html>
    <body>
        <p>renk <?php echo $renk; ?></p>
        <p>Açıklama: <?php echo $aciklama; ?></p>
    </body>
</html>