【瑞模网】HTML中实现select下拉框和input输入框组合

最新推荐文章于 2025-10-24 11:41:01 发布

原创最新推荐文章于 2025-10-24 11:41:01 发布 · 1.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #dreamweaver

前端专栏收录该内容

19 篇文章

订阅专栏

本文介绍了如何在HTML中结合使用select下拉框和input输入框，以提供更灵活的数据选择和输入方式。

一、下拉框 + 输入框

select下拉框结合 input框
支持下拉框选择，支持包含内容检索，支持手动输入

<html>  
    <head>  
        <title>可编辑下拉框</title>  
        <meta charset="UTF-8" />  
    </head>  
    <body>  
        <div class="appNameSelect">
            <a>联系方式:</a>
            <input id="appName" type="text" list="appNamelist" style="padding:0.5em;border-radius:10px;">
            <datalist id="appNamelist">
                <option>WeChat(微信)</option>
<option>QQ</option>
<option>Google Talk</option>
<option>Twitter</option>
                <option>Facekbook</option>
            </datalist>
        </div>
    </body>  
</html>