学做网站培训课程介绍

当前位置:

如何制作带下拉选择的搜索框功能

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

带下拉选择的搜索框

怎么制作这种带下拉选择的搜索框功能呢?方法如下:

首先,我们需要先制作前面的下拉选择功能,要使用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>

以上就是制作带下拉选择的搜索框功能的全部步骤,希望对于想制作这个功能的同学有帮助。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关教程

  • 网站制作流程是什么 视频教程 (1270965 次浏览)
    相信很多朋友第一次接触到网络,接触到建站,会被域名、空间、解析、建站程序等各种问题困扰,甚至都不清楚网站制作流程,也不知该如何下手开始做自己
  • 以下是我们学做网站论坛建站培训课程的所有内容:【只需支付680元的培训费用,就可以学习以下所有课程。】零基础网站制作培训报名地址:https://w
  • 自己建网站时,如果网站的栏目比较多,可以制作带下拉子菜单的导航菜单来存放。今天学做网站论坛就来介绍一下如何制作网站带下拉子菜单的导航菜单的方
  • INPUT是制作网站中的填写框的HTML元素,例如制作提交表单中的填写框,都是使用INPUT标签。常用实例代码:[cce_html]<input value="www.xuewa
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • (特别全)网站收录提交链接及各大搜索引擎站长工具百度网站收录提交http://www.baidu.com/search/url_submit.html百度自动提交百
  • 以图搜图,顾名思义就是上传一张图片,网站搜索并显示与之类似的图片。对于我们草根站长来说,特别实用,怎么利用好它,就需要发挥你的想象力。1、T
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点
  • 多站点 (Multisite) 功能是 WordPress 3.0  后版本的一个重要更新,整合了 WordPress MU 内核。后台自动升级内核后,无法直接使用该功能。需要通过手