简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 表单创建及CSS
Blogger Information
Blog 4
fans 0
comment 0
visits 1907
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表单创建及CSS
移动用户-7367797
Original
647 people have browsed it

表单创建及属性

  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>
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！