zoukankan      html  css  js  c++  java
  • 表单

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 <style type="text/css">
     7     *{margin:0; padding:0;}
     8     body{font-size:12px;} 
     9     ul{list-style:none; border:1px solid #CCC;}
    10     li{margin:10px 0;}
    11     li input{ vertical-align:middle;}    
    12     label{display:inline-block; width:70px; padding-right:10px; text-align:right;}
    13     .input_va{width:120px; height:16px; padding:3px; border:1px solid #000;}
    14     div{width:960px; margin:0 auto; border:1px solid #CCC;}
    15     span.prompt{padding-left:15px; display:none; color:#666;}
    16 </style>
    17 </head>
    18 
    19 <body>
    20   <form action="post">
    21     <ul>
    22         <li><label for="email">电子邮件:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span></li>
    23         <li><label for="user">用户名:</label><input class="input_va" type="text" name="user" id="" /><span class="prompt">请输入您的用户名</span></li>
    24         <li><label for="gender">性别:</label><select name="gender" id="">
    25             <option value="">全部</option>
    26             <option value=""></option>
    27             <option value=""></option>
    28             </select>
    29         </li>
    30         <li>
    31             <label for="province">省份:</label><select name="province" id="">
    32                 <option value="">北京市</option>
    33                 <option value="">上海市</option>
    34                 <option value="">天津市</option>
    35             </select>            
    36         </li>        
    37     </ul>
    38   </form>
    39 </body>
    40 </html>

    第二份

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 <style type="text/css">
     7 *{
     8     margin:0;
     9     padding:0;
    10 }
    11 body{font-size:12px;
    12     } 
    13 .my-form{width:490px;margin:0 auto;_height:100%;
    14     }
    15 ul{list-style:none;padding:1px;
    16     }
    17 li{margin:10px 0;height:auto;
    18     }
    19 li input{vertical-align:middle;clear:both;
    20    }    
    21 label{display:inline-block; width:90px;padding-right:10px;padding-left:10px;text-align:left;
    22       }
    23 .input_va{width:120px;height:16px; padding:3px; border:1px solid #000;
    24     }
    25 
    26 div{width:960px;margin:0 auto;border:1px solid #CCC;
    27     }
    28 
    29 span.prompt{display:none;text-align:center;top:-23px;left:50px;position:relative;color:#666;}
    30 
    31 .fly{float:left;clear:both;}
    32 .my-form-right{ text-align:right;}
    33 </style>
    34 </head>
    35 
    36 <body>
    37   <form action="post" class="my-form">
    38   <fieldset>
    39   <legend>用户信息</legend>
    40     <ul>
    41         <li><label for="user">姓名:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span></li>
    42         <li><label for="user">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span></li>
    43         <li><label for="user">房产套数:</label><input class="input_va" type="text" name="user" id="" /><span class="prompt">请输入您的用户名</span></li>
    44         <li><label for="user">年龄:</label><input class="input_va" type="text" name="user" id="" /><span class="prompt">请输入您的用户名</span></li>
    45         <li><label for="user">年龄:</label><input class="input_va" type="text" name="user" id="" /><span class="prompt">请输入您的用户名</span></li>
    46         <li><label for="user">用途:</label><input class="input_va" type="text" name="user" id="" /><span class="prompt">请输入您的用户名</span></li>
    47         <li><label for="gender">性别:</label>
    48             <select name="gender" id="">
    49             <option value="">全部</option>
    50             <option value=""></option>
    51             <option value=""></option>
    52             </select>
    53         </li>
    54         <li><label class="fly">地址</label><textarea rows="5" cols="30"></textarea></li>
    55         <li><label for="email">年龄</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span></li>
    56         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    57         <label for="email" class="my-form-right">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的子邮件        </span></li>
    58         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    59         <label for="email" class="my-form-right">比例:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您        的电子邮件</span></li>
    60         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    61         <label for="email" class="my-form-right">年龄:</label><input class="input_va" type="text" name="email" id="" /><p class="prompt">请输入您的电子邮件        </p></li>
    62         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    63         <label for="email" class="my-form-right">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件        </span></li>
    64         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span></li>
    65         <li><label class="fly">年龄</label><textarea rows="5" cols="30"></textarea></li>
    66         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    67         <label for="email" class="my-form-right">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的        电子邮件</span></li>
    68         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    69         <label for="email" class="my-form-right">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的子         邮件</span></li>
    70         <li><label for="email">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电子邮件</span>
    71         <label for="email" class="my-form-right">年龄:</label><input class="input_va" type="text" name="email" id="" /><span class="prompt">请输入您的电        子邮件</span></li>
    72         <li><label for="user">年龄:</label><input class="input_va" type="text" name="user" id="" /><span class="prompt">请输入您的用户名</span></li            <li> <label></label><input type="submit" value="提交" /></li>
    73     </ul>
    74     
    75     </fieldset>
    76   </form>
    77 </body>
    78 </html>
  • 相关阅读:
    tab选项卡可自动播放
    鼠标跟随效果
    初识html5
    浅谈权限设计
    css表格撑大问题解决
    通用数据权限管理系统设计
    样式兼容IE7
    RBAC用户角色权限设计
    大话权限设计
    一个简易实用的web权限管理模块的应用与实现
  • 原文地址:https://www.cnblogs.com/laiweidong/p/2856343.html
Copyright © 2011-2022 走看看