维修预约表单需设action（如/api/submit-maintenance）和method="post"；textarea须加name、wrap="soft"、maxlength并配js字数提示；datetime-local兼容差，旧版safari需降级为date+time；错误应按字段实时反馈而非堆在顶部。
怎么用 <form></form> 搭出能提交的维修预约表单
表单必须有 action 和 method，否则点提交就刷新页面或 404。常见错误是只写结构不配后端接收地址，结果用户填完没反应。
-
action填真实接口地址（比如/api/submit-maintenance），本地测试可用https://httpbin.org/post查看提交数据 -
method选POST—— 故障描述、联系方式这些敏感内容不能走 URL（GET）泄露 - 每个
<input>或<textarea></textarea>必须带name属性，后端靠它识别字段，比如name="fault_description"
textarea 写故障描述时为啥换行消失、字数超限没提示
浏览器默认把多行文本里的换行转成空格，后端收到的就是一整段。同时，maxlength 对 textarea 有效，但得手动加提示逻辑，原生不弹窗。
- 加
wrap="soft"保证换行符被提交（wrap="hard"会强制在超宽处折行，一般不用） - 用
maxlength="500"限制长度，再配合<span id="char-count">0/500</span>+ JS 实时计数，比依赖用户自觉靠谱 - 别用
placeholder当说明文字，它会在聚焦后消失；故障描述这种关键项，用<label></label>配for更稳
时间选择用 input type="datetime-local" 的兼容性和替代方案
datetime-local 在 Safari 旧版、部分安卓 WebView 里直接不显示控件，变成普通文本框，用户可能输错格式（比如写 “明天下午”）。
- Chrome / Edge 支持好，但 iOS Safari 直到 iOS 16.4 才支持
datetime-local，更早版本只能降级为两个字段：type="date"+type="time" - 如果必须单控件且要兼容老系统，用
type="text"+ 第三方库（如 flatpickr），但得额外引入 JS/CSS - 后端接收时注意：
datetime-local提交的是 ISO 格式（2024-05-20T14:30），别当成字符串切分，用new Date()或服务端解析器处理
提交失败时用户根本不知道哪错了，怎么让报错“看得见”
表单验证失败只靠 required 或 pattern 不够，浏览器默认提示位置不固定、样式难改，且后端校验失败（比如手机号格式对但已注册）完全没反馈。
- 前端用
checkValidity()+reportValidity()主动触发原生提示，但仅限基础校验 - 后端返回错误时，把字段名和消息塞进 JSON（如
{"field": "phone", "message": "手机号已被预约"}），JS 拿到后往对应<input name="phone">后插<small class="error">手机号已被预约</small> - 别把所有错误堆在顶部，用户要翻找；每个输入框附近实时反馈，体验才顺
时间控件兼容性、错误反馈位置、换行字符保留——这三个地方改一次就能少接一半用户投诉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
