html登录注册代码

这行代码看起来简单，登录代码但它决定了用户输入的注册数据是明文飞出去还是被封装起来。很多人写登录注册页面，登录代码第一反应是注册去网上找模板，复制粘贴一通，登录代码结果提交后页面刷新，注册数据丢了，登录代码或者密码框里显示的注册还是明文。问题往往出在几个不起眼的登录代码地方。 先看一个能跑起来的注册最小结构。HTML 负责搭骨架，登录代码CSS 管外观，注册JavaScript 处理交互和校验。登录代码三者混在一起写也行，注册但分开更清楚。登录代码下面这段代码，直接扔进一个 .html 文件就能用： ```html

登录 注册

登录

注册

``` 几个容易踩的坑。`type="password"` 只是视觉遮挡，数据在传输时仍是明文，必须配合 HTTPS 和 `action` 指向的后端接口做哈希处理。`required` 属性由浏览器原生校验，但用户可以禁用 JavaScript 绕过，所以服务端校验不能省。 表单里的 `name` 属性别乱写。用 `new FormData(form)` 取值时，靠的就是 `name`。如果两个表单共用一个 `name="username"`，切换时不会冲突，因为它们是独立的 DOM 元素。但提交到后端时，字段名最好区分开，比如登录用 `login_username`，注册用 `reg_username`，省得后端解析时混淆。 注册表单里我加了 `minlength="6"`，浏览器会拦一道。但别依赖它，用户按 F12 把属性删掉照样能提交。真正靠谱的校验永远在服务端。前端校验只是提升体验，减少无效请求。 切换标签页的逻辑很直白：两个按钮，两个表单，用 `classList` 切 `hidden`。有人喜欢用 `display: none` 内联样式，也行，但类名控制更干净。注意 `button` 默认 `type="submit"`，如果标签按钮放在 `form` 内部，点一下就会触发表单提交。所以我把标签按钮放在表单外面，或者显式写 `type="button"`。 最后，`console.log` 和 `alert` 只是占位。真实项目里，登录表单的 `fetch` 大概长这样： ```js fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ username, password }) }) .then(res => res.json()) .then(data => { if (data.success) location.href = '/dashboard'; else loginMsg.textContent = data.message; }); ``` 注册接口同理，只是字段多几个。密码在前端不做任何“加密”——自己写的 MD5 或 Base64 都是自欺欺人，交给 HTTPS 和 bcrypt 这类服务端方案。