8 Ağustos 2012 Çarşamba

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 :
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>

2 yorum:

  1. gönder butonuna tıklayınca bana mail atması lazım onu nasıl yapıcaz

    YanıtlaSil
  2. php ile kodlaman lazım,vaktim olunca eklerim,php iletişim formu diye google dan aratırsan türkce ve inglizce kaynaklar bulabilirsin.

    YanıtlaSil

Not: Yalnızca bu blogun üyesi yorum gönderebilir.

//Luckyorange//