博客列表 >10.18日作业

10.18日作业

子墨吖ฅฅ
子墨吖ฅฅ原创
2022年10月18日 23:01:19406浏览

表单实战用户注册

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport"
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8. <title>用户注册</title>
  9. </head>
  10. <style>
  11. fieldset > legend{
  12. text-align: center;
  13. }
  14. </style>
  15. <body>
  16. <!-- 默认使用post提交至register.php -->
  17. <form action="register.php" method="post">
  18. <fieldset>
  19. <legend>用户基本信息</legend>
  20. <div>
  21. <label for="user">用户名:</label>
  22. <input type="text" name="user" id="user" value="" placeholder="请输入用户名...">
  23. </div>
  24. <div>
  25. <label for="password">密码:</label>
  26. <input type="password" name="password" id="password" value="" placeholder="请输入密码...">
  27. </div>
  28. <div>
  29. <label for="password_cf">重复密码:</label>
  30. <input type="password" name="password_cf" id="password_cf" value="" placeholder="请确认密码...">
  31. </div>
  32. </fieldset>
  33. <fieldset>
  34. <legend>个人信息</legend>
  35. <div>
  36. <label for="username">昵称:</label>
  37. <input type="text" name="username" id="username" placeholder="请输入你的用户昵称">
  38. </div>
  39. <div>
  40. <label for="secrecy">性别:</label>
  41. <input type="radio" name="gender" id="man"><label for="man"></label>
  42. <input type="radio" name="gender" id="woman"><label for="woman"></label>
  43. <input type="radio" name="gender" id="secrecy"><label for="secrecy">保密</label>
  44. </div>
  45. <div>
  46. <label for="age">年龄:</label>
  47. <input type="number" name="age" id="age" value="18" min="18" max="80">
  48. </div>
  49. <div>
  50. <label for="email">邮箱:</label>
  51. <input type="email" name="email" id="email" placeholder="admin@qq.com">
  52. </div>
  53. <div>
  54. <label for="url">Blog:</label>
  55. <input type="url" name="url" id="url" placeholder="https://或http://">
  56. </div>
  57. <div>
  58. <label for="zhiye">职业:</label>
  59. <select name="zhiye" id="zhiye" >
  60. <option value="0" selected disabled>---请选择你的职业---</option>
  61. <option value="1">无业(自由职业)</option>
  62. <option value="2">个人工作者</option>
  63. <option value="3">企业工作者</option>
  64. <option value="4">其他职业</option>
  65. </select>
  66. </div>
  67. <div>
  68. <label for="game">兴趣爱好:</label>
  69. <input type="checkbox" name="hobby[]" id="game" value="game"><label for="game">游戏</label>
  70. <input type="checkbox" name="hobby[]" id="trave" value="trave"><label for="trave">旅游</label>
  71. <input type="checkbox" name="hobby[]" id="kan" value="kan"><label for="kan">追剧</label>
  72. <input type="checkbox" name="hobby[]" id="program" value="program"><label for="program">编程</label>
  73. </div>
  74. <div>
  75. <label for="keyword">语言: </label>
  76. <input type="search" name="language" list="details" id="keyword">
  77. <datalist id="details">
  78. <option value="html">html</option>
  79. <option value="css">css</option>
  80. <option value="js">js</option>
  81. <option value="php">php</option>
  82. <option value="vue">vue</option>
  83. <option value="node">node</option>
  84. </datalist>
  85. </div>
  86. <div style="margin-top: 10px">
  87. <label for="comment">个人简介:</label>
  88. <textarea name="comment" id="comment" cols="20" rows="5" maxlength="200" placeholder="请输入你的个人简介" style="resize: none"></textarea>
  89. </div>
  90. <div>
  91. <!-- 隐藏域 -->
  92. <input type="hidden" name="id" value="10001">
  93. </div>
  94. </fieldset>
  95. <fieldset>
  96. <legend>资料上传</legend>
  97. <label for="user_touxiang">头像:</label>
  98. <input type="file" name="user_touxiang" id="user_touxiang">
  99. <button type="button">上传</button>
  100. </fieldset>
  101. <button type="submit">提交</button>
  102. <button type="reset">重置</button>
  103. </form>
  104. </body>
  105. </html>

运行图

运行图

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议