İletişim Formu CSS kodları

vadeeer

vadeeer

Hectopat
Katılım
31 Ocak 2017
Mesajlar
49
Daha fazla  
Cinsiyet
Erkek
Merhaba, resimde gördüğünüz formun CSS kodları nedir acaba? Teşekkürler.

Adsız.png
 
Son düzenleyen: Moderatör:
Aklın karışmasın diye elemanların içine yazdım bazı kodları onları inceledikten sonra ayırırsın sen.

Ekran Resmi 2017-09-16 00.55.03.png


Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style>

/*Form elemanlarının boşlukları sıfırladık*/
input{padding: 0px; margin: 0px; }

/*Gönder butonun şekillendirdik*/
.submit
{
  color: #fff;
  background: #000;
  border: none;
  padding: 5px 12px;
  font-size: 15px;
  float: right;
  position: relative;
  top: 10px
}

/*Input içindeki yazının(Placeholder kısmının) rengini değiştirdik.*/
::-webkit-input-placeholder
{
  color: #ACACAC;
}
</style>
<title>İletişim Formu</title>
</head>
<body>
<form action="" style="width: 270px;">
<input type="text" placeholder="İsim" style="width: 44%; padding: 5px" />
<input type="text" placeholder="Email" style="width: 44%; padding: 5px" />
<input type="text" placeholder="Mesaj" style="width: 95%; padding: 5px;position: relative; top: 5px;" />
<input type="submit" class="submit" style="float: right; position: relative; top: 10px"/>
</form>
</body>
</html>
 
Son düzenleme:
Buğra tulpar dedi:
Aklın karışmasın diye elemanların içine yazdım bazı kodları onları inceledikten sonra ayırırsın sen.

Eki Görüntüle 259713

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style>

/*Form elemanlarının boşlukları sıfırladık*/
input{padding: 0px; margin: 0px; }

/*Gönder butonun şekillendirdik*/
.submit
{
  color: #fff;
  background: #000;
  border: none;
  padding: 5px 12px;
  font-size: 15px;
  float: right;
  position: relative;
  top: 10px
}

/*Input içindeki yazının(Placeholder kısmının) rengini değiştirdik.*/
::-webkit-input-placeholder
{
  color: #ACACAC;
}
</style>
<title>İletişim Formu</title>
</head>
<body>
<form action="" style="width: 270px;">
<input type="text" placeholder="İsim" style="width: 44%; padding: 5px" />
<input type="text" placeholder="Email" style="width: 44%; padding: 5px" />
<input type="text" placeholder="Mesaj" style="width: 95%; padding: 5px;position: relative; top: 5px;" />
<input type="submit" class="submit" style="float: right; position: relative; top: 10px"/>
</form>
</body>
</html>
Genişletmek için tıkla...

Olmadı gibi ilginiz için teşekkür ederim

Buğra tulpar dedi:
Aklın karışmasın diye elemanların içine yazdım bazı kodları onları inceledikten sonra ayırırsın sen.

Eki Görüntüle 259713

Kod: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style>

/*Form elemanlarının boşlukları sıfırladık*/
input{padding: 0px; margin: 0px; }

/*Gönder butonun şekillendirdik*/
.submit
{
  color: #fff;
  background: #000;
  border: none;
  padding: 5px 12px;
  font-size: 15px;
  float: right;
  position: relative;
  top: 10px
}

/*Input içindeki yazının(Placeholder kısmının) rengini değiştirdik.*/
::-webkit-input-placeholder
{
  color: #ACACAC;
}
</style>
<title>İletişim Formu</title>
</head>
<body>
<form action="" style="width: 270px;">
<input type="text" placeholder="İsim" style="width: 44%; padding: 5px" />
<input type="text" placeholder="Email" style="width: 44%; padding: 5px" />
<input type="text" placeholder="Mesaj" style="width: 95%; padding: 5px;position: relative; top: 5px;" />
<input type="submit" class="submit" style="float: right; position: relative; top: 10px"/>
</form>
</body>
</html>
Genişletmek için tıkla...
PHP ile yaptığım için olmamış olabilir mi acaba?
 

Dosya Ekleri

  • Adsız.png
    Adsız.png
    2,7 KB · Görüntüleme: 178
Buğra tulpar dedi:
Kullandığınız kodu buraya yazar mısınız?
Genişletmek için tıkla...
CSS kodları sizin yazdıklarınız.

PHP: 
 <form method="post" style="width: 270px;" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
  <input type="text" placeholder="İsim" style="width: 44%; padding: 5px" name="name" value="<?php echo $name;?>">
  <span class="error"> <?php echo $nameErr;?></span>
  <br><br>
  <input type="text" placeholder="E-mail" style="width: 44%; padding: 5px" name="email" value="<?php echo $email;?>">
  <span class="error"> <?php echo $emailErr;?></span>
  <br><br>
  <textarea name="comment" placeholder="Mesaj" style="width: 95%; padding: 5px;position: relative; top: 5px;" rows="5" cols="40"><?php echo $comment;?></textarea>
  <br><br>
  <input type="submit" class="submit" name="submit" style="float: right; position: relative; top: 10px" value="GÖNDER">
</form>
 
Textboxların yazına yazı mı yazdığınız? İsim, Mail gibi. Hatalar mesajları sayfa yüklenirken gizli durumda mı? Çünkü ben tasarım yüzdelerini hata mesajları, açıklama satırlarını göz önüne almadan verdim. Bir öneri olacak hataları textbox aralarına yazmayın bence. Ek olarak br kullanmayın, satır atlıyor ve tasarım bozuluyor.

Edit: Buyrun hocam biraz topladım. Textarea için max-width verdim ki gereğinden fazla genişlemesin.

Kod: 
<body>
 <form method="post" style="width: 270px;" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>
  <input type="text" placeholder="İsim" style="width: 43%; padding: 5px" name="name" value="<?php echo $name;?>">
  <span class="error" style="display: none;">Hata</span>
  <input type="text" placeholder="E-mail" style="width: 43%; padding: 5px" name="email" value="<?php echo $email;?>">
  <span class="error" style="display: none;">Hata</span>
  <textarea name="comment" placeholder="Mesaj" style="max-width: 93%; padding: 5px;position: relative; top: 5px;" rows="5" cols="40">asdasd</textarea>
  <input type="submit" class="submit" name="submit" style="float: right; position: relative; top: 10px" value="GÖNDER">
</form>
 
Son düzenleme:
Yok hata ve
Buğra tulpar dedi:
Textboxların yazına yazı mı yazdığınız? İsim, Mail gibi. Hatalar mesajları sayfa yüklenirken gizli durumda mı? Çünkü ben tasarım yüzdelerini hata mesajları, açıklama satırlarını göz önüne almadan verdim. Bir öneri olacak hataları textbox aralarına yazmayın bence. Ek olarak br kullanmayın, satır atlıyor ve tasarım bozuluyor.
Genişletmek için tıkla...
Hata mesajlarını kaldırayım mı?
 
Buğra tulpar dedi:
Kaldırmanıza gerek yok. Sadece gizleyin. Hata gerçekleştiği zaman gösterirsiniz. Ben size verdiğim yeni kodda gizledim zaten.
Genişletmek için tıkla...

Bu sefer oldu gibi çok teşekkür ederimi. Düzenlemeleri kendim yaparım

Buğra tulpar dedi:
Textboxların yazına yazı mı yazdığınız? İsim, Mail gibi. Hatalar mesajları sayfa yüklenirken gizli durumda mı? Çünkü ben tasarım yüzdelerini hata mesajları, açıklama satırlarını göz önüne almadan verdim. Bir öneri olacak hataları textbox aralarına yazmayın bence. Ek olarak br kullanmayın, satır atlıyor ve tasarım bozuluyor.

Edit: Buyrun hocam biraz topladım. Textarea için max-width verdim ki gereğinden fazla genişlemesin.

Kod: 
<body>
 <form method="post" style="width: 270px;" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>
  <input type="text" placeholder="İsim" style="width: 43%; padding: 5px" name="name" value="<?php echo $name;?>">
  <span class="error" style="display: none;">Hata</span>
  <input type="text" placeholder="E-mail" style="width: 43%; padding: 5px" name="email" value="<?php echo $email;?>">
  <span class="error" style="display: none;">Hata</span>
  <textarea name="comment" placeholder="Mesaj" style="max-width: 93%; padding: 5px;position: relative; top: 5px;" rows="5" cols="40">asdasd</textarea>
  <input type="submit" class="submit" name="submit" style="float: right; position: relative; top: 10px" value="GÖNDER">
</form>
Genişletmek için tıkla...
Hataları gizlemişsiniz ya kullanıcı hata yaptığını nasıl anlayacak peki?
 

Dosya Ekleri

  • Adsız.png
    Adsız.png
    127,2 KB · Görüntüleme: 174
vadeeer dedi:
Bu sefer oldu gibi çok teşekkür ederimi. Düzenlemeleri kendim yaparım


Hataları gizlemişsiniz ya kullanıcı hata yaptığını nasıl anlayacak peki?
Genişletmek için tıkla...
Hatanın nerede olduğu göstermek için gizledim ben onları. Zaten siz hatayı if ile sorgulayıp yazdıracağınız için sayfa ilk yüklendiğinde görünmeyecek hatalar dolayısıyla gizlemenize gerek kalmayacak. Şu andaki tek sorun hataları inputların arasına yazmanız. Onları ya en üstte ya da altta yazdırın böylece tasarım bozulmaz.
 
Uyarı! Bu konu 9 yıl önce açıldı.
Muhtemelen daha fazla tartışma gerekli değildir ki bu durumda yeni bir konu başlatmayı öneririz. Eğer yine de cevabınızın gerekli olduğunu düşünüyorsanız buna rağmen cevap verebilirsiniz.

Benzer konular

bedaf
HTML CSS ile iletişim formu nasıl yapılır?
Mesaj
4
Görüntüleme
2.791
bedaf
bedaf
AyberkSokul
  • Çözüldü
Çözüldü  CSS Değiştirilebilir PHP iletişim formu nereden bulunur?
Mesaj
3
Görüntüleme
758
SKNET
S
S
İletişim Formu Hazırlama
Mesaj
4
Görüntüleme
1.540
Alper P
Alper P
onur can erdem
Site iletişim formu çalışmıyor
Mesaj
3
Görüntüleme
2.041
İbrahim_Tudek
İbrahim_Tudek
Vexilon
WordPress İletişim Formu Ekleme Sorunu
Mesaj
2
Görüntüleme
1.438
YetReklamAjansı
YetReklamAjansı

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı