分布式用户注册表单项目说明

【项目描index.html文件，查看项目演示效果。【练习知识点HTML表单CSSJavaScript【项目分析本项目的重点在于HTML5表单和JavaScript的运用练习。页面结构图如下如图所示，整个页面由多个fileldset一个ul嵌套在表单中构成。具体步骤如下在form中添加ul和三个fieldset在fieldset中添加h2和h3用于添加标题说明文字在fieldset中添加input输入框和按钮等【项目实现<!Doctype<html<metacharset="UTF-<metahttp-patible"<!Doctype<html<metacharset="UTF-<metahttp-patible" 表单UI界面设计<linkrel="stylesheet"type="text/css"<!--multistepform--<form<!--progressbar--<ul<liclass="active">账号设置<!--fieldsets--<h2class="fs-title">创建你的账号<h3class="fs-subtitle">这是第一步<inputtype="text 地址<inputtype="password" "<inputtype="password" "<inputtype="buttonname="nextclass="nextaction-button"value="下一步"onclick="nextbtn(this,1);"/><h2class="fs-title">填写社交账号<h3class="fs-subtitle">填写你的常用社交网络账号<inputtype="text"name="x- "<inputtype="text"name="t- "<inputtype="text ceholder="QQ<inputtype="button"name="previous"action-buttonvalue="上一步<inputtype="buttonname="nextclass="nextaction-button"value="下一步"onclick="nextbtn(this,2);"/><h2class="fs-title">个人详细信息<h3class="fs-subtitle">个人详细信息 的，不会 <inputtype="text ceholder="昵称<inputtype="text" "<inputtype="text" "<textarea <inputtype="button"name="previous"class="previousction-buttonvalue="上一步onclick="prevbtn(this,2);"/><inputtype="submit"name="submit"action-buttonvalue="提交onclick="return<scriptsrc="js/index.js"CSShtmlbodyfieldset添加进度条和中间数字（连接器）**{margin:0;padding:htmlheight:background:linear-gradient(rgba(196,102,0,0.2),rgba(155,89,182,0.2)),}bodyfont-family:}#msform{width:400px;margin:50pxauto;text-align:center;position:}#msformfieldset{background:white;border:0none;border-radius:3px;box-shadow:0015px1pxrgba(0,0,0,0.4);padding:20px30px;box-sizing:border-box;width:80%;margin:0positionabsolute;}#msformfieldset:not(:first-of-type y:}#msforminput,#msformtextarea{padding:15px;border:1pxsolid#ccc;border-radius:3px;margin-bottom:10px;width:100%;box-sizing:border-font-family:" color:#2C3E50;font-size:}#msform.action-button{width:100px;background:#4e88ff;font-weight:bold;color:white;border:0none;border-radius:1px;cursor:pointer;padding:10px5px;margin:10px5px;}#msform.action-button:hover,#msform.action-button:focus{box-shadow:0002pxwhite,0003px#4e88ff;}.fs-titlefont-size:text-transform:uppercase;color:#2C3E50;margin-bottom:}.fs-subtitlefont-weight:normal;font-size:13px;color:#666;margin-bottom:}#progressbarmargin-bottom:30px;overflow:hidden;/*CSS选择器计数器*/counter-resetstep;}#progressbarlilist-style-type:none;color:white;text-transform:uppercase;font-size:9px;width:33.33%;float:left;position:relative;}#progressbarli:before{content:counter(step);counter-increment:step;width:20px;line-height:20px; y:block;font-size:10px;color:#333;background:white;border-radius:3px;margin:0auto5px}#progressbarli:aftercontent:'';width:100%;height:2px;background:white;position:absolute;left:-50%;top:z-index1*放在数字的后面}#progressbarli:first-child:aftercontent:none;}#progressbarli.active:before,#progressbarli.active:after{background:#4e88ff;color:}最后添加JSfieldset varcurrent_fs,next_fs, livar functionnextbtn(obj,num){next_fs=getNearEle(current_fs,0); js jsliclass="active";,来控制进度条的样式}functionprevbtn(obj,num){previous_fs=getNearEle(current_fs,1); }@paramele@paramtype类型，上一个(1)or下一个@returnDomfunctiongetNearEle(ele,type)type=type==