Есть форма, которая заполняется в три этапа. Вот онаhttp://ruseller[dot]com/lessons/les4[dot][dot][dot]ample/index[dot]html
HTML такой:
CODE (html):
скопировать код в буфер обмена
скопировать код в буфер обмена
- <style type="text/css">
- body { font-family:Lucida Sans, Arial, Helvetica, Sans-Serif; font-size:13px; margin:20px;}
- #main { width:960px; margin: 0px auto; border:solid 1px #b2b3b5; -moz-border-radius:10px; padding:20px; background-color:#f6f6f6;}
- #header { text-align:center; border-bottom:solid 1px #b2b3b5; margin: 0 0 20px 0; }
- fieldset { border:none; width:320px;}
- legend { font-size:18px; margin:0px; padding:10px 0px; color:#b0232a; font-weight:bold;}
- label { display:block; margin:15px 0 5px;}
- input[type=text], input[type=password] { width:300px; padding:5px; border:solid 1px #000;}
- .prev, .next { background-color:#b0232a; padding:5px 10px; color:#fff; text-decoration:none;}
- .prev:hover, .next:hover { background-color:#000; text-decoration:none;}
- .prev { float:left;}
- .next { float:right;}
- #steps { list-style:none; width:100%; overflow:hidden; margin:0px; padding:0px;}
- #steps li {font-size:24px; float:left; padding:10px; color:#b0b1b3;}
- #steps li span {font-size:11px; display:block;}
- #steps li.current { color:#000;}
- #makeWizard { background-color:#b0232a; color:#fff; padding:5px 10px; text-decoration:none; font-size:18px;}
- #makeWizard:hover { background-color:#000;}
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
- <script type="text/javascript" src="formToWizard.js"></script>
- <script type="text/javascript">
- function MakeWizard() {
- $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })
- $("#makeWizard").hide();
- $("#info").fadeIn(400);
- }
- </script>
- </head>
- <body>
- <div id="main">
- <div id="header">
- <p><a id="makeWizard" href="#" onclick="MakeWizard()">Нажмите здесь, чтобы изменить форму</a>
- <span id="info" style="display:none;">Можете ничего не заполнять. Просто нажимайте на кнопку НЕКСТ :)</span></p>
- </div>
- <form id="SignupForm" action="">
- <fieldset>
- <legend>Account information</legend>
- <label for="Name">Name</label>
- <input id="Name" type="text" />
- <label for="Email">Email</label>
- <input id="Email" type="text" />
- <label for="Password">Password</label>
- <input id="Password" type="password" />
- </fieldset>
- <fieldset>
- <legend>Company information</legend>
- <label for="CompanyName">Company Name</label>
- <input id="CompanyName" type="text" />
- <label for="Website">Website</label>
- <input id="Website" type="text" />
- <label for="CompanyEmail">CompanyEmail</label>
- <input id="CompanyEmail" type="text" />
- </fieldset>
- <fieldset>
- <legend>Billing information</legend>
- <label for="NameOnCard">Name on Card</label>
- <input id="NameOnCard" type="text" />
- <label for="CardNumber">Card Number</label>
- <input id="CardNumber" type="text" />
- <label for="CreditcardMonth">Expiration</label>
- <select id="CreditcardMonth">
- <option value="1">1</option>
- <option value="2">2</option>
- </select>
- <select id="CreditcardYear">
- <option value="2009">2009</option>
- <option value="2010">2010</option>
- </select>
- <label for="Address1">Address 1</label>
- <input id="Address1" type="text" />
- <label for="Address2">Address 2</label>
- <input id="Address2" type="text" />
- <label for="City">City</label>
- <input id="City" type="text" />
- <label for="City">City</label>
- <select id="Country">
- <option value="CA">Canada</option>
- <option value="US">United States of America</option>
- </select>
- </fieldset>
- <p>
- <input id="SaveAccount" type="button" value="Submit form" />
- </p>
- </form>
- </div>
- </body>