页面

代码

html

  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.     <link rel="stylesheet" href="css/userForm.css" />
  8.     <title>用户注册表单</title>
  9. </head>
  10. <body>
  11.    <h1>用户注册表单</h1>
  12.     <h3>注意事项</h3>
  13.     <ul>
  14.         <li>提交前检查</li>
  15.         <li class="start">有问题练习123456</li>
  16.         <li>网站邮箱：111@163.com</li>
  17.     </ul>
  19.    <form action="" method="get">
  20.     <div>
  21.         <label for="">搜索</label>
  22.         <input type="search" name="search" list="showList"/>
  23.         <datalist id="showList">
  24.             <option value="1"></option>
  25.             <option value="2"></option>
  26.             <option value="3"></option>
  27.         </datalist>
  29.     </div>
  30.     <fieldset class="must">
  31.         <legend>必填项</legend>
  32.         <div>
  33.             <label for="username">用户名：</label>
  34.             <input type="text" name="username" id="username" autofocus required placeholder="请输入不超过8位数">
  35.         </div>
  36.         <div>
  37.              <label for="password">密码：</label>
  38.              <input type="password" name="password" id="password" required placeholder="请输入大写字母或小写字母">
  39.         </div>
  40.         <div>
  41.              <label for="email">邮箱：</label>
  42.              <input type="email" name="email" id="email" required placeholder="example@email.com">
  43.         </div>
  44.     </fieldset>
  46.     <fieldset class="choose">
  47.         <legend>问卷调查（选填项）</legend>
  48.         <div>
  49.             <label for="male">性别：</label>
  50.             <input type="radio" name="gender" value="male" id="male" checked><label for="">男</label>
  51.             <input type="radio" name="gender" value="female" id="female"><label for="">女</label>
  52.         </div>
  53.         <div>
  54.             <label for="">从哪些渠道获取本网站信息：</label>
  55.             <input type="checkbox" name="route[]" id="internet"><label for="internet">网络</label>
  56.             <input type="checkbox" name="route[]" id="magzine" class="start"><label for="magzine">报纸杂志</label>
  57.             <input type="checkbox" name="route[]" id="friends"><label for="friends">朋友介绍</label>
  58.         </div>
  59.         <div>
  60.             <label for="">年龄段</label>
  61.             <select name="age" id="age">
  62.                 <option value="1">18岁以下</option>
  63.                 <option value="2" selected>18-30岁</option>
  64.                 <option value="3">30岁以上</option>
  65.             </select>
  66.         </div>
  68.     </fieldset>
  69.     <div>
  70.         <button type="submit">提交表单</button>
  71.     </div>
  73.    </form> 
  74. </body>
  75. </html>

css

  1. /* 基本选择器 */
  2. h1 {
  3.     text-align: center
  4. }
  5. h3 {
  6.     background-color: violet;
  7.     text-align: center
  8. }
  10. fieldset.must{
  11.     background-color: rgb(130, 225, 238);
  12.     text-align: center
  13. }
  14. fieldset.choose{
  15.     background-color: rgb(231, 238, 130);
  16.     text-align: center
  17. }
  18. /* 上下文选择器 */
  19. ul li {
  20.     background-color: lightblue;
  21. }
  22. .start + li {
  23.     background-color: yellow;
  24. }

更多相关文章

  1. 表单与css
  2. 一个没有JS跟没有连接数据库的表单
  3. html常用表单及CSS选择器练习
  4. 前端作业-表单
  5. 注册表单练习
  6. 作业提交2021630
  7. 表单列表作业提交
  8. php学习
  9. 常用 Git 命令总结

随机推荐

  1. Android获取默认浏览器信息
  2. Android Wear Preview - Get Started Wit
  3. Android 本地推送消息到通知栏 Notificat
  4. Mono登录界面记住密码的控件
  5. android 源码编译同步的小问题
  6. 【android】时间选择器
  7. Android 简单音乐播放器（破烂版，后续更新）
  8. 解决Android studio 启动报错java.lang.R
  9. Android DHT11驱动
  10. android 读取 icon