Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表单的制作
Blogger Information
Blog 36
fans 0
comment 0
visits 27920
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
表单的制作
小程_武汉_214945
Original
697 people have browsed it

效果图

代码如下

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.           content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>用户注册</title>
  9. </head>
  10. <body>
  12. <style>
  13.     .register input{
  14.         border-radius: 5px;
  15.         border: 1px solid #666;
  16.     }
  17.     .item{
  18.         height: 40px;
  19.         line-height: 40px;
  20.     }
  21.     input[type="text"]{
  22.         width: 170px;
  23.     }
  24.     input[type="email"]{
  25.         width: 170px;
  26.     }
  27.     input[type="password"]{
  28.         width: 170px;
  29.     }
  30.     input[type="search"]{
  31.         width: 170px;
  32.     }
  33.     #keywords{
  34.         width: 170px;
  35.     }
  36.     .submit{
  37.         background-color: #1E9FFF;
  38.         color: #fff;
  39.         border-radius: 4px;
  40.         text-align: center;
  41.         padding: 0px 30px;
  42.         border: 1px solid transparent;
  43.         height: 38px;
  44.         line-height: 38px;
  45.     }
  46.     .item:nth-child(2) label{
  47.         color: red;
  48.     }
  49. </style>
  52. <div class="register">
  53.     <h4>用户注册</h4>
  54.     <form action="#" method="post">
  55.         <fieldset>
  56.             <div class="item">
  57.                 <label for="username">账号：</label>
  58.                 <input type="text" name="username" id="username" placeholder="请输入账号" required value="admin">
  59.             </div>
  60.             <div class="item">
  61.                 <label for="password">密码：</label>
  62.                 <input type="password" name="password" id="password" placeholder="请输入密码" required>
  63.             </div>
  64.             <div class="item">
  65.                 <label for="email">邮箱：</label>
  66.                 <input type="email" name="email" id="email" placeholder="examples@qq.com" required>
  67.             </div>
  68.         </fieldset>
  69.         <div class="item">
  70.             <label for="secret">性别：</label>
  71.             <input type="radio" name="gender" value="1"><label for="">男</label>
  72.             <input type="radio" name="gender" value="0"><label for="">女</label>
  73.             <input type="radio" name="gender" value="2" checked id="secret"><label for="">保密</label>
  74.         </div>
  75.         <div class="item">
  76.             <label>爱好:</label>
  77.             <input type="checkbox" name="hobby[]" id="game" checked /><label for="game">游戏</label>
  78.             <input type="checkbox" name="hobby[]" id="trave" /><label for="trave">旅游</label>
  79.             <input type="checkbox" name="hobby[]" id="shoot" checked /><label for="shoot">摄影</label>
  80.         </div>
  81.         <div class="item">
  82.             <select name="level" id="">
  83.                 <option value="1">铜牌会员</option>
  84.                 <option value="2">银会员</option>
  85.                 <option value="3">金牌会员</option>
  86.                 <option value="4" selected>钻石会员</option>
  87.             </select>
  88.         </div>
  89.         <div class="item">
  90.             <label for="">搜索关键字:</label>
  91.             <input type="search" name="search" list="keywords" />
  92.             <datalist id="keywords">
  93.                 <option value="html"></option>
  94.                 <option value="css"></option>
  95.                 <option value="javascript"></option>
  96.                 <option value="js"></option>
  97.                 <option value="php"></option>
  98.             </datalist>
  99.         </div>
  100.         <div class="item">
  101.             <button class="submit">提交</button>
  102.         </div>
  103.     </form>
  104. </div>
  105. </body>
  106. </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