search

博客列表 >表单创建及CSS

表单创建及CSS

移动用户-7367797
移动用户-7367797原创
2021年07月02日 19:43:47648浏览

表单创建及属性

  1. input中type的值： text：文本框；password：密码框；email：电子邮箱；submit：提交；radio：单选框；checkbox：复选框；
  2. 下拉列表：select>option组合
    作业：表单创建
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>会员注册系统</title>
  8.     <style>
  9.         ul>li{
  10.             list-style: none;
  11.         }
  12.         li>label>input{
  13.             width: 220px;
  14.             height: 30px;
  15.             margin-top: 10px;
  16.             font-size: 18px;
  17.             /* border-radius: 5px; */
  18.         }
  20.         .content{
  21.             width: 500px;
  22.             margin: 0 auto;
  23.         }
  24.         .form{
  25.             width: 500px;
  26.             height: 500px;
  27.             background-color: #f0f5f9;
  28.         }
  29.         .title{
  30.             text-align: center;
  31.         }
  32.         .btn{
  33.             margin-left: 100px;
  34.         }
  35.         .btn>input{
  36.             width: 100px;
  37.         }
  38.         .btn>input:nth-child(2){
  40.             margin-left: 100px;
  41.         }
  42.         .address>input{
  43.             margin-top: 10px;
  44.             width: 400px;
  45.             font-size: 16px;
  46.         }
  47.         .tc{
  48.             margin-top: 10px;
  49.         }
  50.         .tc>label{
  51.             margin-right: 20px;
  53.       }
  54.       .add{
  55.           margin-top: 10px;
  56.       }
  57.       .tc-box{
  58.           margin-top: 10px;
  59.       }
  60.     </style>
  61. </head>
  62. <body>
  63.     <div class="content">
  64.         <div>
  65.             <h2 class="title">会员注册系统</h2>
  66.         </div>
  67.         <div class="form">
  68.             <form action="" method="get">
  69.                 <ul>
  70.                     <li>
  71.                         <label>用&nbsp户&nbsp&nbsp名：
  72.                             <input type="text" name="username" placeholder="请输入新用户名" autofocus id="">
  73.                         </label>
  74.                     </li>
  75.                     <li>
  76.                         <label>密&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp码：
  77.                             <input type="text" name="username" placeholder="请输入新用户名的密码" autofocus id="">
  78.                         </label>
  79.                     </li>
  80.                     <li>
  81.                         <label>联系电话：
  82.                             <input type="text" name="" placeholder="请输入联系电话" id="">
  83.                         </label>
  84.                     </li>
  85.                     <li>
  86.                         <label>电子邮箱：
  87.                             <input type="email" name="" id="" placeholder="请输入电子邮箱地址">
  88.                         </label>
  89.                     </li>
  90.                 </ul>
  91.                 <ul>
  92.                     <fieldset>
  93.                         <div class="fdt">
  94.                             <legend>个人信息</legend>
  95.                             <label>性别：
  96.                                 <input type="radio" name="gender" value="man" id="">男
  97.                             </label>
  98.                             <label>
  99.                                 <input type="radio" name="gender" value="woman" id="">女
  100.                             </label>
  101.                             <div class="add">
  102.                                 <label>现居住址：省份
  103.                                     <select name="" id="">
  104.                                         <option value="" selected>四川省</option>
  105.                                         <option value="">浙江省</option>
  106.                                         <option value="">广东省</option>
  107.                                         <option value="">湖南省</option>
  108.                                     </select>
  109.                                 </label>
  110.                                 <label>城市
  111.                                     <select name="" id="">
  112.                                         <option value="" selected>成都市</option>
  113.                                         <option value="">内江市</option>
  114.                                         <option value="">绵阳市</option>
  115.                                         <option value="">南充市</option>
  116.                                         <option value="">简阳市</option>
  117.                                         <option value="">眉山市</option>
  118.                                         <option value="">自贡市</option>
  119.                                     </select>
  120.                                 </label>
  121.                                 <label>区县
  122.                                     <select name="" id="">
  123.                                         <option value="" selected>青白江区</option>
  124.                                         <option value="">武侯区</option>
  125.                                         <option value="">金牛区</option>
  126.                                         <option value="">青羊区</option>
  127.                                         <option value="">天府新区</option>
  128.                                         <option value="">金堂县</option>
  129.                                         <option value="">成华区</option>
  130.                                     </select>
  131.                                 </label>
  132.                                 <div class="address">
  133.                                     <input type="text" placeholder="请输入详细地址">
  134.                                 </div>
  135.                                 <div class="tc">
  136.                                     <span>特长：</span>
  137.                                     <div class="tc-box">
  138.                                         <label>
  139.                                             <input type="checkbox" name="tc[]" id="">office软件
  140.                                         </label>
  141.                                         <label>
  142.                                             <input type="checkbox" name="tc[]" id="">AutoCAD
  143.                                         </label>
  144.                                         <label>
  145.                                             <input type="checkbox" name="tc[]" id="">Photoshop
  146.                                         </label>
  147.                                         <label>
  148.                                             <input type="checkbox" name="tc[]" id="">网络组建
  149.                                         </label>
  150.                                     </div>
  152.                                 </div>
  153.                             </div>
  154.                         </div>
  155.                     </fieldset>
  156.                 </ul>
  157.                 <div class="btn">
  158.                     <input type="button" value="提交">
  159.                     <input type="button" value="重置">
  160.                 </div>
  161.             </form>
  162.         </div>
  163.     </div>
  164. </body>
  165. </html>
上一条：简单表单与css选择器实战案例下一条：字体图标的用法和布局的原则与元素
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多