Yazılım Yazarı Menu

Permalink:

Form Elementlerini Div Kullanarak Düzenli Hâle Getirmek

Bir önceki dersimizde tablo ile yaptığımız düzenlemeyi bu dersimizde div yapısını kullanarak yapmayı öğreneceğiz.
Yine ele alacağımız form önceki dersimizde ele aldığımız form olacak.

<form action="orneksayfa.php" method="post">
Kullanıcı Adı: <input type="text" name="kullaniciadi" />
Parola: <input type="password" name="sifre" />
<input type="submit" value="Giriş yap" />
</form>

Div yapısı için css gerektiğinden elimden geldiğince detayına girmeden bize şuan lazım olan kısmını anlatmaya çalışacağım.
Öncelikle div yapısının özelliklerine bir bakalım;

  •  Div: Bir takım css kurallarına verdiğimiz ve kapladığı kodlara bu css kurallarını uygulayan html tagıdır. Kullanımı: <div> İçerik </div>
    • style= : <div> başlangıç tagımıza gelen bir özelliktir, div’in kapsadığı alana uygulanacak olan css kurallarını bu tagın içerisine kodlarız.
      Kullanımı: <div style=”css kodları>İçerik</div>
Şimdi bize bu dersimiz de lazım olacak temel css özelliklerini inceleyelim.
  • width: Genişlik anlamına gelmektedir, div tagı mızın genişliğinin ne kadar olacağını belirlerken bu tag ile belirleriz.
  • height: Yükseklik anlamına gelmektedir, div tagımızın ne kadar yükseklikte olacağını belirlerken bu tag ile belirleriz.
    • min-height: en az olacak yükseklik değeri, bunun kullanımı sonucunda divinizin için boşta olsa burada belirttiğiniz pixel kadar yükseklik sağlanır, eğer içerik olur ve bu yükseklik aşılırsa div yüksekliği otomatik olarak ayarlanır.
  • float: Yaslama tagıdır, div tagımızı sağa ve sola yaslamamıza sağlar.
    • float:right; : Div tagını sağa yaslar.
    • float:left; Div tagını sola yaslar.
  • padding:Boşlukları ayarlamamızı sağlar.
    • padding: 5px; : Sağ,sol,üst ve alttan 5 pixel boşluk bırakır.
    • padding: Üst Sağ Alt Sol;
      • padding: 5px 4px 3px 2px; : bu kod üstten 5 px, sağdan 4px, alttan 3px ve soldan 2px boşluk bırakmamıza sağlar. 
      • Tek bir tarafa boşluk bırakmak isterseniz bunu
        padding: 2px 0 0 0; şeklinde yapabilirsiniz.
  • margin:Div’in diğer öğelerden uzaklığını ayarlamamızı sağlar.
    • Paddingdeki üst sağ alt sol kuralı margin içinde geçerlidir.
      • margin: Üst Sağ Alt Sol;
  • border: Kenarlık vermemizi sağlar.
    Kullanımı: border: boyut tarz renk_kodu;
    border: 1px solid #000;
  • color: Yazı rengini ayarlamamızı sağlar, ayarlandığında div in içindeki yazılar bu renkte olacaktır.
    Kullanımı: color: red; 
  • list-style-type: Listeleme tarzını ayarlamamızı sağlar. 
    • square: Liste başlarında kare kullanılır.
    • upper-roman: Liste başlarında romen rakamları kullanılır.
    • none: Liste başında herhangi birşey gözükmez.
    • lower-alpha: Liste başlarında küçük harf kullanılır.

Şimdi bu css özelliklerini kullanarak div yapılarımızı oluşturacağız, daha sonra ilgili form elementlerimizi divlerin içine uygun şekilde yerleştireceğiz.
<div style="border:1px solid #000; width:300px; min-height:110px;">
<form action="orneksayfa.php" method="post">
<ul style="list-style-type:none; padding:5px;">
<li style="float:left; width:100px;">Kullanıcı Adı:</li>
<li><input type="text" name="kullaniciadi"/></li>
<li style="float:left; width:100px;">Parola:</li>
<li><input type="password" name="sifre" /></li>
<li style="float:right; padding:0 30px 0 0;">
<input type="submit" value="Giriş yap" />
</li>
</ul>
</form>
</div>

Sonuç:

(2702) kez okundu.

    • Mert ÖZGÜN

      Tekrar tebrik ediyorum. İlerleyen dönemlerde html-css üzerine pratik çalışmalarınızı bekliyorum. Bilgi var ancak kullanmayı bilmedikten sonra bir işe yaramıyor :)

      • Yazılım Yazarı

        Şu aşamada amacım temel eğitim, html ve form elementleriyle bir düzen oluşturmaya kadar geldik sırada php’ye giriş yer almakta temel php eğitimini de sağladıktan sonra css den başlayıp tasarım olaylarını işleyeceğiz. Yorum için teşekkürler :)

    • Yorum bırakıyor olduğunuz için teşekkürler.
    escort bayan ankara ankara escort ankara escort bayan sıhhıye escort