纯html+css可实现图文问诊静态表单页，核心是语义化form结构（症状textarea、file上传、手机号输入）+label透传点击+viewport适配+formdata收集，仅负责内容采集与提交，不处理后端逻辑。
怎么用纯 HTML + CSS 实现基础图文问诊页面
纯 HTML 无法完成真实问诊交互（比如发图、存记录、对接医生端），但能快速搭出患者端「图文填写+提交」的静态表单页，适合内部速查、原型演示或嵌入已有系统。关键不是“做完整系统”，而是“让患者能看清要填什么、图片怎么传、提交后去哪”。
核心结构就是 <form></form> 包住症状描述、图片上传、联系方式三块，用语义化标签提升可访问性：
注意：accept="image/*" 能触发手机相册/拍照选择，但不校验真实文件类型；pattern 是前端简易校验，不能替代后端验证。
图片上传按钮没反应？常见 DOM 和事件陷阱
很多开发者加了 <input type="file"> 却点不动，大概率是样式覆盖或事件绑定错误。原生 file input 默认隐藏且难定制，别直接给它设 display: none 后又忘了透传点击。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用
<label></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 里碰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
