这是我最喜欢讲的一节课了,因为可以非常简单的实现一些让我们觉得惊讶的效果。

先来解释一下什么是表单,其实它和表格没有什么关系。这是用来收集用户数据,并进行提交的一类元素。是我们和网站之间非常重要的一种交互方式。这么正式的介绍肯定不容易理解,不过我举几个例子,你立刻就明白了,如网站的登录框,当然注册的时候需要填写的表单也是,还有搜索框,需要你输入内容,然后提交给网站的,基本就都是了。不过有的时候也并不一定是输入,各种切换按钮,单选多选,选个日期,颜色,数值,文件……反正你要告诉网站一些数据的时候,背后差不多都有表单的身影。

这么厉害,一定很复杂吧?是的,表单是一个挺复杂的东西,但并不是说它有多难,只是它相关的元素以及元素的属性,非常多。不过我们也没有必要一下子全都弄懂,先来写一个最简单的应用,认识一下:

<form action="https://www.baidu.com/s" method="get">
  <input type="search" name="wd">
</form>

现在你在输入框中输入一些内容,然后按一下回车键……

好了,估计你刚从百度的搜索页重新回来。没想到我这么简单的三行代码,就可以让你在这个页面里直接进行百度搜索了。抬头再看看这些代码,怎么说也算不上复杂,那还不赶紧背下来,好在小伙伴面前炫耀~~

其实学代码几乎是不需要去背的,好多东西都可以理解着记忆,而且你记住一些关键词,用的时候还可以查嘛,反正又不是考试,也没有人要求你闭卷答题。那我们来解释一下上面的代码:

form 标签说的是,这里是一个表单。当然,这个单词其实是表格、单子的意思,不过这是一个用来收集信息的表,你可以理解为大街上的调查表,“朋友麻烦你填一下这个调查表好吗?”于是你就在表上添上各种他需要的信息,然后再把表交给他。这是一个非常类似的过程。

我们这里写了他的两个属性。一个 action,表示这些数据将要被提交到哪里。就好像上面的调查表,填完以后你当然是不需要考虑其他问题,只要交给他就行了。那么负责收集调查表的这个人,也并不是(不一定)自己去处理这些数据,他要把自己拿到的调查表,交给自己的上级,那么交给谁呢?action 属性描述的就是这个问题。一般他后面的属性值是一个地址,就是表示网页会把这些数据发送到这一个地址。那你也就理解了,为什么我们能够在这个页面里进行百度的搜索。是因为我们这个表单只负责收集数据(你要搜索什么),然后把这些数据发送给百度进行处理,然后展示给你搜索结果的页面。

还有一个属性 method,说的是提交的方法,这个有两种方法,getpost。简单说一下两者的区别:get 就相当于,上面例子中到调查表之后,口头的和他的上级进行一下汇报,那么这个特点就是非常公开的,那就每一个在当时路过的人,都能够听到这些个内容;而且只适合比较简短的数据,如果数据量太大……难不成他每次收到调查表之后,都给上级口述一部《三国演义》,怕是会累到口吐白沫。post 这个单词,在我们最开始认识他的时候学到的含义,一般都是邮寄。那么收到调查表之后,我们通过邮寄的方式交给上级,因为内容是封在邮件中的,就不那么容易被周边的人知道里面的内容了,除非他把邮件拆开看一看。然后这种方式可以传递比较大的数据,别说一本《三国演义》了,就是四大名著也可以一起寄过去。

【本章助记卡片:卡片 for 第十八章