HTML Form İnput Türleri ve Kodları

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>