Web siteleri kullanıcıdan bilgi almak yada iletişim kurabilmek adına html form kodlarından yararlanır.Form kodlarını kullanarak metin kutusu,şifre kutusu,email,numara gibi seçenekler oluşturabiliriz.Form alanı oluşturmak için öncelikle <form> etiketleri açılır ve içerisine yazılır.Şimdi ilk derste basit form kodlarından ve kullanım alanlarından bahsedeceğim ancak daha sonra CSS kodları kullanarak daha güzel formlar oluşturabiliriz.
Form oluşturma kodu :
<form action="" method="POST"> Buraya form içerikleri gelir </form>
Texttype: Metin türü kutucuk koyar.Aşağıda yer alan örnekteki gibi.
Ad: <input type="text" name="">
Ad:
Email : Sadece email içeriği yazabilir @ işaretli olmazsa kabul etmez.
Email: <input type="Email" name=""><br><br>
Email:
Number: Sadece numara girişi yapılır.
Numara: <input type="number" name=""><br><br>
Numara:
Password: Yazılarınız şifreli olarak görünür.
Password <input type="Password" name=""><br><br>
Password
Submit : Formun içerisinde yer alan bilgileri veritabanınıza göndermeye yarar.
<input type="submit" value="Gönder" name="">
Placeholder : İçerisine siz yazana kadar görünen bir yazı bulunur.Mesela sitelerde arama kutucuğunda “Ara ” yazar onun gibi.Bilgilendirme için kullanılır.
Placeholder <input type="text" name="texttype" placeholder="Adını Yaz"><br><br></b>
Placeholder
Required : Zorunlu olarak doldurulması gereken alan burası doldurulmadan form gönderilemez.
Required <input type="text" name="texttype" placeholder="Adını Yaz" required="">
Required
Disabled: Kapalı bilgi kutusu içinde yazan değer gönderilmez.
Disabled <input type="text" name="texttype" placeholder="Adını Yaz" disabled="">
Disabled
Readonly: Bilgi kutusu ancak içinde yazan değer gönderilir.
<input type="text" name="texttype" placeholder="Adını Yaz" readonly="">
Form Örnekleri :
Kişisel bilgilerin girileceği örnek bir form hazırladım.
<form action="" method="POST">
Ad: <input type="text" name=""><br>
Email: <input type="Email" name=""><br><br>
Numara: <input type="number" name=""><br><br>
Password <input type="Password" name=""><br><br>
<input type="submit" value="Gönder" name=""><br><br>
</form>
Bir cevap yazın