学做网站培训课程介绍

当前位置:

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

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

带下拉选择的搜索框

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

首先,我们需要先制作前面的下拉选择功能,要使用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
  • 在建站课程里我们介绍了怎么制作网站搜索功能,这一节介绍一下功能更全的搜索功能,就是在搜索框前面放下拉选择功能,这样可以实现更精准的搜索。效果
  • 对于有条件的学员,在做网站的时候,可以选择服务器来存储自己网站的内容,这样打开速度快,反应敏捷。对于网站服务器来说,一般空间商会按照其性
  • 欢迎大家学习学做网站论坛的CSS视频教程,这节课程我们讲一下CSS选择器类型和样式。什么是CSS选择器每一条css样式定义由两部分组成,形式如下:
  • 自己做网站过程中,网页的搜索功能不可或缺,对于WP网站来说,做一个搜索功能不是难事,我们的课程也讲到了wordpress搜索功能(search.php)模板制作
  • 如果自己做的网站内容众多,当用户想寻找一个自己需要的内容时,一个一个查找是一件很累的事情,如果在自己的网站上做一个搜索框,提供网站搜索功能,
  • wordpress评论功能可以让用户在我们自己的网站上进行对文章的评论,发表自己的观点,很好的增强了网站与用户之间的交互性。还有的网站还添加了邮件功
  • 纯代码Wordpress前台投稿功能制作方法,很多建网站学员学习了Wordpress教程后,使用Wordpress 程序建了网站。但如果每天都是自己更新文章,感觉会有点