Programlama öğrenmek için her zaman yeni örnekler denemelisiniz. Bunun için bugün sizlere Css ve Html İle İletişim Formu Oluşturma Uygulaması programını aktaracağız. Css ve Html de kodlama nasıl gerçekleşir? Css ve Html İle İletişim Formu Oluşturma Uygulaması nasıl kodlanır? Gibi sorularınızın cevabını bu içeriğimizde bulabilirsiniz.
Css ve Html İle İletişim Formu Oluşturma Uygulaması Kod Alanı
Css ve Html web programlama dilinde İletişim Formu Oluşturma Uygulaması kod metnini oluşturduk. Bu uygulamamızda html web programlama dili ile oluşturduğumuz formumuzun içerisinde iletişim formuna css programlama ile bazı ayarlamalar yapacağız. Bu uygulamamız bir web tasarım için oldukça kendinizi geliştirebileceğiniz bir uygulamadır.
Uygulamanın html kod metin alanı aşağıdaki gibidir:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>www.programlamahocam.com</title>
<link href="stil.css" rel="stylesheet">
</head>
<body>
<form class="tasarim1" action="http://programlamahocam.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>
.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;
}Bu uygulamada herhangi bir sorun yaşarsanız aşağıya yorum olarak bırakabilirsiniz. Bunun yanı sıra web sitemizdeki diğer hazır Html programlama örneklerine ulaşmak için bu linke tıklayabilirsiniz.