第十九章表单（二）-易看设计

上一章，我们对表单有了一个简单的认识。不过，代码还差一句没有讲完，这一章我们来继续聊。

input 就是输入的意思，那么这个标签表示的就是输入框。这又是一个单打独斗的标签，因为他只要说明在哪里插入这个输入框就可以了。

然后里面写了两个属性，一个是类型（type），一个是名字（name）。因为我们要做搜索，所以现在它的类型是 search，这个类型是 HTML5 新增加的，如果是在以前，这种情况我们只能把它的类型设置为 text，就是文本。而 name 说的是这个输入框所接收到的数据叫做什么名字。因为我们一个表单，可能收集的不只是一项数据，那么我们要对它进行一个区分。就好像上一章中我们所举的例子，要填写的调查表中，可能有姓名，性别，职业，爱好……那么这些都是数据的名字，而你填入的内容才是要获得的数据。有了名字以后，我们就可以很方便的进行交流了。比如说把调查表中所有人的性别统计一下，我们来看一下性别比例。这里就用“性别”来指代了调查表中所有填入的男女的数据。

别怪我讲得这么细致，因为我们用中文描述很容易理解，但是把它换成英文之后，有的同学可能就要思考一下，那么我给你讲一个小故事，就是为了让你能够往里面进行对应的。

现在我们收集到了一个数据，给它取的名字叫做 wd。按下回车，表单就进行提交，因为搜索这个事情，需要提交的数据非常简单，而且也不需要多么机密，所以我们上面也写了，使用的是 get 方法。说到这里你就忍不住了，上一章说 get 方法就仿佛口头汇报，路过的人也都能够听到其中的内容，所以我们也很想听听他都说了哪些内容，这个怎么听呢？

很简单的，get 方法的数据其实就是通过网址进行传输，那我们就来研究一下网址。打开百度，搜索 AAAAAA，然后回车，发现地址产生了一些变化，我们把这个地址复制回来研究一下：

https://www.baidu.com/s?wd=AAAAAA&rsv_spt=1&rsv_iqid=0xb2b7499900039d9a&issp=1&f=8&rsv_bp=0&rsv_idx=2&ie=utf-8&tn=baiduhome_pg&rsv_enter=1&rsv_sug3=6&rsv_sug1=6&rsv_sug7=100&rsv_t=2c5e0RYs42YhNJaQe7KRO8LJp2xkjnvsQrMXWkJdSN%2F5htkCq0g2JEPukERgxhb7XCSz&rsv_sug2=0&inputT=2958&rsv_sug4=2959

我知道这么多东西，大家一看就懵了，别说你，我看他一眼也想睡觉。不过刚才我们为什么要搜索 AAAAAA 呢？真相只有一个，就是辨识度比较高，说白了就是好找。那我们就来找找吧。你说太长了不好找？那就把这个网址粘贴到编辑器里，按下 Ctrl+F，进行查找吧~

这里就是我们要搜索的内容，所以如果我们改变这里的文字，是不是就可以搜索其他内容呢？那么你可以把它改成 BBBBBB 来试试看。结果获得了成功，这个发现让我们欣喜不已。这时候如果你再往前面多看几个字，就很容易发现这样一个结构：wd=AAAAAA。于是一下子就明白了，get 的数据通过网址传递，传递时的结构是 数据名（name）=数据值，就好像 性别=小仙女。

那既然了解了这个结构，我们就可以把这个网址进行一下整理了：

https://www.baidu.com/s?
wd=AAAAAA
&
rsv_spt=1&rsv_iqid=0xb2b7499900039d9a
&
issp=1
<!-- 网址太长，我就不继续往下写了 -->

一番整理之后，虽然我们看不懂这些内容，但是我们懂得一个问题，就是这个网址传递了许多数据。而数据与数据之间，用 & 来进行分隔。现在这个网址看起来就不那么复杂了。那么还有一个地方需要说一下，就是上面第一行最后的问号 ?。在问号的前面，是实际处理这些数据的网址，也就是我们这些数据要发送给谁。所以你就要明白了表单中 action 属性的内容是怎么来的了。而问号后面，是我们要发送过去的数据。

那么网址的基本结构，我们就先解析到这里，大家可以根据我们所学到的内容试着把上一章那个非常简单的搜索的搜索引擎改为必应搜索（ https://cn.bing.com/ ）。最后一张图简单总结一下网址的结构^[1]：