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>

更多相关文章

  1. 做iOS开发程序员10个必需的开发工具和资源
  2. Android沙盒开发之系统libc库定制修改
  3. Android中如何使用自定义对话框
  4. Android之会员页面及进度条
  5. 关于OFBiz的详细介绍
  6. Python实现LRFM模型分析客户价值
  7. 一个简单QQ群聊案例代码解析(PHP实现)
  8. php生成一个不重复的会员号
  9. mall整合Mongodb实现文档操作

随机推荐

  1. bootstrap-multiselect 多选实例代码
  2. 详解可选参数和命名参数实例
  3. 分享一个IoC入门教程实例
  4. [转]Composite Keys With WebApi OData
  5. 总结EF通用数据层封装类实例详解
  6. [转]Support Composite Key in ASP.NET W
  7. 学习ASP.NET Core 2遇到的问题分享
  8. 使用ConcurrentDictionary多线程同步字典
  9. 浅谈WPF之Binding表达式
  10. 一个很强大的控件--PropertyGrid