HTML Form Örnekleri - Web Tasarım & Programlama

Trang chủ » Html Kodları Form Oluşturma » HTML Form Örnekleri - Web Tasarım & Programlama

Có thể bạn quan tâm

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

html_form_1

<!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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859 <!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"requiredplaceholder="Lütfen Adınızı Girin"></td></tr><tr><td>Soyad :</td><td><input type="text"name="soyad"id="soyad"requiredplaceholder="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

html_form_2

<!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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 <!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"checkedvalue="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:

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

<!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>
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253 <!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><ahref="#">GERİDÖN</a></body></html>

Örnek 5:

Kodlar:

<!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>
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 <!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ızSoyadı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>

Bunu paylaş:

  • X
  • Facebook

Từ khóa » Html Kodları Form Oluşturma