HTML：表单与URL

表单

问题

表单的主要作用是收集数据并把数据发送到后台，表单的页面做出来后，那怎样实现与后台的联系呢？

例子

以百度为例(简单演示)：

• HTML

<form>
  <input type="text" />
  <button type="submit">百度一下</button>
</form>

• 效果

  
  

我们要实现在输入框输入文字，单击【百度一下】就能出现搜索结果。

分析

在此之前我们先要明确两个问题：表单送数据发给谁，发送什么数据。这些信息都在项目接口设计中定义好了。以百度为例，它的接口是http://www.baidu.com/s?wd=要检索的文字。其中，以?为界，?之前称为服务地址(发给谁)；之后称为参数(发送什么)。

解决

信息有了，下面看一下如何在表单中添加这些信息。

说明：

• ?是个分隔符。
• ?之前是服务地址(发给谁)，作为form的action属性值。
• ?之后是参数(发送什么)，=前是参数名，通常作为对应表单控件的name属性值；=后是参数值，通过表单控件输入获取。输入值可以任意
  

完整代码如下：

<form action="http://www.baidu.com/s">
  <input type="text" name="wd" />
  <button type="submit">百度一下</button>
</form>

测试

在页面文本框中输入检索内容，单击【百度一下】。看是否进入了百度搜索结果页面。

实践

同理，大家可以实现一下搜狗和必应

• 搜狗

https://www.sogou.com/web?query=要检索的文字

• 必应

http://cn.bing.com/search?q=要检索的文字