HTML – CSS İletişim Formu Oluşturma - Web Tasarım & Programlama

Trang chủ » Html Hazır Iletişim Formu » HTML – CSS İletişim Formu Oluşturma - Web Tasarım & Programlama

Có thể bạn quan tâm

Bu yazımızda HTML ile oluşturmuş olduğumuz İletişim Formuna CSS ile bazı düzenlemeler yapacağız. Örneğimizi oluşturduktan sonra Form tasarımımız aşağıdaki gibi olacaktır.

css_form_1

Örneğimize ait iletisim.html dosyamızın içeriği:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> <link href="stil.css" rel="stylesheet"> </head> <body> <form class="tasarim1" action="http://hnkbilisim.com/kaydet.html" method="post"> <label for="ad">Adınız</label> <input type="text" name="ad" id="ad"> <label for="sad">Soyadınız</label> <input type="text" name="sad" id="sad"> <label for="sad">E-Posta</label> <input type="text" name="eposta" id="eposta"> <label></label> <input type="submit" name="kaydet" id="kaydet" value="Kaydı Tamamla"> </form> </body> </html>
12345678910111213141516171819202122 <!doctype html><html><head><meta charset="utf-8"><title>www.yazilimkodlama.com</title><link href="stil.css"rel="stylesheet"></head><body><form class="tasarim1"action="http://hnkbilisim.com/kaydet.html"method="post"><label for="ad">Adınız</label><input type="text"name="ad"id="ad"><label for="sad">Soyadınız</label><input type="text"name="sad"id="sad"><label for="sad">E-Posta</label><input type="text"name="eposta"id="eposta"><label></label><input type="submit"name="kaydet"id="kaydet"value="Kaydı Tamamla"></form></body></html>

Formumuzu düzenlemek için kullandığımız CSS dosyamız stil.css içeriği:

.tasarim1{ margin: 10px auto; width: 300px; padding: 20px; border-radius: 20px; /* Firefox v3.6+ */ background-image:-moz-linear-gradient(50% -19% -90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); /* safari v4.0+ and by Chrome v3.0+ */ background-image:-webkit-gradient(linear,50% -19%,50% 81%,color-stop(0, rgb(220,115,255)),color-stop(1, rgb(255,191,255))); /* Chrome v10.0+ and by safari nightly build*/ background-image:-webkit-linear-gradient(-90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); /* Opera v11.10+ */ background-image:-o-linear-gradient(-90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); /* IE v10+ */ background-image:-ms-linear-gradient(-90deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); background-image:linear-gradient(180deg,rgb(220,115,255) 0%,rgb(255,191,255) 100%); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdc73ff,endColorstr=#ffffbfff,GradientType=0)"; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdc73ff,endColorstr=#ffffbfff,GradientType=0); } .tasarim1 label{ display: block; letter-spacing: 2px; margin-top: 10px; } .tasarim1 input[type="text"]{ width: 260px; padding: 3px 5px; color: #555; box-sizing: border-box; } .tasarim1 input[type="text"]:focus{ color: #fff; background: url(Pencil-128.png) no-repeat #882a32; background-size: 25px 25px; outline: solid 1px #fff; padding-left: 30px; } .tasarim1 input[type="submit"]{ margin-top: 20px; background: #ff7373; border: 2px solid #9b2a32; padding: 5px 10px; color: #fff; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 .tasarim1{margin:10pxauto;width:300px;padding:20px;border-radius:20px;/* Firefox v3.6+ */background-image:-moz-linear-gradient(50%-19%-90deg,rgb(220,115,255)0%,rgb(255,191,255)100%);/* safari v4.0+ and by Chrome v3.0+ */background-image:-webkit-gradient(linear,50%-19%,50%81%,color-stop(0,rgb(220,115,255)),color-stop(1,rgb(255,191,255)));/* Chrome v10.0+ and by safari nightly build*/background-image:-webkit-linear-gradient(-90deg,rgb(220,115,255)0%,rgb(255,191,255)100%);/* Opera v11.10+ */background-image:-o-linear-gradient(-90deg,rgb(220,115,255)0%,rgb(255,191,255)100%);/* IE v10+ */background-image:-ms-linear-gradient(-90deg,rgb(220,115,255)0%,rgb(255,191,255)100%);background-image:linear-gradient(180deg,rgb(220,115,255)0%,rgb(255,191,255)100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdc73ff,endColorstr=#ffffbfff,GradientType=0)";filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffdc73ff,endColorstr=#ffffbfff,GradientType=0);} .tasarim1 label{display:block;letter-spacing:2px;margin-top:10px;} .tasarim1 input[type="text"]{width:260px;padding:3px5px;color:#555;box-sizing:border-box;} .tasarim1 input[type="text"]:focus{color:#fff;background:url(Pencil-128.png)no-repeat#882a32;background-size:25px25px;outline:solid1px#fff;padding-left:30px;} .tasarim1 input[type="submit"]{margin-top:20px;background:#ff7373;border:2pxsolid#9b2a32;padding:5px10px;color:#fff;}

Örneği İndir

Bunu paylaş:

  • X
  • Facebook

Từ khóa » Html Hazır Iletişim Formu