学做网站培训课程介绍

当前位置:

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

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

带下拉选择的搜索框

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

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

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

发表评论

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

相关教程

  • 零基础新手要学习网站建设,以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了,才能为以后建网站打下坚实的基础。
  • 这是一家上海电气公司网站,网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO,网站导航制作使用全屏宽度菜单,每个菜单项宽
  • 自己建网站时,如果网站的栏目比较多,可以制作带下拉子菜单的导航菜单来存放。今天学做网站论坛就来介绍一下如何制作网站带下拉子菜单的导航菜单的方
  • INPUT是制作网站中的填写框的HTML元素,例如制作提交表单中的填写框,都是使用INPUT标签。常用实例代码:[cce_html]<input value="www.xuewa
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 对于学建网站,首先必须有自己的网站域名,如何选择适合自己的网站域名呢?【相关教程:如何购买域名和空间】选择域名三要素: 域名要简单、
  • (特别全)网站收录提交链接及各大搜索引擎站长工具百度网站收录提交http://www.baidu.com/search/url_submit.html百度自动提交百
  • 以图搜图,顾名思义就是上传一张图片,网站搜索并显示与之类似的图片。对于我们草根站长来说,特别实用,怎么利用好它,就需要发挥你的想象力。1、T
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点