form içerisindeki nesneleri ileri geri olarak sayfalama yapabilir miyim ???

merhaba arkadaşlar bu şekilde uzadı uzadıya giden bir form elemanları var

<form action="oku.php" method="post">
<p class="sorular"> <b>Cinsiyetiniz</b></p>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Cinsiyetiniz" id="inlineRadio1" value="Kız" required>
<label class="form-check-label" for="inlineRadio1">Kız</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Cinsiyetiniz" id="inlineRadio2" value="Erkek" required>
<label class="form-check-label" for="inlineRadio2">Erkek</label>
</div><br><br>

<p class="sorular"><b>Annenizin Mesleği</b></p>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="anne_meslegi" id="anne_meslek1" value="Ev Hanımı" onclick="ajaxValidate(this)"required>
<label class="form-check-label" for="anne_meslek1">Ev Hanımı</label>



bu liste çok uzun ileri geri buton nasıl yapabilirim misal bu formu 2 sayfalık yapmam gerek ama php ile çözemedim.... veriler veritabanından alınmıyor formlar tek sayfa içerisinde uzun çarşaf liste olmuş gibi.

İyi geceler bu işlem için PHP değil JavaScript kullanmalısın formunu istediğin şekilde birkaç parçaya böl her parça için bir div oluştur ve class tanımla ilk div in style ı display block diğerlerini display none yok sonra alta birkaç ufak sayfa sayısı gösteren buton atıp tıklanan sayıya göre bu divlerin block none ayarını yaparsın class ataman div i seçebilmek için

 <form action="oku.php" method="post" class="formArea">
   
<div class="firstArea">
<p class="sorular"> <b>Cinsiyetiniz</b></p>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Cinsiyetiniz" id="inlineRadio1" value="Kız" required>
<label class="form-check-label" for="inlineRadio1">Kız</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="Cinsiyetiniz" id="inlineRadio2" value="Erkek" required>
<label class="form-check-label" for="inlineRadio2">Erkek</label>
</div></div>

<button> Devam </button>

<div class="secondArea">
<p class="sorular"><b>Annenizin Mesleği</b></p>

<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="anne_meslegi" id="anne_meslek1" value="Ev Hanımı" onclick="ajaxValidate(this)"required>
<label class="form-check-label" for="anne_meslek1">Ev Hanımı</label>

   
       </div></div>
       
       <br><br>
       <button type="submit">Gönder</button>
        
    </form>

    
        document.querySelector(".secondArea").style.display = "none";
    
        document.querySelector(".formArea button").addEventListener('click', function(e) {
            
            e.preventDefault();
            
             document.querySelector(".secondArea").style.display = "block";
             document.querySelector(".firstArea").style.display = "none";
            
            document.querySelector('.formArea button').style.display = "none";

        })

Buradan test edebilirsiniz: https://jsfiddle.net/vpt385ah/

yardımlarınız için çok tşk ederim... tek bir sorun kaldı arkadaşlar ileri butonu diğer sayfaya geçiyorum ama sayfa ortasına denk geliyor. Neden scroll yukarıda olması gerekir.

tmm arkadaşlar scriptte window.scrollBy(0,-2000) bunu yazarak scrolu en başa attım güzel oldu ))