带下拉选择的搜索框功能代码-建站知识-FortuKey Holdings Invest ment Li mited 软件开发网站模板城市建站 Fortukey 模板网站源码 Fortukey 模板模板大全-Fortukey

带下拉选择的搜索框功能代码

作者：Fortukey 来源：本站

摘要：在建站课程里我们介绍了怎么制作网站搜索功能，这一节介绍一下功能更全的搜索功能，就是在搜索框前面放下拉选择功能，这样可以实现更精准的搜索。效果图：方法如下：首先，我们需要先制作前面的下拉选择功能，要使用select标签，里面的option的value里放分类的ID；<select name="cat" class="cid"&g

在建站课程里我们介绍了怎么制作网站搜索功能，这一节介绍一下功能更全的搜索功能，就是在搜索框前面放下拉选择功能，这样可以实现更精准的搜索。
效果图：

方法如下：
首先，我们需要先制作前面的下拉选择功能，要使用select标签，里面的option的value里放分类的ID；

<select name="cat" class="cid">
<option value="1">找图片</option>
<option value="2">查热点</option>
<option value="3">查资讯</option>
</select>

复制

然后，再制作后面的搜索框和按钮，这个使用input标签；

<input type="text" name="s" class="text lt" placeholder="请输入你要搜索的关键字" value="">
<input type="submit" class="btn rt" value="搜索">

复制

最后将上面二段代码使用form标签进行包裹，就形成带有下拉选择的搜索框功能了。

<form method="get" action="<?php bloginfo('url'); ?>/" id="top-search">
<select name="cat" class="cid">
<option value="<?php echo $catid01;?>">找工长</option>
<option value="<?php echo $catid02;?>">查工地</option>
<option value="<?php echo $catid04[0];?>">查资讯</option>
</select>
<input type="text" name="s" class="text lt" placeholder="请输入你要搜索的关键字" value="">
<input type="submit" class="btn rt" value="搜索">
</form>

声明：本文由【Fortukey】编辑上传发布，转载此文章须经作者同意，并请附上出处【Fortukey】及本页链接。如内容、图片有任何版权问题，请联系我们进行处理。

上一篇：宝塔面板反向代理

下一篇：网站代码CSS中的.clearfix是什么意思