Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 9.22作业-注册页面及css
Blogger Information
Blog 10
fans 0
comment 0
visits 4923
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
9.22作业-注册页面及css
鬼才哥-秋兜
Original
423 people have browsed it

代码效果

源代码

  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>0922作业</title>
  8.     <style>
  9.       [class="id"] {
  10.         color: green;
  11.         background-color: rgb(255, 0, 200);
  12.       }
  13.       [class="mima"] {
  14.         color: rgb(47, 0, 255);
  15.         background-color: rgb(255, 219, 14);
  16.       }
  17.       [class="sq"] {
  18.         color: rgb(47, 0, 255);
  19.         background-color: rgb(255, 219, 14);
  20.       }
  21.       [class="cz"] {
  22.         color: rgb(47, 0, 255);
  23.         background-color: rgb(255, 0, 200);
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <h2>会员注册</h2>
  29.     <form action="">
  30.       <fieldset>
  31.         <legend>必填项</legend>
  32.         <div class="id">
  33.           <label for="username">用户名：</label>
  34.           <input
  35.             type="text"
  36.             id="username"
  37.             name="username"
  38.             placeholder="请输入中文或英文"
  39.             required
  40.             autofocus
  41.           />
  42.         </div>
  43.         <div class="mima">
  44.           <label for="password">密　码：</label>
  45.           <input type="password" id="password" name="password" required />
  46.         </div>
  47.       </fieldset>
  48.       <fieldset>
  49.         <legend>补充信息</legend>
  50.         <div>
  51.           <label for="gender">性　别：</label>
  52.           <input type="radio" name="gender" id="male" value="male" /><label
  53.             for="male"
  54.             >男人</label
  55.           >
  56.           <input type="radio" name="gender" id="female" value="female" /><label
  57.             for="female"
  58.             >女人</label
  59.           >
  60.           <input
  61.             type="radio"
  62.             name="gender"
  63.             id="secret"
  64.             value="secret"
  65.             checked
  66.           /><label for="secret">保密</label>
  67.         </div>
  68.         <div>
  69.           <label>个人爱好：</label>
  70.           <input type="checkbox" id="game" value="game" checked /><label
  71.             for="game"
  72.             >玩游戏</label
  73.           >
  74.           <input type="checkbox" id="mm" value="mm" /><label for="m"
  75.             >看美女</label
  76.           >
  77.         </div>
  78.         <div>
  79.           <label>选择会员：</label>
  80.           <select name="level">
  81.             <option value="1" selected>一级会员</option>
  82.             <option value="2">二级会员</option>
  83.             <option value="3">三级会员</option>
  84.           </select>
  85.         </div>
  86.         <div>
  87.           <label for="">搜索关键字:</label>
  88.           <input type="search" name="search" list="keywords" />
  89.           <datalist id="keywords">
  90.             <option value="美女">美女</option>
  91.             <option value="帅哥">帅哥</option>
  92.             <option value="大叔">大叔</option>
  93.           </datalist>
  94.         </div>
  95.         <div>
  96.           <label for="tel">手　机：</label>
  97.           <input type="text" id="tel" name="tel" placeholder="请输入手机号码" />
  98.         </div>
  99.         <div>
  100.           <label for="email">邮　箱：</label>
  101.           <input
  102.             type="email"
  103.             id="email"
  104.             name="email"
  105.             placeholder="请输入邮箱如:1@1.com"
  106.           />
  107.         </div>
  108.       </fieldset>
  109.       <button text-align="center" class="sq">申　请</button>
  110.       <button type="reset" class="cz">重　置</button>
  111.     </form>
  112.   </body>
  113. </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