html中的搜索

最新推荐文章于 2024-09-25 13:07:55 发布

练习时长两年半的Programmer

最新推荐文章于 2024-09-25 13:07:55 发布

阅读量8.9k

点赞数 19

文章标签： html5 html

本文链接：https://blog.csdn.net/m0_64036070/article/details/123894917

版权

hello😄

这次来发一下HTML中的搜索怎么做，其实还是很简单的

~~旁白：你每次都说简单，我一次都没做出来~~

这次是真的简单

form表单🍉

首先来说一下form表单，受英语单词“from”的影响，这个单词很容易打错，要记住是“form”哦

表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。

form的语法🍊

<form action="url" method="get | post" name="formName" onsubmit="" target="">
</form>

from的属性🍊

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWVJfVA==,size_20,color_FFFFFF,t_70,g_se,x_16

创建表单，设置表单名称为 myForm，传送方式为 post，当用户提交表单时，提交至 action.html 页面进行处理

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
</form>

提交？重置？🍊

form中的提交和重置：

表单按钮（html）🔍

<form id="form1" name="myForm" method="post" action="action.html" target="_blank">
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

JavaScript提交表单🔍

//提交表单
myForm.method = 'POST';
myForm.action = "action.html";
myForm.submit();

JavaScript重置表单🔍

//重置表单
document.getElementsByName("myForm")[0].reset();

其实我经常用的还是html的

target是什么🍊

简单说，比如说你要打开一个网址，它是控制你是在这个页面之上打开还是另外打开

也就是覆盖还是再打开一个

target的用法🔍

所有的功能都在上面那张图里，用法就是

target="上面图里的方法"

name的用法🍊

比如我要让它的name(名字)为a就是

name="a"

methou的用法🍊

form表单的method属性是用来指定提交方式的
提交方式有7种，常用的有POST，GET，HEAD
默认的提交方式是GET
，通过GET方式提交的数据会显示在地址栏里，通过GET方式只能提交不超过4K的数据。
POST不是默认的方式，必须指定，通过这种方式提交在地址栏是不显示提交数据的，提交的大小是不受限制的，如果要上传文件必须用POST方式

我们的HttpServlet他提高7个对应提交方式的do方法，用不同的方式提交就会自动去执行不同的方法，如果没有对应的的方法就会出405错误。

onsubmit的用法句子🍊

<form>标签有个非常有用的属性叫onsubmit，我们可以通过它进行控制表单内容能否提交，onsubmit的属性值为布尔型，即为true时可以正常提交，为false时不能提交。

搜索？🍉

接下来就要开始搜索了，因为我们有了form表单，所以可以制作搜索的功能

上面说过的几个都要用的，所以务必整明白

举个栗子，百度搜索🍊

比如百度的搜索域名是https://www.baidu.com/s

所以我们需要用到这个网址

<form action="https://baidu.com/s" method="get">
    <div>
        <h3>百度搜索</h3>
         <input name="sousuo" id="search" value="">
    </div>
</form>

哦对了，我觉得看到这篇博客的应该都有点基础，所以就不写<h3></h3>和<div></div>是啥意思了

这个就可以实现百度搜索，运行之后有一个搜索框，输入后跳转百度

撸个程序🍉

我每次都会带点程序，这次也有

效果🍊

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWVJfVA==,size_20,color_FFFFFF,t_70,g_se,x_16

在百度搜索的框里输入会搜索百度，另外两个也同理

其中我的博客搜索你们可以自己改，改成你们的

如果在我的博客搜索那一栏里搜索，比如我搜索python，就会出来这个画面

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAWVJfVA==,size_20,color_FFFFFF,t_70,g_se,x_16

这边用了一点JavaScript

完整代码🍉

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>搜索</title>
</head>
<body>
<h3>YR_T博客搜索</h3>
<script>
function OnSearchBtnClicked() {
    var csdn_url = "https://blog.csdn.net/m0_64036070";
    var searchInput = document.getElementById('txt');
    var searchKey = searchInput.value;
    var bingurl="http://global.bing.com/search?q="+searchKey+"+site%3a" + csdn_url + "&qs=n&sp=-1&pq="+ searchKey +"&sc=8-0&sk=&setmkt=en-us&setlang=en-us&FORM=SECNEN";
    window.location.href=bingurl;
}
</script>
<input id="txt" type="text" name="txt" value="">
<button onclick="OnSearchBtnClicked()">搜索</button>

<form action="https://baidu.com/s" method="get">
    <div>
        <h3>百度搜索</h3>
         <input name="sousuo" id="search" value="">
    </div>
</form>

<h3>bilibili搜索</h3>
<form action="https://search.bilibili.com/all?" method="get" target="_blank">
			        <input id="bfind" type="text" name="keyword" />
			        <input type="submit"  value="搜索MV" />
</form>

</body>
</html>