Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 初识初学表单
Blogger Information
Blog 6
fans 0
comment 0
visits 3145
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
477 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.     <div style="color: brown; font-size: 25px; margin-bottom: 10px">
  11.       注册信息
  12.     </div>
  13.     <form action="" style="display: grid; gap: 1em" method="POST">
  14.       <div>
  15.         <label for="username">账号：</label>
  16.         <input
  17.           type="text"
  18.           id="username"
  19.           placeholder="1-3位字母加数字"
  20.           required
  21.           autofocus
  22.         />
  23.       </div>
  24.       <div>
  25.         <label for="password">密码：</label>
  26.         <input
  27.           type="password"
  28.           id="password"
  29.           placeholder="不要用生日"
  30.           required
  31.           autofocus
  32.         />
  33.       </div>
  34.       <div>
  35.         <label for="email">邮箱：</label>
  36.         <input type="email" id="email" placeholder="1231@qq.com" />
  37.       </div>
  39.       <div>
  40.         <label for="screct">性别:</label>
  41.         <input type="radio" name="sex" value="male" id="male" /><label
  42.           for="male"
  43.           >男</label
  44.         >
  45.         <input type="radio" name="sex" value="female" id="female" /><label
  46.           for="female"
  47.           >女</label
  48.         >
  49.         <input
  50.           type="radio"
  51.           name="sex"
  52.           value="screct"
  53.           id="screct"
  54.           checked
  55.         /><label for="screct">保密</label>
  56.       </div>
  57.       <div>
  58.         <label for="">癖好:</label>
  59.         <input type="checkbox" name="hobby[]" id="fish" />
  60.         <label for="fish">钓鱼</label>
  61.         <input type="checkbox" name="hobby[]" id="basketball" />
  62.         <label for="basketball">打球</label>
  63.         <input type="checkbox" name="hobby[]" id="game" />
  64.         <label for="game">玩游戏</label>
  65.       </div>
  67.       <div>
  68.         <label for="">级别：</label>
  69.         <select name="level" id="">
  70.           <option value="1">一级会员</option>
  71.           <option value="2">二级会员</option>
  72.           <option value="3">三级会员</option>
  73.         </select>
  74.       </div>
  76.       <!-- datalist 学习 -->
  77.       <div>
  78.         <label for="">datalis用法：</label>
  79.         <input type="search" name="" id="" list="key" />
  80.         <datalist id="key">
  81.           <option value="随时"></option>
  82.           <option value="爱好"></option>
  83.           <option value="Mint"></option>
  84.           <option value="Strawberry"></option>
  85.           <option value="Vanilla"></option>
  86.         </datalist>
  87.       </div>
  88.       <div><button type="button">提交</button></div>
  89.     </form>
  90.   </body>
  91. </html>

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