博主信息
博文 34
粉丝 0
评论 0
访问量 26317
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html表单的基本使用
小庄
原创
752人浏览过

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. <title>Document</title>
  8. </head>
  9. <!-- 作业内容: -->
  10. <!-- 1. 制作一个用户注册表单,将课堂上提到的表单控件全部用到; -->
  11. <!-- 2. 理解css模块的思想,并试写一个案例(选做) -->
  12. <!-- 3. 实例演示基本选择器与上下文选择器 -->
  13. <!-- 4. 预习伪类选择器与常用元素的css样式设置,盒模型知识等 -->
  14. <style>
  15. .register{
  16. margin: 0 auto;
  17. width: 793.6px;
  18. }
  19. .reg-detail{
  20. padding: 38.400000000000006px 224px 52px;
  21. }
  22. .reg-detail div{
  23. padding-top: 30px;
  24. }
  25. .reg-tetail-username input{
  26. width: 83%;
  27. }
  28. .sex select{
  29. width: 34%;
  30. float: right;
  31. }
  32. </style>
  33. <body>
  34. <div class="detail">
  35. <div class="register">
  36. <h3>用户注册</h3>
  37. <div class="reg-detail">
  38. <form action="index.php" method="GET">
  39. <div class="reg-tetail-username">
  40. <div class="user">
  41. <label for="">帐号:</label>
  42. <input type="text" name="username" autofocus required placeholder="输入用户名">
  43. </div>
  44. <div class="pw">
  45. <label for="">密码:</label>
  46. <input type="password" name="pwd" required placeholder="输入密码不少于8位">
  47. </div>
  48. <div class="emai">
  49. <label for="">邮箱:</label>
  50. <input type="email" name="email" required placeholder="123@qq.com">
  51. </div>
  52. </div>
  53. <div class="sex">
  54. <label for="moren">性别:</label>
  55. <input type="radio" name="gender" value="nan"><label for=""></label>
  56. <input type="radio" name="gender" value="nv"><label for=""></label>
  57. <input type="radio" name="gender" value="ps" checked id="moren"><label for="">保密</label>
  58. <select name="level" id="">
  59. <option value="1">西南地区</option>
  60. <option value="4">东北地区</option>
  61. <option value="4">华南地区</option>
  62. <option value="4">华北地区</option>
  63. <option value="3" selected>---请选择地区---</option>
  64. </select>
  65. </div>
  66. <div class="aihao">
  67. <label for="">爱好:</label>
  68. <input type="checkbox" name="check[]" id="game" checked><label for="game">游戏</label>
  69. <input type="checkbox" name="check[]" id="lvyou"><label for="lvyou">旅游</label>
  70. <input type="checkbox" name="check[]" id="sheying" checked><label for="sheying">摄影</label>
  71. </div>
  72. <div>
  73. <button style="width: 100%;">提交</button>
  74. </div>
  75. </form>
  76. </div>
  77. </div>
  78. </div>
  79. </body>
  80. </html>
批改老师:PHPzPHPz

批改状态:合格

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学