用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月 忘记密码?

发表随想


还能输入:200字
云代码 - javascript代码库

表单代码

2017-12-27 作者:柯侧耳倾听者 举报

[javascript]代码库

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Order Form</title>
    <link rel="stylesheet" href="style.css">
    <script src="modernizr.js"></script>					
    <script src="app.js"></script>
</head>
<body>
    <form name="order" method="post" action="/submit">
        <h1>Order Form</h1>
            <fieldset>
                <legend>Contact Details</legend>
                <ul>
                    <li>
                        <label class="required">
                            <div>Full Name</div>
                            <input name="name" required autofocus>			
                        </label>
                    </li>
                    <li>
                        <label class="required">
                            <div>Email Address</div>
                            <input type="email" name="email" required>		
                        </label>
                    </li>
                    <li>
                        <label>
                            <div>Postal Address</div>
                            <input name="address1" placeholder="Address Line 1">	
                        </label>
                        <div>&nbsp;</div>
                        <input name="address2" placeholder="Address Line 2">		
                        <div>&nbsp;</div>                    
                        <input name="city" class="city" placeholder="Town/City">	
                        <input name="state" class="state" placeholder="State">	
                        <input name="zip" class="zip" placeholder="Zip Code">	
                        <div>&nbsp;</div>
                        <select name="country">
                            <option value="0">Country</option>
                            <option value="US">United States</option>
                            <option value="CA">Canada</option>
                        </select>
                    </li>
                    <li>
                        <label>
                            <div>Home Phone No.</div>
                            <input type="tel" name="homephone">
                        </label>
                    </li>
                    <li>
                        <label>
                            <div>Cell Phone No.</div>
                            <input type="tel" name="cellphone">			
                        </label>            
                    </li>
                    <li>
                        <label>
                            <div>Skype Name</div>
                            <input name="skype">
                        </label>
                    </li>
                    <li>
                        <label>
                            <div>Twitter</div>
                            <span class="twitter_prefix">@</span>
                            <input name="twitter" class="twitter">
                        </label>
                    </li>
                </ul>    
            </fieldset>
            <fieldset>
                <legend>Login Details</legend>
                <ul>
                    <li>
                        <label class="required">
                            <div>Password</div>
                            <input type="password" name="password" required>		
                        </label>
                    </li>
                    <li>
                        <label class="required">
                            <div>Confirm Password</div>
                            <input type="password" name="confirm_password" required>	
                        </label>
                    </li>
                </ul>
            </fieldset>
            <fieldset>
                <legend>Order Details</legend>
                <table>
                    <thead>
                    <tr>                    
                        <th>Product Code</th><th>Description</th><th>Qty</th>
                        <th>Price</th><th>Total</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>                    
                        <td>
                            COMP001
                            <input type="hidden" name="product_code" value="COMP001">
                        </td>
                        <td>The Ultimate Smartphone</td>
                        <td>
                            <input type="number" data-price="399.99" name="quantity" 
                              value="0" min="0" max="99" maxlength="2">		
                        </td>
                        <td>$399.99</td>
                        <td>
                            <output name="item_total" class="item_total">$0.00</output>	
                        </td>
                    </tr>
                    <tr>
                        <td>
                            COMP002
                            <input type="hidden" name="product_code" value="COMP002">
                        </td>
                        <td>The Ultimate Tablet</td>
                        <td>
                            <input type="number" data-price="499.99" name="quantity" 
                              value="0" min="0" max="99" maxlength="2">		
                        </td>
                        <td>$499.99</td>
                        <td>
                            <output name="item_total" class="item_total">$0.00</output>	
                        </td>
                    </tr>
                    <tr>
                        <td>
                            COMP003
                            <input type="hidden" name="product_code" value="COMP003">
                        </td>
                        <td>The Ultimate Netbook</td>
                        <td>
                            <input type="number" data-price="299.99" name="quantity" 
                              value="0" min="0" max="99" maxlength="2">		
                        </td>
                        <td>$299.99</td>
                        <td>
                            <output name="item_total" class="item_total">$0.00</output>	
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="4">Order Total</td>
                        <td>
                            <output name="order_total" id="order_total">$0.00</output>	
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </fieldset>
            <fieldset>
                <legend>Payment Details</legend>
                <ul>
                    <li>
                        <label class="required">
                            <div>Name on Card</div>
                            <input name="card_name" required>
                        </label>
                    </li>
                    <li>
                        <label class="required">
                            <div>Credit Card No.</div>
                            <input name="card_number" pattern="[0-9]{13,16}" 	
                              maxlength="16" required title="13-16 digits, no spaces">
                        </label>
                    </li>
                    <li>
                        <label class="required">
                            <div>Expiry Date</div>
                            <input type="month" name="card_expiry" maxlength="7" 	
                              placeholder="YYYY-MM" required value="2015-06">
                        </label>
                    </li>
                    <li>
                        <label class="required">
                            <div>CVV2 No.</div>
                            <input name="card_cvv2" class="cvv" maxlength="3" 	
                              pattern="[0-9]{3}" required title="exactly 3 digits"> 
                            <span>(Three digit code at back of card)</span>
                        </label>
                    </li>
                </ul>
            </fieldset>		
        <div class="buttons">
            <input type="submit" value="Submit Order">
            <input type="submit" id="saveOrder" value="Save Order" formnovalidate       formaction="/save">
        </div>
    </form>
</body>
</html>

[源代码打包下载]




分享到:
更多

网友评论    (发表评论)


发表评论:

评论须知:

  • 1、评论每次加2分,每天上限为30;
  • 2、请文明用语,共同创建干净的技术交流环境;
  • 3、若被发现提交非法信息,评论将会被删除,并且给予扣分处理,严重者给予封号处理;
  • 4、请勿发布广告信息或其他无关评论,否则将会删除评论并扣分,严重者给予封号处理。