欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

表单初体验

程序员文章站 2022-05-29 13:05:11
...

用html实现一个简单的用户注册界面，并实现密码的查看与隐藏

我们要用到的html标签有：form，他的属性有两个比较重要——method（指定表单的提交方式，get或post），action（指定表单提交的后端处理文件，如：register.php）；label+input，一对标签可以实现绑定，其中input有很多类型，如：text文本类型、password密码类型、email邮箱类型、checkbox多选框、radio单选框，还有一种特殊的表单：select下拉菜单；
那我们用上面的input类型，能形成一个什么样的用户注册页面呢，如下图所示：
表单初体验
那么实现界面上这些功能的代码如下:

    

  1. <!DOCTYPE html>
    2. 

  2. <html lang="en">
    3. 

  3.   <head>
    4. 

  4.     <meta charset="UTF-8" />
    5. 

  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6. 

  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. 

  7.     <title>用户注册</title>
    8. 

  8.   </head>
    9. 

  9.   <body>
    10. 

  10.     <!-- 用户名、密码、性别、爱好、邮箱、下拉列表 -->
    11. 

  11.     <form action="register.php" method="post" style="display: grid; gap: 10px;">
    12. 

  12.       <div>
    13. 

  13.         <label for="username">用户名：</label>
    14. 

  14.         <input
    15. 

  15.           type="text"
    16. 

  16.           name="username"
    17. 

  17.           id="username"
    18. 

  18.           required
    19. 

  19.           value="admin"
    20. 

  20.           placeholder="英文6-8位"
    21. 

  21.         />
    22. 

  22.       </div>
    23. 

  23.       <div>
    24. 

  24.         <label for="password">密码：</label>
    25. 

  25.         <input
    26. 

  26.           type="password"
    27. 

  27.           name="password"
    28. 

  28.           id="password"
    29. 

  29.           required
    30. 

  30.           placeholder="英文+数字6-12位"
    31. 

  31.         />
    32. 

  32.         <button onclick="showPassword(this,this.form.password)" type="button">
    33. 

  33.           显示
    34. 

  34.         </button>
    35. 

  35.       </div>
    36. 

  36.       <div>
    37. 

  37.         <label for="email">邮箱：</label>
    38. 

  38.         <input type="email" name="email" id="email" placeholder="请输入邮箱" />
    39. 

  39.       </div>
    40. 

  40.       <div>
    41. 

  41.         <label for="secret">性别:</label>
    42. 

  42.         <input type="radio" name="gender" id="male" value="male" />
    43. 

  43.         <label for="male">男</label>
    44. 

  44.         <input type="radio" name="gender" id="female" value="female" />
    45. 

  45.         <label for="female">女</label>
    46. 

  46.         <input type="radio" name="gender" id="secret" value="secret" checked />
    47. 

  47.         <label for="secret">保密</label>
    48. 

  48.       </div>
    49. 

  49.       <div>
    50. 

  50.         <label>爱好：</label>
    51. 

  51.         <input type="checkbox" name="hobby[]" id="football" value="football" />
    52. 

  52.         <label for="football">足球</label>
    53. 

  53.         <input
    54. 

  54.           type="checkbox"
    55. 

  55.           name="hobby[]"
    56. 

  56.           id="basketball"
    57. 

  57.           value="basketball"
    58. 

  58.         />
    59. 

  59.         <label for="basketball">蓝球</label>
    60. 

  60.         <input
    61. 

  61.           type="checkbox"
    62. 

  62.           name="hobby[]"
    63. 

  63.           id="pingpangball"
    64. 

  64.           value="pingpangball"
    65. 

  65.         />
    66. 

  66.         <label for="pingpangball">乒乓球</label>
    67. 

  67.         <input
    68. 

  68.           type="checkbox"
    69. 

  69.           name="hobby[]"
    70. 

  70.           id="music"
    71. 

  71.           value="music"
    72. 

  72.           checked
    73. 

  73.         />
    74. 

  74.         <label for="music">音乐</label>
    75. 

  75.       </div>
    76. 

  76.       <label for="identity">用户身份：</label>
    77. 

  77.       <select name="level" id="identity">
    78. 

  78.         <option value="1" checked>普通会员</option>
    79. 

  79.         <option value="2">高级会员</option>
    80. 

  80.         <option value="3">永久会员</option>
    81. 

  81.       </select>
    82. 

  82.       <div>
    83. 

  83.         <button type="submit">提交</button>
    84. 

  84.         <button type="reset">重置</button>
    85. 

  85.       </div>
    86. 

  86.     </form>
    87. 

  87.     <script>
    88. 

  88.       function showPassword(btn, ele) {
    89. 

  89.         if (ele.type === 'password') {
    90. 

  90.           ele.type = 'text'
    91. 

  91.           btn.textContent = '隐藏'
    92. 

  92.         } else {
    93. 

  93.           ele.type = 'password'
    94. 

  94.           btn.textContent = '显示'
    95. 

  95.         }
    96. 

  96.       }
    97. 

  97.     </script>
    98. 

  98.   </body>
    99. 

  99. </html>
    100.

这样一个虽然丑但是有趣实用的注册就完成啦~

上一篇： OpenBSD4.0 PostgreSQL8.1.5数据库的安装

下一篇： 调试Javascript代码(浏览器F12及VS中debugger关键字)_javascript技巧

推荐阅读