HTML5原生表单验证无需JavaScript：一、用<form>包裹控件，禁用novalidate，设submit按钮；二、input用email/number/date等type加required；三、select需空value首项+required；四、pattern+title实现正则校验；五、datalist提供输入建议。
如果您希望在网页中创建具备基本输入验证功能的表单，HTML5 提供了原生的表单控件与验证属性，无需依赖 JavaScript 即可实现客户端校验。以下是使用 <form> 搭配 <input>、<select> 等元素构建验证表单的具体操作步骤：
一、设置 form 元素并启用原生验证
HTML5 表单的验证行为由 <form> 标签及其子控件共同触发，需确保表单具有 novalidate 属性未被意外添加（否则会禁用默认验证），且提交按钮为 type="submit" 以激活浏览器内置校验流程。
1、使用 <form> 标签包裹所有输入控件，并可选添加 id 或 name 属性用于脚本引用。
2、确认表单内无 novalidate 属性；若存在，请将其删除。
立即学习“前端免费学习笔记（深入）”；
3、添加一个 <button type="submit"> 或 <input type="submit"> 作为提交入口。
二、为 input 添加类型与必填约束
HTML5 的 <input> 支持多种语义化 type 值（如 email、url、number、date），浏览器会据此自动执行格式校验；配合 required 属性可强制非空验证。
1、将文本类输入字段的 type 设为对应语义类型，例如：<input type="email" required>。
2、对数字输入使用 type="number" 并可添加 min、max、step 限制取值范围。
3、对日期输入使用 type="date"，浏览器将弹出原生日期选择器并阻止非法格式提交。
三、配置 select 下拉菜单的必选项验证
<select> 元素本身不支持 required 属性直接生效，需配合一个无值的首项 <option>（其 value=""）并设为 selected，再对整个 <select> 添加 required，才能触发必选校验。
1、在 <select required> 内部，第一个 <option> 设置 value="" 且添加 selected 属性。
2、后续每个 <option> 必须有非空 value 值，例如：<option value="beijing">北京</option>。
3、用户未选择任何有效项时，提交将失败并显示提示：请选择一个选项。
四、使用 pattern 属性实现自定义正则校验
当内置类型无法满足特定格式要求（如手机号、身份证号、密码强度）时，可通过 pattern 属性传入正则表达式，配合 title 属性提供错误提示文案。
1、在 <input> 上添加 pattern 属性，例如：pattern="[0-9]{11}" 限定 11 位数字。
2、同时添加 title 属性，内容为用户可见的提示文字，例如：title="请输入11位手机号"。
3、注意：pattern 仅对 type="text"、"tel"、"search"、"url"、"email"、"password" 生效。
五、利用 datalist 实现带提示的输入建议
<datalist> 不参与验证逻辑，但可与 <input list="xxx"> 配合，在用户输入时下拉展示预设选项，提升数据一致性与输入效率，间接减少格式错误。
1、定义 <datalist id="cities">，内部包含多个 <option value="xxx">。
2、在目标 <input> 中添加 list="cities" 属性，使其关联该列表。
3、用户输入时将自动匹配 <option> 值并显示下拉建议，但允许自由输入未列内容，不强制限制输入值必须来自列表。
