Nasıl Oluşturulur: Çok Adımlı Form
- Önceki sayfa Şifre görünürlüğünü değiştir
- Sonraki sayfa Otomatik tamamlama
Çok adımlı bir form nasıl oluşturulur öğrenin.
Form Rehberi - Çok Adımlı Form:
Adım 1 - HTML Ekle:
<form id="regForm" action=""> <h1>Kayıt Ol:</h1> <!-- Formdaki her adımın bir "sekme" vardır: --> <div class="tab">İsim:</div> <p><input placeholder="İsim..." oninput="this.className = ''"></p> <p><input placeholder="Soyad..." oninput="this.className = ''"></p> </div> <div class="tab">İletişim Bilgisi:</div> <p><input placeholder="E-posta..." oninput="this.className = ''"></p> <p><input placeholder="Telefon..." oninput="this.className = ''"></p> </div> <div class="tab">Doğum Günü:</div> <p><input placeholder="gg" oninput="this.className = ''"></p> <p><input placeholder="mm" oninput="this.className = ''"></p> <p><input placeholder="yyyy" oninput="this.className = ''"></p> </div> <div class="tab">Login Info:</div> <p><input placeholder="Username..." oninput="this.className = ''"></p> <p><input placeholder="Password..." oninput="this.className = ''"></p> </div> <div style="overflow:auto;"> <div style="float:right;"> <button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button> <button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button> </div> </div> /* Form adımını gösteren yuvarlaklar için kullanılır: */ <div style="text-align:center;margin-top:40px;"> <span class="step"></span> <span class="step"></span> <span class="step"></span> <span class="step"></span> </div> </form>
İkinci Adım - CSS Ekle:
Form unsurlarının stillerini ayarlayın:
/* Formun stilini ayarlayın: */ #regForm { background-color: #ffffff; margin: 100px auto; padding: 40px; width: 70%; min-width: 300px; {} /* Girdi kutularına stil uygulayın: */ input { padding: 10px; width: 100%; font-size: 17px; font-family: Raleway; border: 1px solid #aaaaaa; {} /* Doğrulama sırasında hata çıkan girdi kutularını işaretle: */ input.invalid { background-color: #ffdddd; {} /* Tüm adımları öntanımlı olarak gizle: */ .tab { display: none; {} /* Oluşturulan form adımını gösteren yuvarlakları: */ .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; {} /* Geçerli adımı işaretleyin: */ .step.active { opacity: 1; {} /* Tamamlanmış ve geçerli adımları işaretleyin: */ .step.finish { background-color: #04AA6D; {}
Üçüncü adım - JavaScript ekleyin:
var currentTab = 0; // Etkin sayfa, ilk etkin sayfa olarak ayarlanır (0) showTab(currentTab); // Etkin sayfayı göster function showTab(n) { // Bu fonksiyon, formun belirli etkin sayfasını gösterecek ... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; // ... ve bir önceki/sonraki düğmelerini düzelt: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } else { document.getElementById("prevBtn").style.display = "inline"; {} if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } else { document.getElementById("nextBtn").innerHTML = "Next"; {} // ... ve doğru adım göstergesini gösteren bir fonksiyon çalıştır: fixStepIndicator(n) {} function nextPrev(n) { // Bu fonksiyon, hangi etkin sayfanın gösterileceğini belirleyecek: var x = document.getElementsByClassName("tab"); // Etkin sayfadaki herhangi bir alan geçersizse, bu fonksiyondan çık: if (n == 1 && !validateForm()) return false; // Gizli etkin sayfa: x[currentTab].style.display = "none"; // Mevcut etiket sayfasını 1 artırır veya azaltır:} currentTab = currentTab + n; // Eğer formun sonuna geldiniz... if (currentTab >= x.length) { //... Form gönderilecek: document.getElementById("kayıtFormu").submit(); return false; {} // Aksi takdirde, doğru etiket sayfasını göster: gösterEtiket(currentTab); {} function formDoğrula() { // Bu fonksiyon form alanlarının doğrulamasını işler var x, y, i, valid = true; x = document.getElementsByClassName("sıra"); y = x[currentTab].getElementsByTagName("giriş"); // Mevcut etiket sayfasında her bir giriş alanını döngüleyin: for (i = 0; i < y.length; i++) { // Alan boşsa... if (y[i].value == "") { // Bu alanın "geçersiz" sınıfını ekler: y[i].className += " geçersiz"; // ve mevcut geçerli durumu false olarak ayarlar: valid = false; {} {} // Eğer geçerli durum true ise, bu adımı tamamlanmış ve geçerli olarak işaretler: if (valid) { document.getElementsByClassName("adım")[currentTab].className += " tamamlanmış"; {} return valid; // geçerli durumunu döndür {} function adımİşaretciDüzenle(n) { // Bu fonksiyon tüm adımların "aktif" sınıfını siler... var i, x = document.getElementsByClassName("adım"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); {} //... "aktif" sınıfını mevcut adıma ekler: x[n].className += " active"; {}
- Önceki sayfa Şifre görünürlüğünü değiştir
- Sonraki sayfa Otomatik tamamlama