仅一个form表单 js实现注册信息依次填写提交功能

我们原先是一个很长的form表单，里面有很多选项。客户反馈这样不够友好，容易看花眼。因此进行改进，实现多步骤进度，多个提交的实现(其实只有一个form提交)。

实现的思路：将表单的选项装入多个div中，一个显示，其他隐藏。

实现效果如下：

1、JavaScript代码

2、CSS代码

3、HTML代码

 

 

  

  

   

    
个人信息
    
证件信息
    
签注信息
    
取证方式
   
  
  
 
 
 
 

  

  
  

   

    

 
户口所在地：
 

 
 

 
中文姓：
 

 
 

 
中文名：
 

 
 

 
身份证号：
 

 
 
 
  

 提交
 
 
 
   
 

 

 
 

  

  
通行证号
  

  
  

  
有效日期至
  

  
  

  
联系电话
  

  
  

  

   提交
  
 
  

   上一步
  
  
 
 
 

  

  

   

   
签注类别
   

   
   

   
前往地
   

   
   

   
签证种类
   

   
   

  

   提交
  
 
  

   上一步
  
  
  
 
 
 

 

  

  
取证方式
  

  
  

  

   提交
  
 
  

   上一步
  
  
 
 
 
 
 
 

源码下载：http://xiazai.jb51.net/201606/yuanma/JavaScript-formshow(jb51.net).rar

以上就是本文的全部内容，希望对大家学习JavaScript程序设计有所帮助。