不使用form标签时HTML的required属性能否正常生效？

• 首先明确：没有form标签包裹时，你完全可以正常给input添加required属性，这是input的原生标准属性，不存在语法错误，DOM API也能正常识别读取这个属性。
• required不是必须嵌套在form内部才能生效，它的生效逻辑分两种情况：

  原生自动校验是和表单提交行为绑定的，和input的物理位置没有绝对关系：

  1. input嵌套在form内部时，点击form内的提交按钮会自动触发required校验，输入为空时会直接阻止提交、弹出浏览器默认的必填提示
  2. input在form标签外部时，只要给input加form属性绑定对应form的id（比如<input form="myForm" required>绑定id为myForm的表单），提交对应表单时一样会自动触发这个input的必填校验

• 如果input既不嵌套在form里，也不通过form属性关联任何表单，确实不会在原生表单提交流程里自动触发校验，但你不需要自己重新写判空逻辑，直接调用原生DOM的校验API就能复用required的规则，比如调用reportValidity()方法就能弹出和表单提交时完全一致的必填提示。

你给出的无form包裹的示例代码如下：

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" required> 

如果要让这段代码里的required生效，只需要加个普通按钮，绑定事件调用校验方法即可，示例：

<button id="verifyBtn">提交</button>
<script>
document.getElementById('verifyBtn').addEventListener('click', () => {
  const nameInput = document.getElementById('fname')
  // 触发原生必填校验，为空时自动弹出提示
  if (!nameInput.reportValidity()) return
  // 校验通过后的后续逻辑
  console.log('校验通过，输入值为', nameInput.value)
})
</script>

内容的提问来源于stack exchange，提问作者Shreeja Kotian