Kayıt Formun Hk.

Selamlar, bootstrap 5'ten de yararlanarak şöyle bir form tasarımı çıkartıyorum ancak back-end kodlamasına başlayıp bunları form içine aldığımda şöyle oluyor;


Aynı class içerisine almayı denedim olmadı, back-end dev. olarak front-end'de kıvanıyorum resmen Yardımcı olabilecek birisi varsa çok memnun olurum, iyi akşamlar.

Sayfa içerisinde CTRL+U yapıp sadece formun HTML kodlarını iletin kontrol edelim, sayfa online ortamda ise URL de verebilirsiniz.

<div class="container">
<div class="row">
    <div class="text-center">
    <h2>Yazar Kaydı</h2>
    <p>Zaten üyeliğin var mı? <a href="login.php">Buradan</a> giriş yap!</p>
    </div>

    <form method="post" id="kayitformu" action="" onsubmit="return false;">

    <div class="col-md-6 mt-3">
<label><b>Adınız Soyadınız:</b></label>
<input type="text" class="form-control" name="name">
</div>

    <div class="col-md-6 mt-3">
<label><b>Kullanıcı Adınız:</b></label>
<input type="text" class="form-control" name="kadi">
</div>

<div class="col-md-6 mt-3">
<label><b>Mail Adresiniz:</b></label>
<input type="text" class="form-control" name="eposta">
</div>

<div class="col-md-6 mt-3">
<label><b>Telefon Numaranız:</b></label>
<input type="text" class="form-control" name="tel">
</div>

<div class="col-md-6 mt-3">
<label><b>Şifreniz:</b></label>
<input type="text" class="form-control" name="sifre">
</div>

<div class="col-md-6 mt-3">
<label><b>Şifreniz Tekrar:</b></label>
<input type="text" class="form-control" name="sifre">
</div>

<div class="col-md-12 mt-3">
      <label><b>Yazar Biyografiniz:</b></label>
      <textarea class="form-control" id="floatingTextarea2" style="height: 100px" name="bio"></textarea>
      </div>

<div class="col-md-12 mt-3">
<label><b>Profil Resmini Ekle:</b></label><br>
<input type="file" name="pp">
</div>

<button class="btn btn-primary btn-lg mt-5">Kayıt Ol</button>

</form>

</div>
</div>

Buyrun hocam.

Row'dan sonra formun içerisine almışsınız, col classına sahip elementler row divinin değil form elementinin çocuğu olmuş bu yüzden .row > [class^=col-] selectoru çalışmıyor problem yaşıyorsunuz

Şöyle yapabilirsiniz

<div class="container">
    <div class="text-center">
    <h2>Yazar Kaydı</h2>
    <p>Zaten üyeliğin var mı? <a href="login.php">Buradan</a> giriş yap!</p>
    </div>
    <form method="post" id="kayitformu" action="" onsubmit="return false;">
 <div class="row">
    <div class="col-md-6 mt-3">
<label><b>Adınız Soyadınız:</b></label>
<input type="text" class="form-control" name="name">
</div>
 
    <div class="col-md-6 mt-3">
<label><b>Kullanıcı Adınız:</b></label>
<input type="text" class="form-control" name="kadi">
</div>
 
<div class="col-md-6 mt-3">
<label><b>Mail Adresiniz:</b></label>
<input type="text" class="form-control" name="eposta">
</div>
 
<div class="col-md-6 mt-3">
<label><b>Telefon Numaranız:</b></label>
<input type="text" class="form-control" name="tel">
</div>
 
<div class="col-md-6 mt-3">
<label><b>Şifreniz:</b></label>
<input type="text" class="form-control" name="sifre">
</div>
 
<div class="col-md-6 mt-3">
<label><b>Şifreniz Tekrar:</b></label>
<input type="text" class="form-control" name="sifre">
</div>
 
<div class="col-md-12 mt-3">
      <label><b>Yazar Biyografiniz:</b></label>
      <textarea class="form-control" id="floatingTextarea2" style="height: 100px" name="bio"></textarea>
      </div>
 
<div class="col-md-12 mt-3">
<label><b>Profil Resmini Ekle:</b></label><br>
<input type="file" name="pp">
</div>
 
<button class="btn btn-primary btn-lg mt-5">Kayıt Ol</button>
 </div>
</form>
</div>

Eğer üstteki metni de row içerisine almanız gerekiyorsa form elementini rowdan önce başlatın.

Teşekkürler hocam, form içerisine fazla element sokmak istemediğimden öyle yapmıştım şimdi sorun çözüldü. İyi forumlar

Rica ederim, iyi çalışmalar