在线演示：https://fancy-cascaron-2e1a89.netlify.app/
1. <datalist>
使用 <datalist> 为普通文本输入框提供自动完成建议。
为何重要：
- 通过
list属性与标准<input>字段配合使用。 - 支持选择建议项或输入自定义值。
- 非常适用于地点选择器、标签或搜索提示。
示例：
<label for="city">选择城市：</label>
<input id="city" list="cities" />
<datalist id="cities">
<option value="Bhubaneswar" />
<option value="Brahmapur" />
<option value="Cuttack" />
<option value="Puri" />
<option value="Sambalpur" />
</datalist>
演示：tags/datalist.html
2. <dialog>
<dialog> 是用于弹出窗口的原生模态对话框容器。
为何重要：
- 使用
show()、showModal()和close()来控制可见性。 - 浏览器会自动处理模态框内的焦点管理。
- 支持原生背景遮罩以淡化页面背景。
示例：
<button commandfor="myDialog" command="show-modal">打开模态框</button>
<dialog id="myDialog">
<h2>联系表单</h2>
<form>
<label>姓名</label><br>
<input type="text" required><br><br>
<label>电子邮件</label><br>
<input type="email" required><br><br>
<button type="submit">提交</button>
</form>
<br>
<button commandfor="myDialog" com
免责声明：本文内容来自互联网，该文观点不代表本站观点。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，请到页面底部单击反馈，一经查实，本站将立刻删除。
