1. <!DOCTYPE html>
  2. <html lang="en">
  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. </head>
  9. <body>
  10.     <form action="" method="post">
  11.         <div>
  12.            <label for="username">用户名：</label>
  13.            <input type="text" id="username" name="username" value="" placeholder="至少8位" autofocus required>
  14.         </div> 
  15.         <div>
  16.             <label for="pwd">密 码：</label>
  17.             <input type="password" id="pwd" name="password" value="" placeholder="数字+字母" required>
  18.         </div>
  19.         <div>
  20.             <label for="my-email">邮 箱：</label>
  21.             <input type="email" id="my-email" name="email" value="" placeholder="123@qq.com" required>
  22.         </div>
  23.         <!-- *单选按钮 -->
  24.         <div>
  25.             <label for="male">性别：</label>
  26.             <input type="radio" name="gender" id="male" checked/><label for="male">男</label>
  27.             <input type="radio" name="gender" id="female"/><label for="female">女</label>
  28.         </div>
  29.         <!-- *复选框 -->
  30.         <div>
  31.             <label for="">爱好</label>
  32.             <input type="checkbox" name="hobbies[]" id="1" checked/><label for="1">游戏</label>
  33.             <input type="checkbox" name="hobbies[]" id="2" checked/><label for="2">编程</label>
  34.             <input type="checkbox" name="hobbies[]" id="3" /><label for="3">摄影</label>
  35.         </div>
  36.             <!-- *下拉列表 -->
  37.             <!-- *select.name,option.value,name,value属性不在同一个标签中 -->
  38.             <label for="user">会员：</label>
  39.             <select name="user" id="user">
  40.                 <option value="1">金牌会员</option>
  41.                 <option value="2">银牌会员</option>
  42.                 <option value="3" selected>铜牌会员</option>
  43.                 <option value="4">木牌会员</option>
  44.             </select>
  45.         <div>
  46.             <button>提交</button>
  47.         </div> 
  48.     </form>
  49. </body>
  50. </html>

效果图如下：