HTML5表单可通过原生属性实现输入验证：使用form标签（可选novalidate）、input的type/required/pattern等属性、select/textarea的required/maxlength、fieldset/legend分组，以及:valid/:invalid等CSS伪类反馈状态。
如果您希望在HTML5中创建一个具备输入验证功能的表单，可直接利用原生表单控件的语义化属性与内置验证机制，无需依赖JavaScript即可实现基础校验。以下是具体编写步骤：
一、使用form标签构建表单容器并设置验证行为
form元素是表单的根容器，通过添加novalidate属性可禁用浏览器默认验证（用于自定义验证场景），而省略该属性则启用默认验证提示。action和method属性定义提交目标与方式，便于后续服务端接收数据。
1、在HTML文档主体中插入<form>标签，并指定method="post"确保敏感数据不暴露于URL中。
2、为form添加id属性（如id="userForm"），便于CSS样式控制或后续脚本选取。
立即学习“前端免费学习笔记（深入）”；
3、在form内部嵌套label与input/select等控件，确保每个label的for属性值与对应控件的id一致，提升可访问性。
二、为input控件添加type和验证属性
HTML5为input提供了多种type值（如email、url、number、date等），浏览器会自动识别并触发对应格式校验；required、minlength、maxlength、pattern等属性可进一步约束用户输入内容。
1、将用户名输入框的type设为text，并添加required属性，使该字段成为必填项。
2、将邮箱输入框的type设为email，浏览器将自动检查是否符合邮箱基本格式。
3、为密码字段添加minlength="8"和pattern="(?=.*[A-Z])(?=.*[a-z])(?=.*\d)"，强制要求至少8位且包含大小写字母与数字。
4、为年龄输入框设置type="number"、min="1"、max="120"，限制数值范围。
三、使用select和textarea增强表单结构
select用于提供预设选项列表，配合required可防止用户跳过选择；textarea适合多行文本输入，可通过rows和cols设定初始尺寸，并同样支持required与maxlength约束。
1、编写<select>标签，为其添加name和id属性，并在内部嵌套多个<option value="值">显示文字</option>。
2、为select添加required属性，确保用户必须从下拉列表中选择一项而非保留默认空值。
3、插入<textarea name="feedback" id="feedback" rows="4" maxlength="500" required></textarea>，限定最大字符数并标记为必填。
四、利用fieldset与legend组织表单逻辑分组
fieldset可将相关控件进行视觉与语义分组，legend作为该组标题，有助于提升表单可读性与屏幕阅读器兼容性，同时不影响验证逻辑执行。
1、在form内包裹一组地址信息控件（如省、市、详细地址）于<fieldset>标签中。
2、在fieldset内部顶部添加<legend>联系地址</legend>作为分组说明。
3、确保fieldset内的input仍保有required或其他验证属性，验证行为不受分组影响。
五、通过CSS伪类反馈验证状态
HTML5表单支持:valid、:invalid、:required、:optional等CSS伪类，可用于动态改变控件边框颜色、背景或显示图标，直观呈现验证结果。
1、为所有input[type="text"]:invalid添加border: 2px solid red样式，突出错误状态。
2、为input:valid设置border: 2px solid green，表示当前输入已通过校验。
3、在label后添加::after伪元素，当input:required且为空时显示*标识。
