HTML Form Örnekleri

HTML Form Nedir?

HTML form, kısaca anlatacak olursak Web sitenizden bir veri tabanına, e-postanıza vb yerlere doldurulan veriyi ulaştırmak için kullanılır. Form Etiketi ayrıca birazdan aşağıda etiketini kullandığımız gibi açılmaktadır. İçerisine HTML form örnekleri ve bir çok öge yerleştirilebilir.

Html form Web sitesi içinde kullanıcıların sizinle iletişime geçmesi için bir alandır. Bu alanın kullanıcılardan hangi verileri istediğinize göre değiştirebilir ve farklı çeşitlerde kullanabilirsiniz. Genel olarak Html Formlar: İletişim formları, üyelik formları ve üye giriş formları olarak Web sitelerinde faaliyet göstermektedir.

Html formlar kullanıcılarınız ile iletişime geçmenizin en iyi yollarından biridir ve en etkili yol olarak tüm dünya çapında etkin olarak kullanılmaktadır.

Kullanılan bu form içerisinde bir çok öge barındırabilir.

• Ad soyad verisi.
• Telefon numarası.
• Form konusu.
• E-Posta verisi.
• Kullanıcı adı.
• Parola verisi.
• Cinsiyet bilgisi.
• Çoktan seçmeli veriler.
• Tek seçim hakkınız  olan veriler.
• Okul Seçme, Lokasyon Belirleme, Hobi Alanları Belirleme vb seçenekler..
• Mesaj alanları.

Yukarıda belirttiğimiz alanları aşağıda kod olarak HTML Form Örnekleri şeklinde sizlere daha açıklayıcı olarak sunacağım. Form alanlarının neredeyse tümünü yukarıda listeler halinde sizlerle paylaştım ve aşağıdaki bölüm de form ögelerinin örneklerine göz atabilirsiniz.

..
  <form></form>
..

HTML Form Türleri Nelerdir?

2 Adet HTML form türü vardır. Bunlar formdaki verilerin bir yerden bir yere nasıl gönderileceğini belirlerken kullanılan metotlardır. Aşağıda bu 2 metot (method) verip ne anlama geldiğinden bahsedeceğim. Form üzerinde aşağıdaki gönderme gibi 2 çeşit metot vardır.

• POST : Bir formdan veriyi gönderirken güvenliği yüksek olarak adlandırılan ve bilgiyi url’e basmayan veri gönderme biçimidir.
• GET : Formdan gönderilen veriler POST metot‘una göre daha güvensiz olan verileri url’e ekleyen bir form metot‘udur.

POST Method Kullanımı

Post metot kullanımı önerilen bir kullanımdır. Kullanım şeklinize göre ihtiyacınızı karşılaması konusunda söylenecek bir şey olmayabilir ama daha GET metot‘una göre daha güvenli olduğu söylenebilir.

..
  <form name="..." action="contact.php" method="post"></form>
..

GET Method Kullanımı

Get metot‘u url yapısına verileri ekleyerek sizi bir sayfaya gönderir. Bu sayfa içinde programlama bilgileriyle veriler alınır ve yerine göre işlenir.

..
  <form name="..." action="contact.php" method="get"></form>
..

 

HTML Form Elementleri

Html Formlarının bir çok ögesi vardır bunları sizlerle maddeler halinde açıklamalı olarak paylaşacağım.

• input : input veri girişi almak için kullanılan elementtir.

  • ..
      <input type="input" name="giris" />
    ..

• textarea : Genellikle mesaj içerikli verileri göndermekte kullanılan elementtir.

  • ..
      <textarea name="mesaj" ></textarea>
    ..

• label : Elementlerin başlıklarını belirlemek için kullanılır. Bir form yazı kutucuğu, şifre girme kutusu, yazı alanı ve diğer alanların isimleri belirlemek ve üzerinde tıkladıktan sonra ilgili elamanın üzerinde yazmaya hazır hale getiren form elemanıdır.

  • ..
      <label for="adsoyad">Ad, Soyad</label>
    ..

• form : Veri göndermek ve form elemanlarını içine yazıp bir sayfaya o bilgileri gönderen Form HTML kodudur.

  • ..
      <form name="iletisim" action="iletisim.php" method="post"> ... </form>
    ..

• checkbox : Çoktan seçmeli veriler için uygundur.

  • ..
      <input type="checkbox" name="dil" value="İngilizce">İngilizce <br />
      <input type="checkbox" name="dil" value="Türkçe">Türkçe <br />
      <input type="checkbox" name="dil" value="İtalyanca">İtalyanca
    ..

• radio : Tek seçim yapabileceğiniz verileri almada işinize yaramaktadır.

  • ..
      <input type="radio" name="cinsiyet" value="Erkek"> Erkek <br />
      <input type="radio" name="cinsiyet" value="Kadın"> Kadın <br />
      <input type="radio" name="cinsiyet" value="Diğer"> Diğer
    ..

• text : Yazı içerikli kısa bilgileri alabileceğiniz form elemanıdır.

  • ..
      <input type="input" name="adsoyad" />
    ..

• password : Parola içeriği girilmesi için yapılan ve verileri yazarken nokta ile gizleyen form elemanıdır.

  • ..
      <input type="password" name="parola" />
    ..

 

HTML Form Örnekleri

Sıra geldi HTML form örnekleri oluşturmaya. Aşağıdaki listede incelemeniz için örneklerini vereceğim formlar oluşturup kodlarını sizinle paylaşacağım.

• Kullanıcı Giriş Formu Örneği
• İletişim Formu Örneği
• Üye Kayıt Formu Örneği

Kullanıcı Giriş Formu Örneği

Html Kod:

<form name="uyegiris" action="uyegiris.php" method="post">
	<table>
		<tr>
			<td><label for="kullaniciadi">Kullanıcı adı:</label></td>
			<td><input type="text" name="kullaniciadi" id="kullaniciadi" /></td>
		</tr>
		<tr>
			<td><label for="parola">Parola:</label></td>
			<td><input type="password" name="parola" id="parola" /></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="Gönder" name="gonder" /></td>
		</tr>
		
	</table>
</form>

 

İletişim Formu Örneği

Html Kod:

<form name="formgonder" action="iletisim.php" method="post">
	<table>
		<tr>
			<td><label for="adsoyad">Ad, Soyad:</label></td>
			<td><input type="text" name="adsoyad" id="adsoyad" /></td>
		</tr>
		<tr>
			<td><label for="eposta">E-Posta:</label></td>
			<td><input type="text" name="eposta" id="eposta" /></td>
		</tr>
		<tr>
			<td><label for="telefon">Telefon:</label></td>
			<td><input type="text" name="telefon" id="telefon" /></td>
		</tr>
		<tr>
			<td><label for="konu">Konu:</label></td>
			<td><input type="text" name="konu" id="konu" /></td>
		</tr>
		<tr>
			<td><label for="mesaj">Mesajınız:</label></td>
			<td><textarea  name="mesaj" id="mesaj" style="height:90px; width:200px" ></textarea></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="Gönder" name="gonder" /></td>
		</tr>
		
	</table>
</form>

Üye Kayıt Formu Örneği

Html Kod:

<form name="kayitgonder" action="kayit.php" method="post">
	<table>
		<tr>
			<td><label for="adsoyad">Ad, Soyad:</label></td>
			<td><input type="text" name="adsoyad" id="adsoyad" /></td>
		</tr>
		<tr>
			<td><label for="eposta">E-Posta:</label></td>
			<td><input type="text" name="eposta" id="eposta" /></td>
		</tr>
		<tr>
			<td><label for="telefon">Telefon:</label></td>
			<td><input type="text" name="telefon" id="telefon" /></td>
		</tr>
		<tr>
			<td><label for="konu">Konu:</label></td>
			<td><input type="text" name="konu" id="konu" /></td>
		</tr>
		<tr>
			<td><label>Cinsiyet:</label></td>
			<td>
				<input type="radio" name="cinsiyet" value="Erkek"> Erkek 
				<input type="radio" name="cinsiyet" value="Kadın"> Kadın
				<input type="radio" name="cinsiyet" value="Diğer"> Diğer
			</td>
		</tr>
		<tr>
			<td><label>Bildiğiniz Diller:</label></td>
			<td>
				<input type="checkbox" name="dil" value="İngilizce">İngilizce
				<input type="checkbox" name="dil" value="Türkçe">Türkçe
				<input type="checkbox" name="dil" value="İtalyanca">İtalyanca
			</td>
		</tr>
		<tr>
			<td><label for="mesaj">Mesajınız:</label></td>
			<td><textarea  name="mesaj" id="mesaj" style="height:90px; width:200px" ></textarea></td>
		</tr>
		<tr>
			<td colspan="2"><input type="submit" value="Gönder" name="gonder" /></td>
		</tr>
		
	</table>
</form>