用加法实现百度搜索功能

今天学到form表,知道了该怎么用form表和input来实现百度搜索功能

代码如下:

<html>
<head>
<head>
<body>
<form  action="https://www.baidu.com/s" method="get" id="submit">
	<div><input id="username" name="wd" type="text"> </div>							
	<div><button type="submit" style="width:100px;height:42px;float:left;background-color:#38f;margin-left:-1px;"><b>百度一下</b></button><br/></div>
	
		</form>	

</body>
</html>

这样我们就在网页中添加了一个文本框,以及一个button按钮。效果如下:

这样一个简陋的搜索框就做好了,这里我们输入小米,再点击“百度一下”,这是页面将跳转的搜索结果。

实现这个功能很简单,最主要的就是理解form和input的使用方法和原理即可。

其实,上文中form的作用原理相当于一个加法,我们假设form action的值为X,input中的name的值为Y,input中输入的value为Z,则X+Y+Z=”https://www.baidu.com/s“+“wd”+“z”,假设我在输入框中输入的为“小米”,则z=小米,于是X+Y+Z=https://www.baidu.com/s? wd=小米,即上图中的网址地址:

(wd后面跟着的一串编码是由“小米”编码后得到的)

方法就是这么简单,大家可以试一试将action改为别的,比如京东,或者淘宝,这样就可以完成完成简单的搜索功能啦。

猜你喜欢

转载自blog.csdn.net/Searchin_R/article/details/82819451