1. @import url("reset.css");
  2. @import url("index.css");
  1. div{
  2.     background-color: aqua;
  3. }
  1. *{
  2.     padding: 0;
  3.     margin: 0;
  4. }
  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>06-30作业</title>
  8.     <link rel="stylesheet" href="main.css">
  9.     <style>
  10.         div label{
  11.             background-color: blue;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16. <!-- 1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到; 
  17. 2. 理解css模块的思想,并试写一个案例(选做) 
  18. 3. 实例演示基本选择器与上下文选择器 4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等 -->
  20. <form action="" method="GET">
  21. <!-- 表单 -->
  22. <fieldset>
  23.     <lagend>必填项</lagend>
  24.     <div>
  25.         <label for="name">用户姓名：</label><input type="text" id="name" name="name">
  26.     </div>
  27.     <div>
  28.         <label for="tel">手机号码：</label><input type="tel" id="tel" name="tel">
  29.     </div>
  30.     <div>
  31.         <label for="email">收件邮箱：</label><input type="email" id="email" name="email" required>
  32.     </div>
  33.     <div>
  34.         <label for="pwd">登陆密码：</label><input type="password" id="pwd" name="pwd" required>
  35.     </div>
  36. </fieldset>
  37. <!-- 单选框 -->
  38. <div>
  39.     <label for="secret">性别：</label>
  40.     <input type="radio" name="gender" id="male" value="male"><label for="male">男</label>
  41.     <input type="radio" name="gender" id="female" value="female"><label for="female">女</label>
  42.     <input type="radio" name="gender" id="secret" value="secret" checked><label for="secret">不清楚</label>
  43. </div>
  44. <!-- 多选框 -->
  45. <div>
  46.     <label>爱好：</label>
  47.     <input type="checkbox" name="hobby[]" id="daqiu" value="daqiu"><label for="daqiu">打球</label>
  48.     <input type="checkbox" name="hobby[]" id="sign" value="sign"><label for="sign">唱歌</label>
  49.     <input type="checkbox" name="hobby[]" id="sleep" value="sleep" checked><label for="sleep">睡觉</label>
  50. </div>
  51. <!-- 下拉框 -->
  52. <div>
  53.     <select name="siren" id="">
  54.         <option value="1">杜甫</option>
  55.         <option value="2">李白</option>
  56.         <option value="3">林冲</option>
  57.         <option value="4">斯巴特</option>
  58.     </select>
  59. </div>
  60. <!-- 下拉搜索框 -->
  61. <div>
  62.     <input type="search" name="" id="" list="searchList">
  63.     <dataList id="searchList">
  64.         <option value="香蕉"></option>
  65.         <option value="葡萄"></option>
  66.         <option value="苹果"></option>
  67.     </dataList>
  68. </div>
  69. <input type="submit" value="提交">
  70. </form>
  71. </body>
  72. </html>

更多相关文章

  1. HTML表格实战：制作商品信息表格
  2. 0629作业
  3. 作业提交2021630
  4. 表单列表作业提交
  5. 0628作业
  6. 6/29号作业
  7. php学习
  8. 18.）PHPWeb开发框架~Laravel中表单自动验证机制配置
  9. 0601实战作业

随机推荐

  1. Android 应用的版本兼容 了解一下（理解 mi
  2. Android 使用WindowManager打造通用悬浮
  3. Android 不能使用内部资源
  4. Android [Camera 源码] 相机 HAL3(Camera
  5. Android系统进程Zygote启动过程的源代码
  6. android 通用的功能集锦
  7. Android不让弹出键盘挡住View
  8. android 动态、静态壁纸实现
  9. android ActionBarImpl can only be used
  10. Android万能适配器的封装及其原理