首页>>表单>>分步注册代码(2014-01-29)

分步注册代码

分步注册代码
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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