离线下载
获取电子书

稻米鼠 · 更新于 2018-02-24 13:01:00

第十一章 一起写个百度

如果本章演示效果无法正常展示,请至主站查看 http://coffee.zji.me/

今天我们来聊聊表单,这个名字可能有些朋友不太了解,啥是表单呢?就是在网页上需要你填上东西然后点个按钮把你填写的东西提交了的功能就是表单了。这么说好抽象(可怜我还没去抄定义,努力通俗的去说呢),但是我举个例子你就该明白了:搜索框啊,网站注册啊,网站登录啊,都是由表单来实现的。还不明白?那我们一起来写一个小小的示例哦~

首先写下:

<form action="http://www.baidu.com/s" method="get">
    <input type="text" name="wd">
    <input type="submit" value="搜索" />
</form>

然后看一下效果:

曾经以为很高深复杂的东西原来也不过这么几行代码,现在我们来仔细分析一下这些代码哦。

form 这个标签包含的部分叫做表单域,反正就是这块地盘是它的,它做主,它罩着,有事冲他说。

然后 action 这个属性是一个网址,是用来处理数据的网址,这个太高深,我们先不要理解它,反正就是我们把收集到的这些数据发给谁的意思。你在大街上做社会调查,别人给你把表填好了,你得把表拿回去给统计部门的人,让他们研究去,嗯,这里就是说这个表要交给谁。

method 是提交的方式,分为两种,一种是 get,一种是 post。

get 就是把数据放在网址里传递,下面我们会做演示。那么打个比方啊,你在外面做了调查,回来之后直接高喊一声:统计部的王二(这是是要让谁处理,就像 action 的网址)我把调查的情况跟你口头说一下(跟着前边招呼负责人的话就一起说了)。这种方法方便(张口就说啊),私密性差(边上的同事都听得到),可以传递的数据量小(三十万字的内容你口头报告一个试试);

post 就是用一些我现在跟你说不明白的办法传递数据。但是打个比方你就能理解了:post 是啥意思?初中英语老师告诉我说是邮寄的意思,那我们就这么理解,你做完了调查,直接把调查结果寄给负责人。会有什么特点呢?肯定要比口头汇报复杂一些,但是安全性高(相对的啊,快递会不会在中间在做手脚是个问题,但是目前我们先不考虑这个,起码同事没法伸个耳朵就偷听走了),可以传递的数据量大(调查的时候我看见一女孩,长得那叫一个正点,偷拍一张跟朋友分享,夹在数据报告里一起邮寄就可以了,你口头汇报描述一个试试看,跟图片完全不是一个感受了);

input 是表单项,他又很多类型(type),设置不同的类型(type)可以实现不同的功能。就好象都是象棋,车和炮就有不一样的功能。

text 这个类型就是文本框,就是上面效果中那个可以输入文字的地方,那叫作文本框,多讲理,可不就是用来输入文本的方框嘛~

submit 这个类型是提交,就是把收集到的信息交给处理人。换言之老板喊收工啦,把调查结果都交上来就可以下班啦,就这个意思。

name 是这个表单项收集到的数据的名称。就是标记一下,这一栏写的是姓名,那一栏写的是年龄,嗯,就这个意思,但是要用英文。

value 就是这个表单项的值,在这里我们用他设置了提交按钮上的文字,你可以修改它看看变化。

这些属性讲完了,我们来试用这个小小的搜索工具哦,在里面输入 AAA 很好识别的一个字符串(就是一串字符,叫做字符串)。然后提交,看看页面跳转到哪里了?

http://www.baidu.com/s?wd=AAA

然后我们仔细看看这个网址,是不是觉得似乎看明白了呢?http://www.baidu.com/s 是 action 的值,然后一个问号,然后是文本框的 name 值(wd)等于文本框的值(我们输入的 AAA)。

原来写个简单的搜索就这么几行代码的事情,是不是有点想要用它做些什么了呢?

本章学习卡片:卡片 11


本书是收费的,不过交费凭自觉。价格定义为每人请我喝一杯咖啡(哪种品质的咖啡随意),支付宝账号:

alay9999@163.com (刘源)

为了让大家阅读方便,本书将在如下站点发布,但最终内容以主站为准:

未经本人许可,禁止任何形式转载。相关事宜请联系: dms@zji.me