Blogger Information
Blog 38
fans 0
comment 0
visits 22877
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
form0313
一个好人
Original
343 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=, initial-scale=1.0">
  7. <title>注册表单</title>
  8. </head>
  9. <body>
  10. <form action="register.php" method="post">
  11. <legend>新用户注册</legend>
  12. <fieldset style="display: inline-grid; gap: 1em">
  13. <div class="username">
  14. <label for="uname">用户名</label>
  15. <input type="text" id="uname" name="uname" value="" placeholder="请输入用户名(不少于6位)" required autofocus>
  16. </div>
  17. <div class="email">
  18. <label for="email">邮箱:</label>
  19. <input type="email" name="email" id="email" placeholder="username@email.com">
  20. </div>
  21. <div class="psw">
  22. <label for="psw">密码:</label>
  23. <input
  24. type="password"
  25. onkeydown="this.nextElementSibling.disabled=false"
  26. name="password"
  27. id="psw"
  28. placeholder="不少于6位"
  29. required>
  30. <button type="button" onclick="showPsw(this, this.form,true)" disabled>查看</button>
  31. </div>
  32. <div class="age">
  33. <label for="age">年龄:</label>
  34. <input type="number" id="age" name="age" min="18">
  35. </div>
  36. <div class="birthday">
  37. <label for="birthday">生日:</label>
  38. <input type="date" id="birthday" name="birthday" value="2020-02-22" min="1949-10-01">
  39. </div>
  40. <div class="sex">
  41. <label for="male">性别:</label>
  42. <!-- input.type中的name是提交到服务器的 -->
  43. <input type="radio" name="sex" value="male" id="male" checked><label for="male"></label>
  44. <input type="radio" name="sex" value="female" id="female"><label for="female"></label>
  45. <input type="radio" name="sex" value="secret" id="secret"><label for="secret">保密</label>
  46. </div>
  47. <div class="hobby">
  48. <label for="">爱好:</label>
  49. <!-- checkbox的name不能相同,返回的是数组 -->
  50. <input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label>
  51. <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">编程</label>
  52. <input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label>
  53. <input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">游戏</label>
  54. </div>
  55. <div class="edu">
  56. <label for="">学历:</label>
  57. <select name="edu" id="">
  58. <option value="1" selected disabled>---请选择---</option>
  59. <option value="1">中学</option>
  60. <option value="2">大学</option>
  61. <option value="3">研究生</option>
  62. </select>
  63. </div>
  64. <button>提交</button>
  65. </fieldset>
  66. </form>
  67. <script>
  68. // 显示密码
  69. function showPsw(ele, form){
  70. const psw = form.password
  71. if(psw.type=='password'){
  72. psw.type = 'text'
  73. ele.textContent = '隐藏'
  74. }else if(psw.type =='text'){
  75. psw.type = 'password'
  76. ele.textContent = '显示'
  77. }else{
  78. return false
  79. }
  80. }
  81. </script>
  82. </body>
  83. </html>

注册表单0313

总结:

表单入手不难,难在精通,要多用多练,挺期待下节课的CSS的。

Correcting teacher:PHPzPHPz

Correction status:qualified

Teacher's comments:总体没什么问题
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post