HTML ile input type=”text”, input type=”number”, input type=”file”, input type=”radio”, input type =”checkbox”, textarea, input type=”submit, input type=”reset” kullanımlarını gösteren tablo içine yerleştirilmiş Form örneklerini bu yazıda inceleyebilirsiniz.
HTML‘ de kullanıcıdan bilgi girişi almak için HTML form nesneleri kullanılır. Aşağıdaki örneklerde bu nesnelerin çeşitli kullanım şekillerini göreceksiniz.
Form Elemanlarının detaylı anlatımı için HTML Form Kullanımı yazısına yada tek örnekle tüm form elemanları ve nitelikleri için aşağıdaki videoya bakabilirsiniz.
Örnek 1
|
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 |
<!doctype html> <html> <head> <title>FORM ETİKETLERİ</title> <meta charset="utf-8"> </head> <body> <form action="www.yazilimkodlama.com" method="get" > <table border="0"> <tr> <td>Ad :</td> <td><input type="text" name="ad" id="ad" required placeholder="Lütfen Adınızı Girin"></td> </tr> <tr> <td>Soyad :</td> <td><input type="text"name="soyad"id="soyad" required placeholder="Lütfen Soyadınızı Girin"></td> </tr> <tr> <td colspan="2"> FUTBOL<input type="checkbox"name="hobi1" id="hobi1"> YÜZME<input type="checkbox"name="hobi2" id="hobi2"> KARATE<input type="checkbox"name="hobi3" id="hobi3"> KİTAP<input type="checkbox"name="hobi4" id="hobi4"> </td> </tr> <tr> <td colspan="2"> KADIN<input type="radio"name="cinsiyet" id="cinsiyet" value="kadın"> ERKEK<input type="radio" name="cinsiyet" id="cinsiyet" value="erkek"> </td> </tr> <tr> <td>YAŞ</td> <td><input type="number" name="yas" id="yas" min="18" max="88"></td> </tr> <tr> <td>MAİL:</td> <td><input type="email" name="mail" id="mail" required></td> </tr> <tr> <td colspan="2"> <input type="submit" name="kaydet" id="kaydet" value="KAYDET"> <input type="reset" name="sil" id="sil" value="TEMİZLE"> </td> </tr> </table> </form> </body> </html> |
Örnek 2
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>form</title> </head> <body> <form action="http://yazilimkodlama.com" method="get" enctype="multipart/form-data"> <table border="2"> <tr> <td><label for="ad">Ad</label></td> <td colspan="1"><input type="text" name="ad" id="ad" required></td> </tr> <tr> <td>Soyad</td> <td colspan="1"><input type="text" name="soyad" id="soyad" required></td> </tr> <tr> <td>Yaş</td> <td><input type="number" name="yas" id="yas" min="0" max="120" placeholder="Yaşınızı girin"></td> </tr> <tr> <td>Resim Ekle</td> <td><input type="file" name="resim" id="resim"></td> </tr> <tr> <td>TC No</td> <td><input type="text" name="tc" id="tc" maxlength="11"></td> </tr> <tr> <td>Cinsiyet</td> <td>K<input type="radio" name="cinsiyet" id="cinsiyet" value="K" checked> E<input type="radio" name="cinsiyet" id="cinsiyet1" value="E"></td> </tr> <tr> <td>Yabancı Diller</td> <td>İngilizce<input type ="checkbox" name="dil" id="dil" checked value="ingilizce"> Fransızca<input type="checkbox" name="dil1" id="dil1" value="fransızca"> Japonca<input type="checkbox" name="dil2" id="dil2" value="japonca"> </td> <tr> <td>Görüş</td> <td> <textarea name="gorus" id="gorus" placeholder="GÖRÜŞÜNÜZ BİZİM İÇİN ÖNEMLİ"></textarea> </td> </tr> </tr> <tr> <td colspan="2"> <input type="submit" name="kaydet" id="kaydet" value="KAYDET"> <input type="reset" name="sil" id="sil" value="TEMİZLE"> </td> </tr> </table> </form> </body> </html> |
Örnek 3:
|
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 |
<form action="" method="" > Adınız:<input type="text" name="txtIsim"> <br><br> Soyadınız:<input type="text" name="txtSIsim"> <br><br> Şifreniz:<input type="password" name="txtSifre"> <br><br> Cinsiyetiniz:<input type="radio" name="cinsiyet">Erkek <input type="radio" name="cinsiyet">Bayan <br><br> Bildiğiniz Diller:<input type="checkbox" name="dil1">İngilizce <input type="checkbox" name="dil2">Almanca <input type="checkbox" name="dil2">Fransızca <br><br> Yaşadığınız İl:<select> <option>İstanbul</option> <option>Ankara</option> <option>İzmir</option> </select> <br><br> Adresiniz:<br> <textarea rows="5" cols="30"></textarea> <br><br> <input type="submit" name="btnGonder" value="Gönder"> <input type="reset" name="btnTemizle" value="Temizle"> </form> |
Örnek 4:
Html 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 |
<!DOCTYPE html> <html> <head> <title>Web Tasarım</title> <meta charset="utf-8"> </head> <body> <form> <fieldset> <legend> Spor Seçim Formu: </legend> <table border="2" bgcolor="aqua" > <tr> <td>Adı:<br></td> <td><input type="text" name="ad"></td> <tr> <td>Soyadı:<br> <td><input type="text" name="soyad"></td> </tr> <tr> <td>Sınıf:<br> <td><input type="text" name="sınıf"></td> </tr> <tr> <td>Numara:<br> <td><input type="text" name="numara"></td> </tr> <select name="alanlar"> <option value="vol">VOLEYBOL</option> <option value="bas">BASKETBOL</option> <option value="fut">FUTBOL</option> <option value="hen">HENTBOL</option> </select> </table> Mesajınız:<br> <textarea name="mesaj" rows="15" cols="40"> </textarea> </fieldset> </form> <a href="#">GERİ DÖN</a> </body> </html> |
Örnek 5:
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 |
<!DOCTYPE html> <html> <head> <title>Web Tasarım</title> <meta charset="utf-8"> </head> <body> <form> <fieldset> <legend> iletişim Formu </legend> <table border="1"> <tr> <td>Adınız Soyadınız : </td> <td><input type="text" name="adsoyad"> </td> </tr> <tr> <td>E-Posta Adresiniz : </td> <td><input type="text" name="mail"> </td> </tr> <tr> <td>Telefonunuz : </td> <td><input type="text" name="mail" placeholder="(___)(_______)"> </td> </tr> <tr> <td>TC Kimlik Numaranız : </td> <td><input type="text" name="tckimlik" placeholder="11 hane olmalıdır."> </td> </tr> <tr> <td>Bildiğiniz Yabancı Diller</td> <td> <label for="ing">İngilizce</label><input type="checkbox" id="ing" value="ing"><br> <label for="alm">Almanca</label><input type="checkbox" id="alm" value="alm"><br> <label for="fra">Fransızca</label><input type="checkbox" id="fra" value="fra"> </td> </tr> <tr> <td>Mesajınız : </td> <td><textarea cols="22" rows="7" name="mesaj"></textarea> </td> </tr> </table> </fieldset> </form> </body> </html> |
Teşekkür ederiz gayet açıklayıcı ve bilgilendirici olmuş.
çok teşekkürler.
hi, from Erbil thank you for this useful site it was very helpful for better understanding.
Merhaba sayfa açıldığında veya linke tıklandığında form yapmak istiyorum bootstrapteki modale benzeyen nasıl yapbilirim
merhabalar yardımcı olabilir misiniz
Gerçekten çok yardımcı oluyor siteniz.Iyiki varsınız.👍
örnekler gayet güzel olmuş, baya işime yarada.. paylaşım için teşekkürler, iyi çalışmalar!
hocam ben forma resim koymak istiyorum bilgisayardan yüklemek için seçti,ğpim resmin form post etmeden önce nasıl resmi göre bilirim
Cevap:
var dosyaNesne=document.getElementById(“dosya”);
var resimNesne=document.getElementById(“resim”);
dosyaNesne.onchange=function () {
var reader = new FileReader();
reader.onload = function (e) {
// http://www.yazilimbilisim.net
resimNesne.src = e.target.result;
};
// http://www.yazilimbilisim.net
reader.readAsDataURL(this.files[0]);
};
Ahmet bey formu oluşturduk peki kaydet e bastığımızda bilgiler bize nasıl ulaşacak
Bu işlem için php veya asp.net sayfası hazırlamak gerekiyor. Yani işin programlama kısmı devreye giriyor. Verileri veritabanına kaydetme yada mail olarak gönderme gibi işlemler. Yakın zamanda bu konularla ilgili örnekler hazırlamayı düşünüyorum.
Emeğinize sağlık. Tesekkürler
teşekkrler hocam