HTML Form Örnekleri - Tasarım Kodlama

Site ziyaretçisinden bazı veriler toplamak istediğinizde HTML Formları gerekir. Örneğin, kullanıcı kaydı sırasında ad, e-posta adresi, kredi kartı vb. Bilgileri toplamak istiyorsunuz.

Bir form site ziyaretçisinden girdi alacak ve daha sonra CGI, ASP Script veya PHP betiği gibi bir arka uç uygulamasına gönderecektir. Arka uç uygulaması, içinde tanımlanmış iş mantığına dayanan geçirilen veriler üzerinde gerekli işlemleri gerçekleştirecektir. uygulama.

Metin alanları, textarea alanları, açılır menüler, radyo düğmeleri, onay kutuları vb. gibi çeşitli form öğeleri vardır.

HTML Form Örnekleri

Aşağıdaki form örnek resimleri ve HTML kodları ile HTML Form çalışmanıza yardımcı olacaktır.

HTML Kod:

<form action="http://www.hnkbilisim.net/form-bilgi.php" enctype="multipart/form-data"> <h1>ABC Tasarım Programı Kurulum ve Satış Sözleşmesi :)</h1> <fieldset> <legend>Sözleşme Onay</legend> <label><input type="checkbox" required>Aşağıdaki bilgilerin doğruluğunu kabul ediyorum ve sözleşmeyi onaylıyorum.</label><br> <input type="submit" value="Formu Kaydet"> <input type="reset" value="Formu Temizle"> </fieldset> <fieldset> <legend>Kişisel Bilgiler</legend> <table width="350"> <tr> <td>Form Güvenlik ID</td> <td><input type="text" id="gid" name="gid" value="asdfgh" disabled></td> </tr> <tr> <td>Ad</td> <td><input type="text" id="ad" name="ad" placeholder="Adınızı girin" required></td> </tr> <tr> <td>Soyad</td> <td><input type="text" id="soyad" placeholder="Adınızı girin" name="soyad" required></td> </tr> <tr> <td>Yaş</td> <td><input type="number" min="20" max="100" id="yas" name="yas"></td> </tr> <tr> <td>Mail Adresi</td> <td><input type="email" id="eposta" name="eposta" required></td> </tr> <tr> <td>Fotoğraf Ekle</td> <td><input type="file" id="fotom" name="fotom"></td> </tr> </table> </fieldset> <fieldset> <legend>Diğer Bilgiler</legend> <table width="350"> <tr> <th colspan="2">Buradaki alanlar Mesleki Deneyimi Kapsar</th> </tr> <tr> <td>Sektöre Giriş Tarihi</td> <td> <input type="date" name="tarih" id="tarih" value="2010-01-01"> </td> </tr> <tr> <td>Sektör Deyimi</td> <td> <label><input type="radio" name="deneyim">1 - 5 yıl</label><br> <label><input type="radio" name="deneyim">6 - 10 yıl</label><br> <label><input type="radio" name="deneyim">11 - 15 yıl</label><br> <label><input type="radio" name="deneyim">15 üzeri yıl</label> </td> </tr> <tr> <td>Programlama Dilleri</td> <td> <select name="dil" id="dil" multiple size="5"> <option>C#</option> <option selected>PHP</option> <option>Java</option> <option>Python</option> <option>JavaScript</option> <option>C++</option> <option>C</option> <option>Pascal</option> </select> </td> </tr> </table> </fieldset> <fieldset> <legend>Sözleşme Kopyası</legend> <textarea id="kopya" name="kopya" rows="5" readonly cols="50" >Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</textarea> </fieldset> <fieldset> <legend>Mail Listesi</legend> Mail listesine katılmak <b>istiyorum</b><input type="radio" name="liste" checked><br> Mail listesine katılmak <b><u>istemiyorum</u></b><input type="radio" name="liste"> </fieldset> </form>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687

<form action="http://www.hnkbilisim.net/form-bilgi.php"enctype="multipart/form-data"><h1>ABC Tasarım Programı Kurulum ve Satış Sözleşmesi :)</h1><fieldset><legend>Sözleşme Onay</legend><label><input type="checkbox"required>Aşağıdaki bilgilerin doğruluğunu kabul ediyorum ve sözleşmeyi onaylıyorum.</label><br><input type="submit"value="Formu Kaydet"><input type="reset"value="Formu Temizle"></fieldset><fieldset><legend>Kişisel Bilgiler</legend><table width="350"><tr><td>Form Güvenlik ID</td><td><input type="text"id="gid"name="gid"value="asdfgh"disabled></td></tr><tr><td>Ad</td><td><input type="text"id="ad"name="ad"placeholder="Adınızı girin"required></td></tr><tr><td>Soyad</td><td><input type="text"id="soyad"placeholder="Adınızı girin"name="soyad"required></td></tr><tr><td>Yaş</td><td><input type="number"min="20"max="100"id="yas"name="yas"></td></tr><tr><td>Mail Adresi</td><td><input type="email"id="eposta"name="eposta"required></td></tr><tr><td>Fotoğraf Ekle</td><td><input type="file"id="fotom"name="fotom"></td></tr></table></fieldset><fieldset><legend>Diğer Bilgiler</legend><table width="350"><tr><th colspan="2">Buradaki alanlar Mesleki Deneyimi Kapsar</th></tr><tr><td>Sektöre Giriş Tarihi</td><td><input type="date"name="tarih"id="tarih"value="2010-01-01"></td></tr><tr><td>Sektör Deyimi</td><td><label><input type="radio"name="deneyim">1 - 5 yıl</label><br><label><input type="radio"name="deneyim">6 - 10 yıl</label><br><label><input type="radio"name="deneyim">11 - 15 yıl</label><br><label><input type="radio"name="deneyim">15 üzeri yıl</label></td></tr><tr><td>Programlama Dilleri</td><td><select name="dil"id="dil"multiplesize="5"><option>C#</option><option selected>PHP</option><option>Java</option><option>Python</option><option>JavaScript</option><option>C++</option><option>C</option><option>Pascal</option></select></td></tr></table></fieldset><fieldset><legend>Sözleşme Kopyası</legend><textarea id="kopya"name="kopya"rows="5"readonlycols="50" >Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</textarea></fieldset><fieldset><legend>Mail Listesi</legend> Mail listesine katılmak <b>istiyorum</b><input type="radio"name="liste"checked><br> Mail listesine katılmak <b><u>istemiyorum</u></b><input type="radio"name="liste"></fieldset></form>

CSS ile birlikte HTML Form Oluşturmak isterseniz aşağıdaki örnek size fikir verecektir.

<!doctype html> <html> <head> <meta charset="utf-8"> <title>FORM KONTROL</title> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic); * { margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased; font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { font-family: "Roboto", Helvetica, Arial, sans-serif; font-weight: 100; font-size: 12px; line-height: 30px; color: #777; background: #ac3d3d; } .container { max-width: 400px; width: 100%; margin: 0 auto; position: relative; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] { font: 400 12px/16px "Roboto", Helvetica, Arial, sans-serif; } #contact { background: #F9F9F9; padding: 25px; margin: 150px 0; box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24); } #contact h3 { display: block; font-size: 30px; font-weight: 300; margin-bottom: 10px; } #contact h4 { margin: 5px 0 15px; display: block; font-size: 13px; font-weight: 400; } fieldset { border: medium none !important; margin: 0 0 10px; min-width: 100%; padding: 0; width: 100%; } #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea { width: 100%; border: 1px solid #ccc; background: #FFF; margin: 0 0 5px; padding: 10px; } #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover { -webkit-transition: border-color 0.3s ease-in-out; -moz-transition: border-color 0.3s ease-in-out; transition: border-color 0.3s ease-in-out; border: 1px solid #aaa; } #contact textarea { height: 100px; max-width: 100%; resize: none; } #contact button[type="submit"] { cursor: pointer; width: 100%; border: none; background: #4CAF50; color: #FFF; margin: 0 0 5px; padding: 10px; font-size: 15px; } #contact button[type="submit"]:hover { background: #43A047; -webkit-transition: background 0.3s ease-in-out; -moz-transition: background 0.3s ease-in-out; transition: background-color 0.3s ease-in-out; } #contact button[type="submit"]:active { box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5); } .copyright { text-align: center; } #contact input:focus, #contact textarea:focus { outline: 0; border: 1px solid #aaa; } ::-webkit-input-placeholder { color: #888; } :-moz-placeholder { color: #888; } ::-moz-placeholder { color: #888; } :-ms-input-placeholder { color: #888; } </style> </head> <body> <div class="container"> <form id="contact" action="" method="post"> <h3>Tasarım Kodlama</h3> <h4>İletişim Formu</h4> <fieldset> <input placeholder="Adınız" type="text" tabindex="1" required autofocus> </fieldset> <fieldset> <input placeholder="Soyadınız" type="email" tabindex="2" required> </fieldset> <fieldset> <input placeholder="Telefon(İsteğe bağlı)" type="tel" tabindex="3" required> </fieldset> <fieldset> <input placeholder="Web Sitesi(İsteğe bağlı)" type="url" tabindex="4" required> </fieldset> <fieldset> <textarea placeholder="Mesajınızı girin...." tabindex="5" required></textarea> </fieldset> <fieldset> <button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Kaydı Gönder.</button> </fieldset> </form> </div> </body> </html>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183

<!doctype html><html><head><meta charset="utf-8"><title>FORM KONTROL</title> <style>@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,600,400italic);* {margin:0;padding:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;} body {font-family:"Roboto",Helvetica,Arial,sans-serif;font-weight:100;font-size:12px;line-height:30px;color:#777;background:#ac3d3d;} .container {max-width:400px;width:100%;margin:0auto;position:relative;} #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea, #contact button[type="submit"] {font:40012px/16px"Roboto",Helvetica,Arial,sans-serif;} #contact {background:#F9F9F9;padding:25px;margin:150px0;box-shadow:0020px0rgba(0,0,0,0.2),05px5px0rgba(0,0,0,0.24);} #contact h3 {display:block;font-size:30px;font-weight:300;margin-bottom:10px;} #contact h4 {margin:5px015px;display:block;font-size:13px;font-weight:400;} fieldset {border:mediumnone!important;margin:0010px;min-width:100%;padding:0;width:100%;} #contact input[type="text"], #contact input[type="email"], #contact input[type="tel"], #contact input[type="url"], #contact textarea {width:100%;border:1pxsolid#ccc;background:#FFF;margin:005px;padding:10px;} #contact input[type="text"]:hover, #contact input[type="email"]:hover, #contact input[type="tel"]:hover, #contact input[type="url"]:hover, #contact textarea:hover {-webkit-transition:border-color0.3sease-in-out;-moz-transition:border-color0.3sease-in-out;transition:border-color0.3sease-in-out;border:1pxsolid#aaa;} #contact textarea {height:100px;max-width:100%;resize:none;} #contact button[type="submit"] {cursor:pointer;width:100%;border:none;background:#4CAF50;color:#FFF;margin:005px;padding:10px;font-size:15px;} #contact button[type="submit"]:hover {background:#43A047;-webkit-transition:background0.3sease-in-out;-moz-transition:background0.3sease-in-out;transition:background-color0.3sease-in-out;} #contact button[type="submit"]:active {box-shadow:inset01px3pxrgba(0,0,0,0.5);} .copyright {text-align:center;} #contact input:focus, #contact textarea:focus {outline:0;border:1pxsolid#aaa;} ::-webkit-input-placeholder {color:#888;} :-moz-placeholder {color:#888;} ::-moz-placeholder {color:#888;} :-ms-input-placeholder {color:#888;} </style></head><body><div class="container"><form id="contact"action=""method="post"><h3>Tasarım Kodlama</h3><h4>İletişim Formu</h4><fieldset><input placeholder="Adınız"type="text"tabindex="1"requiredautofocus></fieldset><fieldset><input placeholder="Soyadınız"type="email"tabindex="2"required></fieldset><fieldset><input placeholder="Telefon(İsteğe bağlı)"type="tel"tabindex="3"required></fieldset><fieldset><input placeholder="Web Sitesi(İsteğe bağlı)"type="url"tabindex="4"required></fieldset><fieldset><textarea placeholder="Mesajınızı girin...."tabindex="5"required></textarea></fieldset><fieldset><button name="submit"type="submit"id="contact-submit"data-submit="...Sending">Kaydı Gönder.</button></fieldset></form></div></body></html>

EtiketlerForm Örnekleri HTML Etiketleri HTML Form Kullanımı HTML Formlar