这是我最喜欢讲的一节课了，因为可以非常简单的实现一些让我们觉得惊讶的效果。
先来解释一下什么是表单，其实它和表格没有什么关系。这是用来收集用户数据，并进行提交的一类元素。是我们和网站之间非常重要的一种交互方式。这么正式的介绍肯定不容易理解，不过我举几个例子，你立刻就明白了，如网站的登录框，当然注册的时候需要填写的表单也是，还有搜索框，需要你输入内容，然后提交给网站的，基本就都是了。不过有的时候也并不一定是输入，各种切换按钮，单选多选，选个日期，颜色，数值，文件……反正你要告诉网站一些数据的时候，背后差不多都有表单的身影。
这么厉害，一定很复杂吧？是的，表单是一个挺复杂的东西，但并不是说它有多难，只是它相关的元素以及元素的属性，非常多。不过我们也没有必要一下子全都弄懂，先来写一个最简单的应用，认识一下：
<form action="https://www.baidu.com/s" method="get"><input type="search" name="wd"></form>现在你在输入框中输入一些内容，然后按一下回车键……
好了，估计你刚从百度的搜索页重新回来。没想到我这么简单的三行代码，就可以让你在这个页面里直接进行百度搜索了。抬头再看看这些代码，怎么说也算不上复杂，那还不赶紧背下来，好在小伙伴面前炫耀~~
其实学代码几乎是不需要去背的，好多东西都可以理解着记忆，而且你记住一些关键词，用的时候还可以查嘛，反正又不是考试，也没有人要求你闭卷答题。那我们来解释一下上面的代码：
form 标签说的是，这里是一个表单。当然，这个单词其实是表格、单子的意思，不过这是一个用来收集信息的表，你可以理解为大街上的调查表，“朋友麻烦你填一下这个调查表好吗？”于是你就在表上添上各种他需要的信息，然后再把表交给他。这是一个非常类似的过程。
我们这里写了他的两个属性。一个 action，表示这些数据将要被提交到哪里。就好像上面的调查表，填完以后你当然是不需要考虑其他问题，只要交给他就行了。那么负责收集调查表的这个人，也并不是（不一定）自己去处理这些数据，他要把自己拿到的调查表，交给自己的上级，那么交给谁呢？action 属性描述的就是这个问题。一般他后面的属性值是一个地址，就是表示网页会把这些数据发送到这一个地址。那你也就理解了，为什么我们能够在这个页面里进行百度的搜索。是因为我们这个表单只负责收集数据（你要搜索什么），然后把这些数据发送给百度进行处理，然后展示给你搜索结果的页面。
还有一个属性 method，说的是提交的方法，这个有两种方法，get 和 post。简单说一下两者的区别：get 就相当于，上面例子中到调查表之后，口头的和他的上级进行一下汇报，那么这个特点就是非常公开的，那就每一个在当时路过的人，都能够听到这些个内容；而且只适合比较简短的数据，如果数据量太大……难不成他每次收到调查表之后，都给上级口述一部《三国演义》，怕是会累到口吐白沫。post 这个单词，在我们最开始认识他的时候学到的含义，一般都是邮寄。那么收到调查表之后，我们通过邮寄的方式交给上级，因为内容是封在邮件中的，就不那么容易被周边的人知道里面的内容了，除非他把邮件拆开看一看。然后这种方式可以传递比较大的数据，别说一本《三国演义》了，就是四大名著也可以一起寄过去。
暂无评论内容