Kullanıcıdan bilgi girişi gerektiği durumlarda Html formlarını kullanıyoruz. Örneğin bir üyelik formu, alışveriş sonrası bir ödeme formu veya bir iletişim formu gibi. İşte bu yazımızda Html Form Örnekleri ve Kodlarını paylaşacağım.
Örneklerimizi yaparken Form etiketlerine değinmeyeceğim. Tüm form etiketlerini detaylı bir şekilde anlattığım Tüm Detaylarıyla Html Form Oluşturma yazımı okuyarak öğrenebilirsiniz.
Şuan da eklemiş olduğum Html form örnekleri şunlar:
- Html Kayıt Formu – 1
- Html Kayıt Formu – 2
- Html İş Başvuru Formu
- Html İletişim Formu
- Html Anket Formu
Şimdi herbirinin önce kodlarını sonra da çıktı görüntülerini inceleyelim.
HTML KAYIT FORMU ÖRNEĞİ – 1
Html Form Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<form name="" action="" method=""> <h2>Html Kayıt Formu</h2> <table border="1"> <tr> <td>Adı *</td> <td> <input type="text" name="" size="40" required/> </td> </tr> <tr> <td>Soyadı *</td> <td> <input type="text" name="" size="40" required/> </td> </tr> <tr> <td>E-Posta Adresi *</td> <td> <input type="email" name="" size="40" required/> </td> </tr> <tr> <td>Şifre *</td> <td> <input type="password" name="" size="40" required/> </td> </tr> <tr> <td>Şifre (Tekrar) *</td> <td> <input type="password" name="" size="40" required/> </td> </tr> <tr> <td>Telefon *</td> <td> <input type="tel" name="" placeholder="(___)(_______)" size="40" required/> </td> </tr> <tr> <td>Cinsiyet *</td> <td> <input type="radio" name="cinsiyet"/> ERKEK <input type="radio" name="cinsiyet"/> KADIN </td> </tr> <tr> <td>Doğum Tarihi *</td> <td> <input type="date" name="" style="width:100%" required/> </td> </tr> <tr> <td colspan="2"> <input type="checkbox" id=""/> Üyelik Sözleşmesi şartlarını okudum ve kabul ediyorum. </td> </tr> <tr> <td colspan="2"> <input type="submit" value="KAYIT OL" id=""/> </td> </tr> </table> </form> |
Html Kayıt Formu
HTML KAYIT FORMU ÖRNEĞİ – 2
Html Form Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
<form name="" action="" method=""> <h2>Html Kayıt Formu</h2> <table border="1"> <tr> <td> <input type="text" name="" size="25" placeholder="Adı *" required/> </td> <td> <input type="text" name="" size="25" placeholder="Soyadı *" required/> </td> </tr> <tr> <td colspan="2"> <input type="email" name="" style="width:100%" placeholder="E-Posta Adresi *" required/> </td> </tr> <tr> <td> <input type="password" name="" size="25" placeholder="Şifre *" required/> </td> <td> <input type="password" name="" size="25" placeholder="Şifre (Tekrar) *" required/> </td> </tr> <tr> <td colspan="2"> <input type="tel" name="" style="width:100%" placeholder="Telefon * (___)(_______)" required/> </td> </tr> <tr> <td colspan="2"> <input type="radio" name="cinsiyet"/> ERKEK <input type="radio" name="cinsiyet"/> KADIN </td> </tr> <tr> <td colspan="2"> <select id="" name="" style="width:32%"> <option value="0">Gün</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select id="" name="" style="width:33%"> <option value="0">Ay</option> <option value="1">Ocak</option> <option value="2">Şubat</option> <option value="3">Mart</option> <option value="4">Nisan</option> <option value="5">Mayıs</option> <option value="6">Haziran</option> <option value="7">Temmuz</option> <option value="8">Ağustos</option> <option value="9">Eylül</option> <option value="10">Ekim</option> <option value="11">Kasım</option> <option value="12">Aralık</option> </select> <select id="" name="" style="width:33%"> <option value="0">Yıl</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> <option value="1992">1992</option> <option value="1991">1991</option> <option value="1990">1990</option> <option value="1989">1989</option> <option value="1988">1988</option> <option value="1987">1987</option> <option value="1986">1986</option> <option value="1985">1985</option> <option value="1984">1984</option> <option value="1983">1983</option> <option value="1982">1982</option> <option value="1981">1981</option> <option value="1980">1980</option> </select> </td> </tr> <tr> <td colspan="2"> <input type="checkbox" id=""/> Üyelik Sözleşmesi şartlarını okudum ve kabul ediyorum. </td> </tr> <tr> <td colspan="2"> <input type="submit" value="KAYIT OL" id=""/> </td> </tr> </table> </form> |
Html Kayıt Formu
HTML İŞ BAŞVURU FORMU ÖRNEĞİ
Html Form Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
<form name="" action="" method=""> <h2>Html İş Başvuru Formu</h2> <table border="1"> <tr> <td colspan="2"> <div style="text-align: center;height: 120px;line-height: 120px;width: 120px;border: 1px solid;float: right;">FOTOĞRAF</div> </td> </tr> <tr> <td>Adı Soyadı*</td> <td> <input type="text" name="" size="45" required/> </td> </tr> <tr> <td>Doğum Tarihi *</td> <td> <input type="date" name="" style="width:100%" required/> </td> </tr> <tr> <td>Cinsiyet *</td> <td> <input type="radio" name="cinsiyet"/> ERKEK <input type="radio" name="cinsiyet"/> KADIN </td> </tr> <tr> <td>E-Posta Adresi *</td> <td> <input type="email" name="" size="45" required/> </td> </tr> <tr> <td>Telefon *</td> <td> <input type="tel" name="" placeholder="(___)(_______)" size="45" required/> </td> </tr> <tr> <td>Mezuniyet Durumu *</td> <td> <input type="radio" name="mezuniyet"/> İlkokul <input type="radio" name="mezuniyet"/> Ortaokul <input type="radio" name="mezuniyet"/> Lise <input type="radio" name="mezuniyet"/> Üniversite </td> </tr> <tr> <td>İngilizce Seviyeniz *</td> <td> <select id="" name="" style="width:100%"> <option value="">Seçiniz</option> <option value="">Bilmiyorum</option> <option value="">Orta Seviye</option> <option value="">İleri Seviye</option> </select> </td> </tr> <tr> <td>Çalışmak İstediğiniz Pozisyon</td> <td> <input type="checkbox"> Bilgi İşlem <br /> <input type="checkbox"> Muhasebe <br /> <input type="checkbox"> Pazarlama <br /> <input type="checkbox"> Asistan <br /> </td> </tr> <tr> <td>Askerlik Durumu</td> <td> <select id="" name="" style="width:100%"> <option value="">Seçiniz</option> <option value="">Tecilli</option> <option value="">Muaf</option> <option value="">Yapıldı</option> </select> </td> </tr> <tr> <td>Ek Bilgi</td> <td> <textarea name="" rows="7" style="width: 100%" placeholder="Sizinle ilgili eklemek istediğiniz diğer bilgileri buraya yazabilirsiniz."></textarea> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="BAŞVUR"/> </td> </tr> </table> </form> |
Html İş Başvuru Formu
HTML İLETİŞİM FORMU ÖRNEĞİ
Html Form Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<form name="" action="" method=""> <h2>Html İletişim Formu</h2> <table border="1"> <tr> <td>Adı Soyadı *</td> <td> <input type="text" name="" size="40" required/> </td> </tr> <tr> <td>E-Posta Adresi *</td> <td> <input type="email" name="" size="40" required/> </td> </tr> <tr> <td>Telefon *</td> <td> <input type="tel" name="" placeholder="(___)(_______)" size="40" required/> </td> </tr> <tr> <td>Konu *</td> <td> <input type="text" name="" size="40" required/> </td> </tr> <tr> <td>Mesajınız *</td> <td> <textarea name="" rows="7" style="width: 100%" required></textarea> </td> </tr> <tr> <td colspan="2"> <input type="submit" value="GÖNDER"/> </td> </tr> </table> </form> |
Html İletişim Formu
HTML ANKET FORMU ÖRNEĞİ
Html Form Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<form> <fieldset> <legend>ANKET - 1</legend> <p>Bu sene hangi futbol takımının şampiyon olacağını düşünüyorsunuz?</p> <input type="radio" name="anket-1"/> Galatasaray <br> <input type="radio" name="anket-1"/> Fenerbahçe <br> <input type="radio" name="anket-1"/> Beşiktaş <br> <input type="radio" name="anket-1"/> Trabzonspor <br> </fieldset> <br /> <fieldset> <legend>ANKET - 2</legend> <p>En çok hangi sporları yapmayı seviyorsunuz?</p> <input type="checkbox"> Futbol <br /> <input type="checkbox"> Basketbol <br /> <input type="checkbox"> Masa Tenisi <br /> <input type="checkbox"> Voleybol <br /> </fieldset> </form> |
Html Anket Formu
Şu yazılar da ilginizi çekebilir.
Css ile Özel Checkbox (Custom Checkbox) Yapımı
Css ile Özel Radio Button (Custom Radio Button) Yapımı
JQuery ile Kalan Karakter Sayısı Uygulaması
Umarım sizin için faydalı bir yazı olmuştur.
Yeni bir yazımda görüşmek üzere.
){kind=link}
Merhaba,
Bir form oluşturmak istiyorum. 3 veya 4 adet birbiri ile bağlantılı açılır metin kutusu eklemek istiyorum. Örneğin birincide iller olacak. seçtiğim ilin ilçeleri ikinci açılır metin kutusunda geglecek. 3. açılır kutu da açılan ilçenin mahalleleri gelecek gibi..
html olarak tasarladım veb sayfamı….
yardımlarınız için şimdiden teşekkür ederim..
Merhaba, rica ederim. Sizin için faydalı olmasına sevindim. Bu konuda bir sorunuz var mı? İyi çalışmalar.
Bu tarz bir kod yazdım ancak back-end konusunda bilgim yok. Girilen değerlerin bir excel’de veya veritabanında tutulması için ne yapmalıyım. *Excel olursa daha iyi olur tamamen local bir proje olucak.
Merhaba Serkan. İstediğin işlemi yapan birçok kütüphane bulunuyor. Bunlardan birisini seçip dökümantasyonundaki adımları takip ederek yapabilirsin. İyi çalışmalar.
Merhaba ,
gönder veya kayıtol a tıkkladıktan sonra bilgilerin excelde otomatik depolanmasını yada mail adresime gelmesini nasıl sağlarım
İstediğiniz bir programlama dili ile bunu yapabilirsiniz. Örneğin Php, JavaScript vb.. İnternetten küçük bir araştırma yaparsanız birçok hazır kod bulabilirsiniz. İyi çalışmalar.
Merhaba hocam, ben javascript ya da php ile kayıt yapmak istiyorum ancak yaptığım araştırma mysql gibi veritabanı bağlantısı ile yapabileceğimi gösteriyor. Ben çevrimdışı bilgileri kendi oluşturduğum dosyaya kaydetmek istiyorum. Bununla ilgili yardımcı olursanız ya da bulabileceğim bir kaynak gösterirseniz sevinirim
merhaba hocam formu sayfama ekledim yanliz formu doldurmak istedigimde formdaki butun bilgilerim siliniyor yeni bastan doldurmaya basliyorum neden acaba?