HTML LIST 输入框自动查询追加框,自动过滤 HTML5

最新推荐文章于 2022-03-27 17:15:17 发布

weixin_33971130

最新推荐文章于 2022-03-27 17:15:17 发布

阅读量274

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webenh/p/8376410.html

本文介绍了一个 HTML5 中 datalist 元素的应用实例，通过预设的选项列表为输入框提供提示，增强了用户体验。示例展示了如何使用 datalist 和 input 类型 url 结合，以实现网址输入时的智能提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 
 5 <form action="/example/html5/demo_form.asp">
 6 网页：<input type="url" list="url_list" name="link" />
 7 <datalist id="url_list">
 8 <option label="W3School" value="http://www.w3school.com.cn" />
 9 <option label="Google" value="http://www.google.com" />
10 <option label="Microsoft" value="http://www.microsoft.com" />
11 </datalist>
12 <input type="submit" />
13 </form>
14 
15 </body>
16 </html>