Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html基础：form表单
Blogger Information
Blog 2
fans 0
comment 0
visits 901
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
html基础：form表单
苏荣
Original
468 people have browsed it
  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>Document</title>
  8.   </head>
  9.   <body>
  10.     <form action="" method="POST">
  11.       <fieldset>
  12.         <legend>必填项</legend>
  14.         <!-- 文本输入框 -->
  15.         <div>
  16.           <label for="username">帐号:</label>
  17.           <input
  18.             type="text"
  19.             id="username"
  20.             autofocus
  21.             required
  22.             placeholder="账号"
  23.           />
  24.         </div>
  25.         <div>
  26.           <label for="password">密码:</label>
  27.           <input type="password" id="password" required placeholder="密码" />
  28.         </div>
  29.       </fieldset>
  31.       <div>
  32.         <label for="email">邮箱:</label>
  33.         <input type="email" id="email" placeholder="demo@qq.com" />
  34.       </div>
  35.       <div>
  36.         <label for="secret">性别:</label>
  37.         <input type="radio" name="gender" value="male" id="male" /><label
  38.           for="male"
  39.           >男</label
  40.         >
  41.         <input type="radio" name="gender" value="female" id="female" /><label
  42.           for="female"
  43.           >女</label
  44.         >
  45.         <input
  46.           type="radio"
  47.           name="gender"
  48.           value="secret"
  49.           id="secret"
  50.           checked
  51.         /><label for="secret">保密</label>
  52.       </div>
  54.       <div>
  55.         <label>爱好:</label>
  56.         <input type="checkbox" name="hobby[]" id="programmer" checked /><label
  57.           for="programmer"
  58.           >编码</label
  59.         >
  60.         <input type="checkbox" name="hobby[]" id="game" /><label for="game"
  61.           >游戏</label
  62.         >
  63.         <input type="checkbox" name="hobby[]" id="trave" /><label for="trave"
  64.           >旅游</label
  65.         >
  66.         <input type="checkbox" name="hobby[]" id="shot" /><label for="shot"
  67.           >摄影</label
  68.         >
  69.       </div>
  71.       <div>
  72.         <select name="level" id="">
  73.           <option value="1">铜牌会员</option>
  74.           <option value="2">银牌会员</option>
  75.           <option value="3" selected>金牌会员</option>
  76.           <option value="4">钻石会员</option>
  77.         </select>
  78.       </div>
  80.       <div>
  81.         <!-- datalist -->
  82.         <label for="">关键字</label>
  83.         <input type="search" name="search" id="" list="my-key" />
  84.         <datalist id="my-key">
  85.           <option value="html">html</option>
  86.           <option value="css">css</option>
  87.           <option value="js">js</option>
  88.         </datalist>
  89.       </div>
  91.       <button type="submit">提交</button>
  92.     </form>
  93.   </body>
  94. </html>

效果图

Correcting teacher：天蓬老师天蓬老师

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