html搜索框怎么做？

  • 原创
  • |
  • 浏览：9471
  • |
  • 更新：
  • html搜索框怎么做？1
  • html搜索框怎么做？2
  • html搜索框怎么做？3
  • html搜索框怎么做？4
  • html搜索框怎么做？5
  • html搜索框怎么做？6
分步阅读

我们在网上导航经常看到搜索框，有些程序员不知道怎么做，本经验将带你们怎么做。

工具/原料

  • 浏览器
  • 编辑器（没有可用系统自带的记事本，编辑器哪个都行）

方法/步骤

  1. 1

    由于作者把原来的编辑器卸载了，我就用记事本来给大家演示。该经验通过Windows 10系统来演示。

  2. 2

    首先，新建一个文本文档，名字叫搜索框，后缀名先暂时不改。

    html搜索框怎么做？
  3. 3

    双击打开，在里面输入以下代码（见图片）：

    html搜索框怎么做？
  4. 3
    相关内容未经许可获取自百度经验
  5. 4

    接着，在这里面可以自由编辑。如果你想把网页变得漂亮些，您需要用到css。

    css在<style type="text/css"></style>里面写。

  6. 5

    咱们先做标题，代码见图片：

    html搜索框怎么做？
  7. 6

    我们再做搜索框，代码如图：

    html搜索框怎么做？
  8. 7

    但是，我们想让它按下回车或按钮，都能搜索到内容，怎么办呢？这时候，我们需要往input加一些代码，再填上form和script标签。

    html搜索框怎么做？
  9. 8

    图中是所有代码，可以照着试一下：

    html搜索框怎么做？
  10. 9

    最后效果大家把后缀名改为*.html，就可以看见了。

    好了，今天就学到这，祝您学习愉快！

    ----------------------------------------------------------------------

    本文部分内容来自于两条经验，页面网址如下：

    16如何利用html写一个简单的搜索页面

    3搜索按回车键搜索关键字

    END

注意事项

  • 如果觉得用style标签麻烦，可以把里面的代码放到一个文本文档里，修改后缀名为*.css，再往head标签里写上
  • script标签里中的keyCode == "13"是指向回车，不要修改成Enter。
  • 里面脚本有误，可以用浏览器测试一下
  • 最好把改成，也把script标签里的$('input[name="seratch"]')改为$('input[name="wd"]')。
经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
作者声明：本篇经验系本人依照真实经历原创，未经许可，谢绝转载。
展开阅读全部