HTML İletişim Formu (contact form)

Yeni bir html konusuyla devam etmek istiyorum.Hemen hemen bütün web sitelerin de iletişim formu vardır.

İletişim formu neden gereklidir ? 

iletisim formu sayesinde sitemize gelen ziyaretçilerle iletişim kurabilir , onların görüşlerini ve isteklerini öğrenebilir böylelikle site ziyaretçilerimiz ile site sahibi arasında bir kontakt kurulmuş olur. kısaca açıklamak gerekirse  iletisim formununu bu sekilde tanımlayabiliriz.

Şimdi Html iletişim formumuzu adım adım olusturmaya başlayalım.

Öncelikle Adı Ve Soyadı girişi yapılması için ıkı tane metın kutusu ekleyelim :

<input type="text" name="ismi"  />

<input type="text" name="Soyismi"  />

metin kutusu eklemek için input type text etiketini kullanırız. 

Metin kutularını ekledikten sonra şimdi Onay kutusu nu ekleyelim.

<input type="checkbox" name="medeni" value="evli" /> onay kutusunu eklemek

için checkbox etiketini kullandık 

Şimdi ise Adres , içerik vs için eklememiz gereken text area kısmını ekleyelim.

<textarea name="adresi" rows="6" cols="40">

Açılır çoklu seçenek kutusu yani listbox :

<select name="iller" size="1">
<optgroup label="Marmara">
<option>Istanbul</option>

gibi etiketleri kullanacagız. 

Radio buton eklemek için radio etiketini kullanacagız. 

<input type="radio" name="uzman" value="Photoshop" /> 

Son olarak buton ekleyerek formumuzu tamamlamış olacagız. 

<input type="submit" value="Gönder" /> 

kodları takip ederseniz aşagıdakı formun aynısını olusturabilirsiniz.

Ayrıca CSS kullanarak görünüm olarak cok daha zengin gornume sahip 

bir form elde edebilirsiniz. 

Örnek İletişim Formu 

Adi :
Soyadi :
Medeni Durumu :	Evli Bekar
Adresi :
Yasadiginiz Sehir :	Istanbul Bursa Sakarya Kocaeli Izmir Manisa Aydin Antalya Isparta Mersin Ankara Kars Balikesir
Uzmanlik Alani :	Flash Photoshop Fireworks Php

Son olarak Form için bütün html kodlarını ekliyorum.Bu kodları kullarak aynı form a sahip olabilirsiniz.İstedıgınız sekılde uzerınde calısıp daha da güzel bir form haline getirebilirsiniz.

<b><td> Soyadi : </td><b>
<td><input type="text" name="Soyismi" /></td>
<tr>
<td>Medeni Durumu : </td>
<td><input type="checkbox" name="medeni" value="evli" /> Evli
<input type="checkbox" name="medeni" value="evli" /> Bekar </td>
<tr>
<td> Adresi : </td>
<td><textarea name="adresi" rows="6" cols="50"></textarea></td>
</tr>
<tr>
<td> Yasadiginiz Sehir : </td>
<td><select name="iller" size="1">
<optgroup label="Marmara">
<option>Istanbul</option>
<option>Bursa</option>
<option>Sakarya</option>
<option>Kocaeli</option>
</optgroup>
<optgroup label="Ege">
<option>Izmir</option>
<option>Manisa</option>
<option>Aydin</option>
</optgroup>
<optgroup label="Akdeniz">
<option>Antalya</option>
<option>Isparta</option>
<option>Mersin</option>
</optgroup>
<optgroup label="Diger">
<option>Ankara</option>
<option>Adana</option>
<option>Balikesir</option>
</optgroup>
</select>
</tr>
<tr>
<td>Uzmanlik Alani : </td>
<td><br><input type="radio" name="uzman" value="Flash" />Flash<br/>
<br><input type="radio" name="uzman" value="Photoshop" />Photoshop<br/>
<br><input type="radio" name="uzman" value="Fireworks" />Fireworks<br/>
<br><input type="radio" name="uzman" value="Php"/>Php<br/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Gönder" />
<input type="reset" value="Temizle" /> </td>
<tr>
</tr>
</form>
</body>