纯HTML+CSS可实现图文问诊静态表单页，核心是语义化form结构（症状textarea、file上传、手机号输入）+label透传点击+viewport适配+FormData收集，仅负责内容采集与提交，不处理后端逻辑。
怎么用纯 HTML + CSS 实现基础图文问诊页面
纯 HTML 无法完成真实问诊交互（比如发图、存记录、对接医生端），但能快速搭出患者端「图文填写+提交」的静态表单页，适合内部速查、原型演示或嵌入已有系统。关键不是“做完整系统”，而是“让患者能看清要填什么、图片怎么传、提交后去哪”。
核心结构就是 <form> 包住症状描述、图片上传、联系方式三块，用语义化标签提升可访问性：
<form id="consult-form">
<label for="symptoms">主要症状</label>
<textarea id="symptoms" name="symptoms" required></textarea>
<label for="upload">上传检查报告或照片（支持 JPG/PNG）</label>
<input type="file" id="upload" name="images" accept="image/*" multiple>
<label for="phone">手机号（用于接收回复）</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required>
<button type="submit">提交问诊</button>
</form>
注意：accept="image/*" 能触发手机相册/拍照选择，但不校验真实文件类型；pattern 是前端简易校验，不能替代后端验证。
图片上传按钮没反应？常见 DOM 和事件陷阱
很多开发者加了 <input type="file"> 却点不动，大概率是样式覆盖或事件绑定错误。原生 file input 默认隐藏且难定制，别直接给它设 display: none 后又忘了透传点击。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 用
<label>包裹<input type="file">，点击 label 就等于点 input —— 最稳的透传方式 - 如果必须隐藏原生控件，用
opacity: 0; position: absolute;覆盖在自定义按钮上，再通过label[for="xxx"]关联 - JS 监听时用
input事件（不是change），因为用户重复选同一张图时change不触发 -
event.target.files是FileList，不是数组，要用Array.from()或展开运算符转成数组才能.map()
提交后页面刷新或空白？form action 和 JS 拦截要点
默认提交会跳转或刷新，问诊页需要静默提交并提示成功。要么配后端接口，要么先模拟行为：
- 表单必须有
action属性（哪怕暂时写action="#"），否则部分老浏览器可能异常 - 用
event.preventDefault()阻止默认提交，再手动收集数据：new FormData(document.getElementById("consult-form")) -
FormData自动包含<input type="file">的文件，但不会序列化为 JSON，上传需用fetch(..., { method: 'POST', body: formData }) - 若只是本地测试，可用
console.log(Object.fromEntries(formData))看字段是否取全 —— 注意 file 字段这里显示为[object File]，不代表上传失败
移动端拍照糊、横屏错位？几个硬性适配点
图文问诊页 80% 流量来自手机，但很多人忽略 viewport 和图片预览逻辑：
- 必须加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 可能强制缩放表单 - 用
<input accept="image/*;capture=camera">可直启摄像头（仅部分安卓支持），iOS 仍走相册优先 - 图片预览不要用
URL.createObjectURL()后塞进<img src>就完事：大图会撑破容器，建议加max-width: 100%; height: auto;到 img 样式 - 避免在 CSS 中对
textarea设死高度，用min-height+resize: vertical更友好
真正卡住的往往不是代码写法，而是没想清楚这个页面的边界——它只负责“把患者填的内容打包发出去”，后续的图片压缩、OCR 识别、医生分诊、消息通知，都不该在这层 HTML 里碰。
