Ví dụ

<form id="regForm" action="/action_page.php" method="post">
    <h1 style="text-align:center;">Register:</h1>
    <div class="tab">Name
        <input type="text" name="fname" placeholder="First name..." />
        <input type="text" name="lname" placeholder="Last name..." />
    </div>
    <div class="tab">Contact info
        <input type="email" name="email" placeholder="Email" />
        <input type="number" name="phone" placeholder="Phone" />
    </div>
    <div class="tab">Birthday
        <input type="number" name="dd" placeholder="dd" />
        <input type="number" name="mm" placeholder="mm" />
        <input type="number" name="yyyy" placeholder="yyyy" />
    </div>
    <div class="tab">Login info
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="password" name="repassword" placeholder="Re Password" />
    </div>
    <div class="btn" style="overflow:auto">
        <button type="button" id="btnNext" onclick="nextPrev(1)">Next</button>
        <button type="button" id="btnPrev" onclick="nextPrev(-1)">Previous</button>
    </div>
    <div class="stepCon" align="center">
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
        <span class="step"></span>
    </div>
</form>

Ví dụ

/* Tạo kiểu cho phần từ form */
#regForm {
    background-color:#ffffff;
    padding:30px 20px;
    width:80%;
    margin:40px auto;    
    border-radius:5px;
}
/* Các khối nội dung sẽ ẩn ban đầu */
#regForm > .tab {
    display:none;
    font-weight:bold;    
}
/* Tạo kiểu cho phần tử input */
.tab > input {
    display:block;
    width:100%;
    margin:15px 0;
    padding:10px;
    border:1px solid #dddddd;
    border-radius:5px;    
}
.tab > .invalid {
    background-color:#ffdddd;    
}
/* Tạo kiểu cho phần tử button */
.btn > button {
    display:inline-block;
    float:right;
    border:none;
    outline:none;
    font-size:18px;
    padding:10px 20px;
    background-color:orange;
    color:white;
    cursor:pointer;
    margin-left:5px;
    margin-bottom:20px;    
    border-radius:5px;
}
/* Thay đổi màu nền khi hover */
.btn > button:hover {
    background-color:dodgerblue;    
}
/* Tạo kiểu các dấu chấm tròn */
.stepCon > .step {
    display:inline-block;
    width:15px;
    height:15px;
    background-color:#999999;    
    opacity:0.5;
    border-radius:50%;
}
.stepCon > .active {
    opacity:1;    
}
.stepCon > .finish {
    background-color:blue;    
}

Ví dụ

<script>

// Khai báo các biến
var x, i, currentTab = 0;

// Thực thi hàm showTab
showTab(currentTab);

// Gán sự kiện oninput cho các phần tử input
x = document.getElementsByClassName('tab');
for(i = 0; i < x.length; i++) {
    var b, j;
    b = x[i].getElementsByTagName('input');
    for(j = 0; j < b.length; j++) {
        b[j].oninput = function() {
            this.className = "";    
        }
    }
}

// Định nghĩa hàm showTab
function showTab(n) {
    var x;
    x = document.getElementsByClassName('tab');
    
    // Hiển thị tab
    x[n].style.display = "block";
    
    // Ẩn nút previous
    if(n == 0) {
        document.getElementById('btnPrev').style.visibility = "hidden";
    }else{
        document.getElementById('btnPrev').style.visibility = "visible";
    }
    
    // Gán nút submit nếu hiển thị tab cuối
    if(n == (x.length - 1)) {
        document.getElementById('btnNext').innerHTML = "Submit";
    }else{
        document.getElementById('btnNext').innerHTML = "Next";    
    }
    
    // Thực thi hàm gán lớp active cho dấu tròn
    stepIndicator(n);
}

// Định nghĩa hàm gán lớp active cho các dấu chấm tròn
function stepIndicator(n) {
    var x, i;
    x = document.getElementsByClassName('step');
    
    // Xóa hết các lớp active đã gán vào
    for(i = 0; i < x.length; i++) {
        x[i].className = x[i].className.replace(" active","");
    }
    
    // Gán lớp active
    x[n].className += " active";
}

// Định nghĩa hàm chuyển đổi các tab
function nextPrev(n) {
    var x;
    x = document.getElementsByClassName('tab');
    
    // Nếu hàm xác thực form là false, dừng thực thi hàm
    if(n == 1 && !validateForm()) {
        return false;
    }
    
    // Ẩn tab hiện tại
    x[currentTab].style.display = "none";
    
    // Tăng giá trị tham số currentTab
    currentTab = currentTab + n;
    
    // Tới tab cuối cùng thì thực hiện submit form
    if(currentTab >= x.length) {
        document.getElementById('regForm').submit();
        return false;
    }
    
    // Thực thi hàm showTab khi tham số currentTab thay đổi
    showTab(currentTab);
}

// Hàm xác thực form
function validateForm() {
    var x, y, i, valid = true;
    x = document.getElementsByClassName('tab');
    y = x[currentTab].getElementsByTagName('input');
    for(i = 0; i < y.length; i++) {
        
        // Nếu value rỗng thì gán lớp invalid và thay đổi giá trị tham số valid
        if(y[i].value == "") {
            y[i].className += " invalid";
            valid = false;
        }
    }
    
    // Nếu tham số valid là true, gán lớp finish cho dấu chấm tròn
    if(valid) {
        document.getElementsByClassName('step')[currentTab].className += " finish";
    }
    
    // Trả lại giá trị tham số valid
    return valid;    
}
</script>

Xem kết quả