jQuery實現圓形修邊注冊表單特效



37 145 49



特效描述:jQuery實現 圓形修邊 注冊表單,jQuery實現圓形修邊注冊表單特效

代碼結構

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Lato:400' rel='stylesheet' type='text/css'>
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/styles.min.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/scripts.min.js"></script>

3. HTML代碼

        <div class="journeyProgress">
            <ul>
                <li class="currentStep"><i class="icon-user"></i>Your details</li>
                <li><i class="icon-lock"></i>Account details</li>
                <li><i class="icon-comment-alt"></i>Other information</li>
            </ul>
        </div>
        <div id="phizzForm" class="form">
            <form>
                <div class="formPanel">
                    <h2>Your details</h2>
                    <p>Please fill in the form below to enjoy all it&#39;s lovely 
					options and features.</p>
                    <div class="errors"><i class="icon-exclamation-sign"></i>
						Oops! You&#39;ve entered some incorrect details.</div>
                    <fieldset>
                        <legend>Your details</legend>
                        <div class="formRow">
                            <label for="name">Name</label>
                            <span class="inputAddOn"><i class="icon-user"></i></span>
                            <input type="text" value="" placeholder="Name" name="name" id="name">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="age">Age</label>
                            <span class="inputAddOn"><i class="icon-gift"></i></span>
                            <input type="number" value="" placeholder="Age" name="age" id="age">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="postcode">Postcode</label>
                            <span class="inputAddOn"><i class="icon-map-marker"></i></span>
                            <input type="text" value="" placeholder="Postcode" name="postcode" id="postcode">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="email">Email</label>
                            <span class="inputAddOn"><i class="icon-envelope-alt"></i></span>
                            <input type="email" value="" placeholder="Email" name="email" id="email">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="phoneNumber">Phone number</label>
                            <span class="inputAddOn"><i class="icon-phone"></i></span>
                            <input type="tel" value="" placeholder="Phone number" name="phoneNumber" id="phoneNumber">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <input type="checkbox">
                            <label class="checkboxLabel">Lorem ipsum dolor sit 
							amet</label>
                            <input type="checkbox">
                            <label class="checkboxLabel">Lorem ipsum</label>
                            <input type="checkbox">
                            <label class="checkboxLabel">Lorem ipsum dolor sit 
							amet</label>
                        </div>
                        <div class="formRow">
                            <label for="profession">Profession</label>
                            <span class="inputAddOn"><i class="icon-money"></i></span>
                            <input type="text" value="" placeholder="Profession" name="profession" id="profession">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <button class="buttonNext">Next</button>
                    </fieldset>
                </div>
                <div class="formPanel">
                    <h2>Account details</h2>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
					In semper ligula nisl, ac luctus elit imperdiet eu.</p>
                    <div class="errors"><i class="icon-exclamation-sign"></i>
						Oops! You&#39;ve entered some incorrect details.</div>
                    <fieldset>
                        <legend>Account details</legend>
                        <div class="formRow">
                            <label for="username">Username</label>
                            <span class="inputAddOn"><i class="icon-user"></i></span>
                            <input type="text" value="" placeholder="Username" name="username" id="username">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="password">Password</label>
                            <span class="inputAddOn"><i class="icon-lock"></i></span>
                            <input type="text" value="" placeholder="Password" name="password" id="password">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="passwordConfirm">Confirm password</label>
                            <span class="inputAddOn"><i class="icon-lock"></i></span>
                            <input type="text" value="" placeholder="Confirm password" name="passwordConfirm" id="passwordConfirm">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <p>Lorem ipsum dolor sit amet, consectetur 
							adipiscing elit.</p>
                            <input type="radio" name="sex" value="male"><label class="radioLabel">Male</label>
                            <input type="radio" name="sex" value="female"><label class="radioLabel">Female</label>
                        </div>
                        <div class="formRow">
                            <p>Lorem ipsum dolor sit amet, consectetur 
							adipiscing elit.</p>
                            <select>
                                <option value="optionOne">Option One</option>
                                <option value="optionTwo">Option Two</option>
                                <option value="optionThree">Option Three</option>
                                <option value="optionFour">Option Four</option>
                                <option value="optionFive">Option Five</option>
                            </select>
                        </div>
                        <button class="buttonPrev">Previous</button>
                        <button class="buttonNext">Next</button>
                    </fieldset>
                </div>
                <div class="formPanel">
                    <h2>Other information</h2>
                    <p>Proin dui sapien, lacinia eget eros in, vulputate 
					vehicula massa. Praesent in eros convallis, cursus leo ut.</p>
                    <div class="errors"><i class="icon-exclamation-sign"></i>
						Oops! You&#39;ve entered some incorrect details.</div>
                    <fieldset>
                        <legend>Other information</legend>
                        <div class="formRow">
                            <label for="houseNumber">House number</label>
                            <span class="inputAddOn"><i class="icon-home"></i></span>
                            <input type="number" value="" placeholder="House number" name="houseNumber" id="houseNumber">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="favouriteDrink">Favourite drink</label>
                            <span class="inputAddOn"><i class="icon-beer"></i></span>
                            <input type="text" value="" placeholder="Favourite drink" name="favouriteDrink" id="favouriteDrink">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit..</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="twitterUsername">Twitter username</label>
                            <span class="inputAddOn"><i class="icon-twitter"></i></span>
                            <input type="text" value="" placeholder="Twitter username" name="twitterUsername" id="twitterUsername">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <div class="formRow">
                            <label for="facebookUsername">Facebook username</label>
                            <span class="inputAddOn"><i class="icon-facebook"></i></span>
                            <input type="text" value="" placeholder="Facebook username" name="facebookUsername" id="facebookUsername">
                            <div class="tooltip"><p>Lorem ipsum dolor sit amet, 
								consectetur adipiscing elit.</p><i class="icon-caret-down"></i></div>
                        </div>
                        <button class="buttonPrev">Previous</button>
                        <button class="buttonSubmit">Submit</button>
                    </fieldset>
                </div>
            </form>
        </div>
        <!-- Javascript -->
        <script>
            $('body').phizzForms({
            });
        </script>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 彈出層拖動 窗口 彈出 彈窗 彈出層 提示框 對話框 遮罩 遮罩層 彈窗插件 切換按鈕 表單 表單美化 表單插件 表單美化插件 文字提示框 提示文字 文本框 text文本框 復選框 復選按鈕 復選框美化 注冊框 按鈕控制 表單提交
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

湖北30选5开奖结果走势图表