目录
hello😄
form表单🍉
form的语法🍊
from的属性🍊
提交？重置？🍊
表单按钮（html）🔍
JavaScript提交表单🔍
JavaScript重置表单🔍
target是什么🍊
target的用法🔍
name的用法🍊
methou的用法🍊
onsubmit的用法句子🍊
搜索？🍉
举个栗子，百度搜索🍊
撸个小程序🍉
效果🍊
完整代码🍉
拜拜😄
hello😄
这次来发一下HTML中的搜索怎么做，其实还是很简单的
旁白：你每次都说简单，我一次都没做出来
这次是真的简单
form表单🍉
首先来说一下form表单，受英语单词“from”的影响，这个单词很容易打错，要记住是“form”哦
表单标记以<form>标记开头，以</form>标记结尾。在表单标记中可以定义处理表单数据程序的URL地址等信息。
form的语法🍊
<form action="url" method="get | post" name="formName" onsubmit="" target="">
</form>from的属性🍊
创建表单，设置表单名称为 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>是啥意思了
这个就可以实现百度搜索，运行之后有一个搜索框，输入后跳转百度
撸个程序🍉
我每次都会带点程序，这次也有
效果🍊
在百度搜索的框里输入会搜索百度，另外两个也同理
其中我的博客搜索你们可以自己改，改成你们的
如果在我的博客搜索那一栏里搜索，比如我搜索python，就会出来这个画面
这边用了一点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>拜拜😄
最后，是不是真的很简单？
