datalist 与 output
<datalist> 给输入框提供"建议列表"：input 通过 list 属性指向 datalist 的 id，用户输入时出现候选下拉。它与 select 的关键区别——select 只能选，datalist 既能自由输入又能从建议里挑，适合"城市名""常用邮箱后缀"这类开放输入场景。选项仍用 option 描述。
<output> 表示"计算或用户操作的结果"，配合 for 属性声明结果来自哪些控件。经典组合是滑块 + output 实时显示数值：input 事件里把 range 的值写进 output。它语义上优于 span——读屏器和爬虫知道这是"输入的结果"。
两者都是"增强型"标签：不支持的浏览器里 datalist 就是普通输入框、output 就是普通文本，零风险。
本节要点datalist = 可输入 + 候选建议（区别于 select 只能选）；output 表计算结果，for 指向来源控件；两者都有天然的降级行为，可放心用。
HTML
<form oninput="total.value = Number(price.value) * Number(qty.value)"> <!-- datalist：自由输入 + 候选建议 --> <input type="text" name="city" list="cities" placeholder="输入城市"> <datalist id="cities"> <option value="北京"> <option value="上海"> <option value="广州"> <option value="杭州"> </datalist> <!-- output：滑块联动，实时显示计算结果 --> <input type="range" id="price" min="1" max="100" value="10"> <input type="number" id="qty" value="2"> 总价：<output name="total" for="price qty">20</output> </form>
📚 推荐阅读
来自万象云档的免费在线书籍，点击封面直接阅读