Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 一个实用的表单元素
Blogger Information
Blog 31
fans 2
comment 0
visits 27676
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
一个实用的表单元素
霏梦
Original
611 people have browsed it

- 作者：霏梦

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>表单</title>
  7.     <script>
  8.       function showPwd(ele) {
  9.         document.querySelector("#pwd-1").type = "text";
  10.       }
  11.     </script>
  13.     <style>
  14.         body{
  15.             color: lightsteelblue;
  16.         }
  17.         h3{
  18.             text-align: center;
  20.         }
  21.         form{
  22.             width: 450px;
  23.             margin: 30px auto;
  24.             border-top: 1px solid #aaa;
  25.         }
  26.         form fieldset{
  27.             border: 1px solid lightgreen;
  28.             background-color: lightcyan;
  29.             margin: 10px;
  31.         }
  32.         form fieldset legend{
  33.             background-color:lightcyan;
  34.             color: mediumaquamarine;
  35.             padding: 5px 15px;
  36.             border-radius: 10px;
  37.         }
  38.         form div{
  39.             margin: 10px;
  40.         }
  41.         form p{
  42.             text-align: center;
  43.         }
  44.         input:focus{
  45.             background-color: lightpink;
  46.         }
  47.         form .btn:hover{
  48.             background-color: coral;
  49.             color: white;
  50.             cursor: pointer;
  51.         }
  52.     </style>
  53.   </head>
  54.   <body>
  55.     <h3>用户注册</h3>
  56.     <!-- form+input -->
  57.     <form action="" method="POST">
  58.       <!-- 控件组 --filedse与legend成对出现>
  59.       <fieldset>
  60.         <legend>员工基本信息（必填）</legend>
  61.         <div>
  62.           <label for="username">账号：</label>
  63.           <input
  64.             type="text"
  65.             id="username"
  66.             name="username"
  67.             placeholder="6-15位字符"
  68.             autofocus
  69.             required
  70.           />
  71.         </div>
  72.         <div>
  73.           <label for="email-id">邮箱：</label>
  74.           <input
  75.             type="email"
  76.             name="email"
  77.             id="email-id"
  78.             placeholder="demo
  79.             @example.com"
  80.             required
  81.           />
  82.         </div>
  83.         <div>
  84.           <label for="pwd-1">密码：</label>
  85.           <input
  86.             type="password"
  87.             name="password"
  88.             id="pwd-1"
  89.             placeholder="不少于8位且字母和数字"
  90.           />
  91.           <button onclick="showPwd()" id="btn" type="button">查看密码</button>
  92.         </div>
  93.         <div>
  94.           <label for="pwd-2">确认：</label>
  95.           <input type="password" name="password2" id="pwd-2" />
  96.         </div>
  97.       </fieldset>
  99.       <fieldset>
  100.         <legend>扩展信息（选填）</legend>
  101.         <div>
  102.           <label for="date-id"
  103.             >出生日期： <input type="date" name="birthday" id="date-id"
  104.           /></label>
  105.         </div>
  106.         <div>
  107.           <!-- 单选按妞 -->
  108.           <label>性别：</label>
  109.           <input type="radio" name="male" id="male" /><label for="male"
  110.             >男</label
  111.           >
  112.           <input type="radio" name="female" id="female" /><label for="female"
  113.             >女</label
  114.           >
  115.           <input type="radio" name="secret" id="secret" checked /><label
  116.             for="secret"
  117.             >保密</label
  118.           >
  119.         </div>
  120.         <div>
  121.           <!-- 复选框  laber for与ID必须一致-->
  122.           <label for="programme">我的爱好</label>
  123.           <input
  124.             type="checkbox"
  125.             name="hobby[]"
  126.             id="game"
  127.             value="game"
  128.           /><label></label>
  129.           <input
  130.             type="checkbox"
  131.             name="hobby[]"
  132.             id="shoot"
  133.             value="shoot"
  134.           /><label for="shoot">摄像</label>
  135.           <input
  136.             type="checkbox"
  137.             name="hobby[]"
  138.             id="programme"
  139.             value="programme"
  140.             checked
  141.           /><lable for="programme">编程开发</label>
  142.         </div>
  143.         <div>
  144.             <!-- 选项列表 -->
  145.             <label for="brand">手机品牌</label>
  146.             <input type="search" list="phone" name="brand" id="brand">
  147.             <datalist id="phone">
  148.                 <option value="apple"> </option>
  149.                 <option value="huawei"> </option>
  150.                 <option value="xiaomi"> </option>
  151.                 <option value="lenove" label="小米"> </option>
  152.             </datalist>    
  153.         </div>
  154.       </fieldset>
  155.       <fieldset>
  156.           <legend>其它信息</legend>
  157.           <div>
  158.               <label for="file-id">文件上传</label>
  159.               <input type="file" name="filename" id="file-id" accept="image/jpeg,image/jpg,image/png">
  160.           </div>
  161.           <div>
  162.               <label for="area-id">备注</label>
  163.               <textarea name="area" id="area-id" placeholder="请输入你的内容，100字内" cols="30" rows="10">
Correcting teacher：WJWJ

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