如果本章演示效果無法正常展示，請(qǐng)至主站查看 http://coffee.zji.me/

今天我們來聊聊表單，這個(gè)名字可能有些朋友不太了解，啥是表單呢？就是在網(wǎng)頁(yè)上需要你填上東西然后點(diǎn)個(gè)按鈕把你填寫的東西提交了的功能就是表單了。這么說好抽象（可憐我還沒去抄定義，努力通俗的去說呢），但是我舉個(gè)例子你就該明白了：搜索框啊，網(wǎng)站注冊(cè)啊，網(wǎng)站登錄啊，都是由表單來實(shí)現(xiàn)的。還不明白？那我們一起來寫一個(gè)小小的示例哦～

首先寫下：

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

然后看一下效果：

曾經(jīng)以為很高深復(fù)雜的東西原來也不過這么幾行代碼，現(xiàn)在我們來仔細(xì)分析一下這些代碼哦。

form 這個(gè)標(biāo)簽包含的部分叫做表單域，反正就是這塊地盤是它的，它做主，它罩著，有事沖他說。

然后 action 這個(gè)屬性是一個(gè)網(wǎng)址，是用來處理數(shù)據(jù)的網(wǎng)址，這個(gè)太高深，我們先不要理解它，反正就是我們把收集到的這些數(shù)據(jù)發(fā)給誰的意思。你在大街上做社會(huì)調(diào)查，別人給你把表填好了，你得把表拿回去給統(tǒng)計(jì)部門的人，讓他們研究去，嗯，這里就是說這個(gè)表要交給誰。

method 是提交的方式，分為兩種，一種是 get，一種是 post。

get 就是把數(shù)據(jù)放在網(wǎng)址里傳遞，下面我們會(huì)做演示。那么打個(gè)比方啊，你在外面做了調(diào)查，回來之后直接高喊一聲：統(tǒng)計(jì)部的王二（這是是要讓誰處理，就像 action 的網(wǎng)址）我把調(diào)查的情況跟你口頭說一下（跟著前邊招呼負(fù)責(zé)人的話就一起說了）。這種方法方便（張口就說?。?，私密性差（邊上的同事都聽得到），可以傳遞的數(shù)據(jù)量?。ㄈf字的內(nèi)容你口頭報(bào)告一個(gè)試試）；

post 就是用一些我現(xiàn)在跟你說不明白的辦法傳遞數(shù)據(jù)。但是打個(gè)比方你就能理解了：post 是啥意思？初中英語(yǔ)老師告訴我說是郵寄的意思，那我們就這么理解，你做完了調(diào)查，直接把調(diào)查結(jié)果寄給負(fù)責(zé)人。會(huì)有什么特點(diǎn)呢？肯定要比口頭匯報(bào)復(fù)雜一些，但是安全性高（相對(duì)的啊，快遞會(huì)不會(huì)在中間在做手腳是個(gè)問題，但是目前我們先不考慮這個(gè)，起碼同事沒法伸個(gè)耳朵就偷聽走了），可以傳遞的數(shù)據(jù)量大（調(diào)查的時(shí)候我看見一女孩，長(zhǎng)得那叫一個(gè)正點(diǎn)，偷拍一張跟朋友分享，夾在數(shù)據(jù)報(bào)告里一起郵寄就可以了，你口頭匯報(bào)描述一個(gè)試試看，跟圖片完全不是一個(gè)感受了）；

input 是表單項(xiàng)，他又很多類型（type），設(shè)置不同的類型（type）可以實(shí)現(xiàn)不同的功能。就好象都是象棋，車和炮就有不一樣的功能。

text 這個(gè)類型就是文本框，就是上面效果中那個(gè)可以輸入文字的地方，那叫作文本框，多講理，可不就是用來輸入文本的方框嘛～

submit 這個(gè)類型是提交，就是把收集到的信息交給處理人。換言之老板喊收工啦，把調(diào)查結(jié)果都交上來就可以下班啦，就這個(gè)意思。

name 是這個(gè)表單項(xiàng)收集到的數(shù)據(jù)的名稱。就是標(biāo)記一下，這一欄寫的是姓名，那一欄寫的是年齡，嗯，就這個(gè)意思，但是要用英文。

value 就是這個(gè)表單項(xiàng)的值，在這里我們用他設(shè)置了提交按鈕上的文字，你可以修改它看看變化。

這些屬性講完了，我們來試用這個(gè)小小的搜索工具哦，在里面輸入 AAA 很好識(shí)別的一個(gè)字符串（就是一串字符，叫做字符串）。然后提交，看看頁(yè)面跳轉(zhuǎn)到哪里了？

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

然后我們仔細(xì)看看這個(gè)網(wǎng)址，是不是覺得似乎看明白了呢？http://www.baidu.com/s 是 action 的值，然后一個(gè)問號(hào)，然后是文本框的 name 值（wd）等于文本框的值（我們輸入的 AAA）。

原來寫個(gè)簡(jiǎn)單的搜索就這么幾行代碼的事情，是不是有點(diǎn)想要用它做些什么了呢？

本章學(xué)習(xí)卡片：卡片 11

本書是收費(fèi)的，不過交費(fèi)憑自覺。價(jià)格定義為每人請(qǐng)我喝一杯咖啡（哪種品質(zhì)的咖啡隨意），支付寶賬號(hào)：

alay9999@163.com （劉源）

為了讓大家閱讀方便，本書將在如下站點(diǎn)發(fā)布，但最終內(nèi)容以主站為準(zhǔn)：

• 主站首發(fā)： http://coffee.zji.me/
• Gitbook: http://codeme.gitbooks.io/easy-web-code-book/
• 簡(jiǎn)書： http://www.jianshu.com/users/d37eaf3de0ff
• 站酷： http://www.zcool.com.cn/u/12927742

未經(jīng)本人許可，禁止任何形式轉(zhuǎn)載。相關(guān)事宜請(qǐng)聯(lián)系： dms@zji.me