如何创建:多步骤表单
学习如何创建一个多步骤的表单。
表单向导 - 多步骤表单:
第一步 - 添加 HTML:
<form id="regForm" action=""> <h1>Register:</h1> <!-- 表单中的每个步骤都有一个“标签页”: --> <div class="tab">Name:</div> <p><input placeholder="First name..." oninput="this.className = ''"></p> <p><input placeholder="Last name..." oninput="this.className = ''"></p> </div> <div class="tab">Contact Info:</div> <p><input placeholder="E-mail..." oninput="this.className = ''"></p> <p><input placeholder="Phone..." oninput="this.className = ''"></p> </div> <div class="tab">Birthday:</div> <p><input placeholder="dd" 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> /* 用于指示表单步骤的圆圈: */ <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>
第二步 - 添加 CSS:
设置表单元素的样式:
/* 为表单设置样式 */ #regForm { background-color: #ffffff; margin: 100px auto; padding: 40px; width: 70%; min-width: 300px; {} /* 为输入框设置样式 */ input { padding: 10px; width: 100%; font-size: 17px; font-family: Raleway; border: 1px solid #aaaaaa; {} /* 标记验证时出错的输入框: */ input.invalid { background-color: #ffdddd; {} /* 默认隐藏所有步骤: */ .tab { display: none; {} /* 创建指示表单步骤的圆圈: */ .step { height: 15px; width: 15px; margin: 0 2px; background-color: #bbbbbb; border: none; border-radius: 50%; display: inline-block; opacity: 0.5; {} /* Markahan ang kasalukuyang hakbang: */ .step.active { opacity: 1; {} /* Markahan na nakakumpleto at wasto ang hakbang: */ .step.finish { background-color: #04AA6D; {}
Ika-tatlong Hakbang - Magdagdag ng JavaScript:
var currentTab = 0; // Ang kasalukuyang tab ay itinakda sa unang tab (0) showTab(currentTab); // Ipakita ang kasalukuyang tab function showTab(n) { // Ang function na ito ay magpapakita ng tinukoy na tab ng form ... var x = document.getElementsByClassName("tab"); x[n].style.display = "block"; // ... at ayusin ang mga button ng nauna/kanila: if (n == 0) { document.getElementById("prevBtn").style.display = "none"; } document.getElementById("prevBtn").style.display = "inline"; {} if (n == (x.length - 1)) { document.getElementById("nextBtn").innerHTML = "Submit"; } document.getElementById("nextBtn").innerHTML = "Next"; {} // ... at pataasin ang isang function, ipakita ang tamang tagapagpahiwatig ng hakbang: fixStepIndicator(n) {} function nextPrev(n) { // Ang function na ito ay magpapatunay kung anong tab ang dapat ipakita: var x = document.getElementsByClassName("tab"); // Kung ang anumang field ng kasalukuyang tab ay hindi wasto, umalis sa function: if (n == 1 && !validateForm()) return false; // Hinawakan ang kasalukuyang tab: x[currentTab].style.display = "none"; // Magdagdag o magbawas ng 1 sa kasalukuyang tab: currentTab = currentTab + n; // Kung naabot mo na ang huling bahagi ng table... if (currentTab >= x.length) { //... Ang form ay ililipat: document.getElementById("regForm").submit(); return false; {} // Kung hindi, ipakita ang tamang tab: showTab(currentTab); {} function validateForm() { // Ang function na ito ay nagpaproseso ng pag��syang ng form field var x, y, i, valid = true; x = document.getElementsByClassName("tab"); y = x[currentTab].getElementsByTagName("input"); // Suriin ang pag-ikot ng bawat input field sa kasalukuyang tab: for (i = 0; i < y.length; i++) { // Kung ang larawan ay walang laman... if (y[i].value == "") { // Magdagdag ng klase 'invalid' sa larawan: y[i].className += " invalid"; // At mag-set ng kasalukuyang estado ng valid bilang false: valid = false; {} {} // Kung ang estado ng valid ay true, markahin ang hakbang bilang nakapagpatupad at may katarungan: if (valid) { document.getElementsByClassName("step")[currentTab].className += " finish"; {} return valid; // ibabalik ang estado ng valid {} function fixStepIndicator(n) { // Ang function na ito ay nag-aalis ng lahat ng klase 'active' sa mga hakbang... var i, x = document.getElementsByClassName("step"); for (i = 0; i < x.length; i++) { x[i].className = x[i].className.replace(" active", ""); {} //... Magdagdag ng klase 'active' sa kasalukuyang hakbang: x[n].className += " active"; {}