如何通过HTML的input的required属性将表单字段标记为必填项-html教程-PHP中文网

required属性仅对具备可编辑性与明确空值语义的表单控件生效：包括text、email、number、tel、url、checkbox（需勾选）、radio（同name组至少一选）、select（需含value=""且未设selected的空选项）、textarea和file；而hidden、button、submit等无效，且必须在内通过原生提交触发校验。

如何通过html的input的required属性将表单字段标记为必填项

required 属性确实能让浏览器在提交时校验字段是否为空，但它只对特定类型生效、依赖用户交互方式，且无法覆盖所有业务场景。

哪些 `input` 类型支持 `required`？

只有具备「可编辑内容」和「明确空值语义」的类型才真正受控：

type="text"、type="email"、type="number"、type="tel"、type="url" 等文本类输入有效
type="checkbox" 和 type="radio" 也支持，但行为不同：checkbox 必须勾选；radio 组中至少一个需被选中（required 加在任意一个同 name 的 radio 上即可）
type="hidden"、type="button"、type="submit" 等不接受用户输入的类型，加了 required 也无校验效果
select 和 textarea 同样支持 required，但注意 select 的空选项必须是 value="" 且未设 selected，否则可能绕过校验

为什么点了提交没弹提示？常见失效原因

不是加了 required 就一定触发原生提示，以下情况会静默跳过：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

表单没有 method 或 action，或用了 event.preventDefault() 却没手动调用 checkValidity()
用户用 JavaScript 清空了值但没触发 input 或 change 事件，浏览器可能未更新内部校验状态
input 被设为 disabled 或 readonly —— required 对这两者均无效
某些移动端浏览器（如旧版 iOS Safari）对 type="date" 或 type="number" 的空值判定不一致，比如输入框显示为空但实际值是 "0" 或 "1970-01-01"

如何配合 JS 做更可靠的必填控制？

原生 required 是第一道防线，但不能替代逻辑层判断：

提交前用 form.checkValidity() 主动检查，返回 false 时可阻止提交并聚焦首个无效字段：

form.addEventListener('submit', e => {
  if (!form.checkValidity()) {
    e.preventDefault();
    form.querySelector(':invalid').focus();
  }
});

对动态渲染的字段，确保 required 属性是在 DOM 插入后同步设置的，而不是仅靠 JS 控制 class 或 placeholder
如果字段需“条件必填”（例如：选了“其他”才要求填备注），不能只靠 HTML 属性，必须用 JS 切换 required 属性：el.required = shouldRequire;
服务端永远要二次校验 —— required 完全可被禁用或绕过，仅前端控制毫无安全性可言