私たちはもともと、多くのオプションを備えた非常に長い形式でした。顧客のフィードバックは十分にフレンドリーではなく、簡単に見ることができます。したがって、マルチステップの進捗状況と複数の提出物の実装を達成するために改善が行われます（実際、フォームの提出は1つだけです）。
実装のアイデア：フォームのオプションを複数のDIV、1つのショー、その他が非表示にロードします。
効果は次のとおりです。
1。JavaScriptコード
<script = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/jquery-powerfloat.js"> </script> <link link rel = "stylesheet" href = "css/powerfloat.cs"/> <cs " type = "text/javascript"> $（function（）{$（ "。pwdtrigger"）。powerfloat（{eventType： "focus"、targetMode： "remind"、 "placeholder"、position： "2-1"} $（ "＃one"）。hide（）; $（ "＃2"）。show（）; $（ "＃grxx"）。attr（ "class"、 "current_prev"）; $（ "＃zjxx"）。attr（ "class"、 "current"）; }} function two（）{if（confism（ "confisk commit？"））{$（ "＃two"）。hide（）; $（ "＃3"）。show（）; $（ "＃grxx"）。attr（ "class"、 "done"）; $（ "＃zjxx"）。attr（ "class"、 "current_prev"）; $（ "＃qzxx"）。attr（ "class"、 "current"）; }} function 3（）{if（confism（ "confisk commit？"））{$（ "＃3"）。hide（）; $（ "＃4"）。show（）; $（ "＃grxx"）。attr（ "class"、 "done"）; $（ "＃zjxx"）。attr（ "class"、 "done"）; $（ "＃qzxx"）。attr（ "class"、 "current_prev"）; $（ "＃qzfs"）。attr（ "class"、 "current"）; }} function rene（）{if（confism（ "return？"））{$（ "＃one"）。show（）; $（ "＃2"）。hide（）; $（ "＃grxx"）。attr（ "class"、 "current"）; $（ "＃zjxx"）。attr（ "class"、 ""）; }} function retwo（）{if（confism（ "return？"））{$（ "＃3"）。hide（）; $（ "＃2"）。show（）; $（ "＃grxx"）。attr（ "class"、 "current_prev"）; $（ "＃zjxx"）。attr（ "class"、 "current"）; $（ "＃qzxx"）。attr（ "class"、 ""）; }} function rethree（）{if（confism（ "return？"））{$（ "＃4"）。hide（）; $（ "＃3"）。show（）; $（ "＃grxx"）。attr（ "class"、 "done"）; $（ "＃zjxx"）。attr（ "class"、 "current_prev"）; $（ "＃qzxx"）。attr（ "class"、 "current"）; $（ "＃qzfs"）。attr（ "class"、 "last"）;; }} </script>2。CSSコード
<style type = "text/css">。flow_steps ul li {float：left;高さ：23px;パディング：0 40px 0 30px;ラインハイト：23px;テキストアライグ：センター;背景：url（img/barbg.png）100％0＃e4e4; font-weight：bold;}。flow_steps ul li.done {background-position：100％-46px;バックグラウンドカラー：＃ffeda2;}。flow_steps ul li.current_prev {background-position：100％-23px;バックグラウンドカラー：＃ffeda2;}。flow_steps ul li.current {color：#fff; background-color：＃990d1b;}。flow_steps ul li.last {background-image：none;} </style>3。HTMLコード
<body> <table> <tr> <td> <div> <ul style = "list-style-type：none"> <li id = "grxx">個人情報</li> <li id = "zjxx">免責事項情報</li> <li id = "qzxx">サインアップ情報</li> </td> </tr> <tr> <td> <form action = "" "> <div id ="> <table align = "center"> <tr> <td>場所場所：</td> <td> <入力タイプ= "テキスト" Placeholder = "家庭登録の場所を入力してください"/>> </td> type = "text" placeholder = "中国語姓を入力してください"/>> </td> </tr> <tr> <td>中国語名：</td> <td> <入力タイプ= "テキスト"プレースホルダー= "を入力してください"/> </td> </tr> <tr> <td>身分証明書/> </td> </tr> <tr> <td colspan = "2"> <button type = "button" onclick = "one（）"> submit </button> </td> </tr> </table> </div> <div> "2つの「スタイル="ディスプレイ：none "> <table align =" center "center Placeholder = "ID番号を入力してください"/> </td> </td> </tr <tr> <td>有効期限</td> <td> <入力タイプ= "テキスト" Placeholder = "PlaceHolder ="を入力してください "/> </td> </tr> <tr> <td>連絡先番号</td> <td> <tr> <td>連絡先番号</td> <td> <入力タイプ= "テキスト" Placeholder = "連絡先番号を入力してください。携帯電話番号"/> </td> </tr </tr> <td> <ボタンタイプ= "ボタン" onclick = "2（）"> shoct </button> </td> <ボタン= < onclick = "reone（）">前</button> </td> </tr> </table> </div> <div id = "3" style = "display"> <table align = "center"> <tr> <td> sign-nameカテゴリ</td> <td> <td> <入力タイプ= "placeholder =" place-name name name "/> </> <td>場所に移動</td> <td> <入力タイプ= "テキスト"プレースホルダー= "Placeholder"/>> </td> </tr> <tr> <td> visa type </td> <td> <input "入力" Placeholder = "Visa Type"/>> </td> </tr <tr <tr <tr <tr <td <td> <button "button" button " onclick = "3（）">送信</button> </td> <td> <button type = "button" onclick = "retwo（）">前</button> </td> </td> </tr> </table> </div> <div id = "4" style = "display" type = "text" placeholder = "Endibure Collection Method"/> </td> </tr> <tr> <td> <button type = "button" onclick = ""> shint </button> </td> <td> <ボタンタイプ= "ボタン" onclick = "rethree（）">前</button> </td> </tr> </table> </body> </html>
ソースコードのダウンロード：http：//xiazai.vevb.com/201606/yuanma/javascript-formshow(vevb.com).rar
上記はこの記事に関するものであり、誰もがJavaScriptプログラミングを学ぶことが役立つことを願っています。