分步注册代码

分步注册代码

 

演示

 

 

XML/HTML Code

1. <div class="content">  
2. <div class="idealsteps-container">  
3. <nav class="idealsteps-nav"></nav>  
4. <form action="" novalidate autocomplete="off" class="idealforms">  
5. <div class="idealsteps-wrap">   
6.   
7. <!-- Step 1 -->  
8.   
9. <section class="idealsteps-step">  
10. <div class="field">  
11. <label class="main">Username:</label>  
12. <input name="username" type="text" data-idealforms-ajax="ajax.php">  
13. <span class="error"></span> </div>  
14. <div class="field">  
15. <label class="main">E-Mail:</label>  
16. <input name="email" type="email">  
17. <span class="error"></span> </div>  
18. <div class="field">  
19. <label class="main">Password:</label>  
20. <input name="password" type="password">  
21. <span class="error"></span> </div>  
22. <div class="field">  
23. <label class="main">Confirm:</label>  
24. <input name="confirmpass" type="password">  
25. <span class="error"></span> </div>  
26. <div class="field">  
27. <label class="main">Date:</label>  
28. <input name="date" type="text" placeholder="mm/dd/yyyy" class="datepicker">  
29. <span class="error"></span> </div>  
30. <div class="field">  
31. <label class="main">Picture:</label>  
32. <input id="picture" name="picture" type="file" multiple>  
33. <span class="error"></span> </div>  
34. <div class="field">  
35. <label class="main">Website:</label>  
36. <input name="website" type="text">  
37. <span class="error"></span> </div>  
38. <div class="field buttons">  
39. <label class="main"> </label>  
40. <button type="button" class="next">Next »</button>  
41. </div>  
42. </section>  
43.   
44. <!-- Step 2 -->  
45.   
46. <section class="idealsteps-step">  
47. <div class="field">  
48. <label class="main">Sex:</label>  
49. <p class="group">  
50. <label>  
51. <input name="sex" type="radio" value="male">  
52. Male</label>  
53. <label>  
54. <input name="sex" type="radio" value="female">  
55. Female</label>  
56. </p>  
57. <span class="error"></span> </div>  
58. <div class="field">  
59. <label class="main">Hobbies:</label>  
60. <p class="group">  
61. <label>  
62. <input name="hobbies[]" type="checkbox" value="football">  
63. Football</label>  
64. <label>  
65. <input name="hobbies[]" type="checkbox" value="basketball">  
66. Basketball</label>  
67. <label>  
68. <input name="hobbies[]" type="checkbox" value="dancing">  
69. Dancing</label>  
70. <label>  
71. <input name="hobbies[]" type="checkbox" value="dancing">  
72. Parkour</label>  
73. <label>  
74. <input name="hobbies[]" type="checkbox" value="dancing">  
75. Videogames</label>  
76. </p>  
77. <span class="error"></span> </div>  
78. <div class="field buttons">  
79. <label class="main"> </label>  
80. <button type="button" class="prev">« Prev</button>  
81. <button type="button" class="next">Next »</button>  
82. </div>  
83. </section>  
84.   
85. <!-- Step 3 -->  
86.   
87. <section class="idealsteps-step">  
88. <div class="field">  
89. <label class="main">Phone:</label>  
90. <input name="phone" type="text" placeholder="000-000-0000">  
91. <span class="error"></span> </div>  
92. <div class="field">  
93. <label class="main">Zip:</label>  
94. <input name="zip" type="text" placeholder="00000">  
95. <span class="error"></span> </div>  
96. <div class="field">  
97. <label class="main">Options:</label>  
98. <select name="options" id="">  
99. <option value="default">– Select an option –</option>  
100. <option value="1">One</option>  
101. <option value="2">Two</option>  
102. <option value="3">Three</option>  
103. <option value="4">Four</option>  
104. </select>  
105. <span class="error"></span> </div>  
106. <div class="field">  
107. <label class="main">Comments:</label>  
108. <textarea name="comments" cols="30" rows="10"></textarea>  
109. <span class="error"></span> </div>  
110. <div class="field buttons">  
111. <label class="main"> </label>  
112. <button type="button" class="prev">« Prev</button>  
113. <button type="submit" class="submit">Submit</button>  
114. </div>  
115. </section>  
116. </div>  
117. <span id="invalid"></span>  
118. </form>  
119. </div>  
120. </div>  

 

原文地址:http://www.freejs.net/article_biaodan_245.html