表单创建及属性

  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>

更多相关文章

  1. 注册表单实战案例
  2. HTML注册表单控件实例、CSS模块化理解与CSS基本/上下文选择器的
  3. 表单以及选择器
  4. 实战简单的注册表单以及选择器的认识
  5. css选择器与用户表单制作
  6. 表单与css
  7. 表单案例和css模块化与选择器
  8. 注册表单、基本选择器及上下文选择器
  9. 一个没有JS跟没有连接数据库的表单

随机推荐

  1. Android 应用程序界面设计建议
  2. 和菜鸟一起学android4.0.3源码之lcd屏幕
  3. Android中主题与样式
  4. 【Android】Android 概述_问答
  5. 深入解析Android关机
  6. Android分析View的scrollBy()和scrollTo(
  7. Android(安卓)UI 优化 使用和 标签
  8. 【Android语音合成TTS】云知声离线TTS使
  9. Android静默安装和静默卸载
  10. Android实时抓包分析 : 善用adb调试桥