Эффекты на основе Java Script

Пошаговое заполнение формы с контролем заполнения обязательных полей

Не заполнены поля выделенные розовым фоном. 1. Create Account 2. Contact Information 3. Finalize Step 1: jQuery Tools Account Please enter your login information: 1. Enter Your Email Address * Your password will be sent to this address. Your address will not made public. 2. Pick a username Your preferred username to be used when logging in. 3. Choose a Password * Must be at least 8 characters long. Verify Password * Step 2: Contact Information Please tell us where you live: 1. Enter Your Street Address Example: Random Street 69 A 666 2. Enter Your Zip Code * This must be a numeric value 2.2 Enter Your ICQ Code * This icq numeric value 3. and The City * Step 3: Congratulations! You are now a happy member of the Open Source community	<Вернуться в каталог>
	Скопируйте и вставте
	Внутри тега <HEAD> - </HEAD>
	<STYLE type=text/css> /* размеры и столь блоков в целом / #wizard {background:#ccc; border:5px solid #789; font-size:12px; height:450px; margin:20px auto; width:570px; overflow:hidden; position:relative; / rounded corners for modern browsers / -moz-border-radius:5px; -webkit-border-radius:5px;} / scrollable items / #wizard .items {width:20000em; clear:both; position:absolute;} / single item / #wizard .page {padding:20px 30px; width:500px; float:left;} / title / #wizard h2 {border-bottom:1px dotted #ccc; font-size:22px; font-weight:normal; margin:10px 0 0 0; padding-bottom:15px; color:#000} #wizard h2 em {display:block; font-size:14px; color:#666; font-style:normal; margin-top:5px;} / input fields / #wizard ul {padding:0px !important; margin:0px !important;} #wizard li {list-style-type:none; list-style-image:none; margin-bottom:25px;} #wizard label {font-size:16px; display:block;} #wizard label strong {color:#444; position:relative; top:-1px;} #wizard label em {font-size:11px; color:#666; font-style:normal;} #wizard .text {width:100%; padding:5px; border:1px solid #7b9; color:#456; letter-spacing:1px;} #wizard select {border:1px solid #ccc; width:94%; padding:4px;} #wizard label span {color:#b8128f; font-weight:bold; position:relative; top:4px; font-size:20px;} #wizard .double label {width:50%; float:left;} #wizard .double .text {width:93%;} #wizard .clearfix {clear:left; padding-top:10px;} #wizard .right {float:right;} / validation error message bar */ #drawer {background:#666; _background-color:#666; overflow:visible; position:fixed; text-align:center; padding:5px; font-size:18px; border:2px solid #789; width:560px; display:none; z-index:2; color:#000000; top: 35px; left: 28px;} #wizard .error {border:1px solid red; background:#ffcccc;} #wizard #status {margin:0px !important; height:35px; background:#123; padding-left:25px !important; _background:#123;} #status li {list-style-type:none; list-style-image:none; float:left; color:#fff; padding:10px 30px;} #status li.active {background-color:#b8128f; font-weight:normal;} .required, .pusto {color:#0000ff; font-weight:bold;} </STYLE> <script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_formy/918/js/jquery.js"></script> <script src="http://skriptkpbstudio.ucoz.ru/demo_srt/jquery_formy/918/js/posled_zapolnenie_form_s_prowerkoy.js"></script>
	Всё подписано, проблем быть не должно. Всё параметры и стили блоков задаются в CSS. В скрипте задаются только параметры окна сообщения об ошибке(я нестал вытаскивать их из тела скрипта, посчитав их неважными). Если кому-то это важно, они в скрипте "posled_zapolnenie_form_s_prowerkoy.js". Если у Вас длинная форма, то данный скрипт позволяет разбить её на несколько частей и выводить их для заполнения поочередно, с промежуточным контролем заполнения обязательных полей и выводом сообщения если какието пропущены.
	Внутри тега <BODY> - </BODY> там где у Вас будет форма.
<div id="drawer">Не заполнены поля выделенные <strong style="color: #ffcccc;">розовым</strong> фоном.</div> <!-- the form --> <form action="#"> <div id="wizard"> <ul id="status"> <li class="active"><strong>1.</strong> Create Account</li> <li><strong>2.</strong> Contact Information</li> <li><strong>3.</strong> Finalize</li> </ul> <div class="items"> <!-- page1 --> <div class="page"> <h2> <strong>Step 1: </strong> jQuery Tools Account <em>Please enter your login information:</em> </h2> <ul> <!-- email --> <li class="required"> <label> <strong>1.</strong> Enter Your Email Address <span></span><br> <input value="ss" class="text" name="email" type="text"> <em>Your password will be sent to this address. Your address will not made public.</em> </label> </li> <!-- username --> <li class="pusto"> <label> <strong>2.</strong> Pick a username <br> <input value="rr" class="text" name="username" type="text"> <em>Your preferred username to be used when logging in.</em> </label> </li> <!-- password --> <li class="required double"> <label> <strong>3.</strong> Choose a Password <span></span><br> <input class="text" name="password" type="password"> <em>Must be at least 8 characters long.</em> </label> <label> Verify Password <span></span><br> <input class="text" name="password1" type="password"> </label> </li> <li class="clearfix"> <button type="button" class="next right">Proceed »</button> </li> </ul> </div> <!-- page2 --> <div class="page"> <h2> <strong>Step 2: </strong> Contact Information <b></b> <em>Please tell us where you live:</em> </h2> <ul> <!-- address --> <li class=pusto> <label> <strong>1.</strong> Enter Your Street Address <span></span><br> <input class="text" name="email" type="text"> <em><strong>Example</strong>: Random Street 69 A 666</em> </label> </li> <!-- zip / city --> <li class="required double"> <label> <strong>2.</strong> Enter Your Zip Code <span></span><br> <input class="text" name="zip"> <em>This must be a numeric value</em> </label> <label> <strong>2.2</strong> Enter Your ICQ Code <span></span><br> <input value="none" class="text" name="zzip"> <em>This icq numeric value</em> </label> <label> <strong>3.</strong> and The City <span></span> <select name="city"> <option selected="selected" value="">-- please select --</option> <option>Helsinki</option> <option>Berlin</option> <option>New York</option> </select> </label> </li> <li class="clearfix"> <button type="button" class="prev disabled" style="float: left;">« Back</button> <button type="button" class="next right">Proceed »</button> </li> <br clear="all"> </ul> </div> <!-- page3 --> <div class="page"> <h2> <strong>Step 3: </strong> Congratulations! <b></b> <em>You are now a happy member of the Open Source community</em> </h2> <img src="esempio_fr_files/eye.png" style="margin: 30px 0pt 0pt 140px;"> <p style="margin-top: 30px;"> <button type="button" class="prev disabled">« Back</button> </p> </div> </div><!--items--> </div><!--wizard--> </form>
Здесь всё должно быть понятно и пояснений не требует. Колличество полей в форме любое, их разбивка на части произвольная, как Вам удобно.
И Вы будите использовать скрипт прямо из моей библиотеки не загружая его к себе на страницу. Вы экономите место и время. Если Вы хотите иметь скрипт, чтобы изменять и другие его параметры, воспользуйтесь функцией [Скачать с сервера]. Если Вы не видите этой функции в []- следовательно Вы не зарегистрированы на сайте.Вам надо зарегистрироваться и войти как Пользователь.