HTML5 表单必填验证：让登录门户真正强制用户输入

仅添加 required 属性不足以触发浏览器原生验证，必须将输入控件包裹在 标签内，并使用 （而非纯链接按钮）才能激活 html5 表单约束验证机制。

仅添加 required 属性不足以触发浏览器原生验证，必须将输入控件包裹在

✅ 修正后的核心 HTML 片段（精简可运行版）

<form method="POST" action="#">   <h1 style="text-align:center;">Logon Utility</h1>    <div class="container">     <label for="uname"><b>Username</b></label>     <input type="text" id="uname" placeholder="Enter Username" name="uname" required>      <label for="psw"><b>Password</b></label>     <input type="password" id="psw" placeholder="Enter Password" name="psw" required>      <label>       <input type="checkbox" name="remember" checked> Remember me     </label>   </div>    <div class="container">     <!-- ✅ 关键修改：移除 <a>，改用原生 submit 按钮 -->     <button type="submit" class="btn btn-primary btn-lg">Logon</button>   </div> </form>

? 注意： 的 id 属性应与 值严格匹配（如 id=”uname” ↔ for=”uname”），以提升可访问性与点击体验。

⚠️ 常见误区与注意事项

• ❌ 错误：把 放在 内部 → 它变成普通链接，绕过表单验证。
• ❌ 错误：遗漏
  
  标签 → required 仅具语义，无行为约束力。
• ✅ 提示优化（纯 HTML）：可为输入框添加 title=”Username is required”，部分浏览器会在验证失败时增强提示。
• ? 安全提醒：HTML5 前端验证仅为用户体验优化，绝不可替代服务端校验。恶意用户可轻易禁用 JS 或绕过 HTML 约束，所有关键验证（如密码强度、账号存在性）必须在服务器完成。

✅ 验证效果说明

当用户点击「Logon」按钮时：

立即学习“前端免费学习笔记（深入）”；

• 若任一 required 字段为空 → 浏览器立即聚焦该字段，高亮边框，并弹出原生提示（内容因浏览器而异，如 chrome 显示“请填写此字段”）；
• 仅当所有必填项均有值 → 表单正常提交至 action 指定地址（此处为 #，可后续替换为真实登录接口）。

通过以上调整，你即可在零 JavaScript 的前提下，构建符合 HTML5 标准、具备基础交互保障的登录门户——简洁、可靠、无障碍友好。