如果本章演示效果無法正常展示,請至主站查看 http://coffee.zji.me/
今天我們來聊聊表單,這個名字可能有些朋友不太了解,啥是表單呢?就是在網(wǎng)頁上需要你填上東西然后點個按鈕把你填寫的東西提交了的功能就是表單了。這么說好抽象(可憐我還沒去抄定義,努力通俗的去說呢),但是我舉個例子你就該明白了:搜索框啊,網(wǎng)站注冊啊,網(wǎng)站登錄啊,都是由表單來實現(xiàn)的。還不明白?那我們一起來寫一個小小的示例哦~
首先寫下:
<form action="http://www.baidu.com/s" method="get">
<input type="text" name="wd">
<input type="submit" value="搜索" />
</form>
然后看一下效果:
曾經(jīng)以為很高深復雜的東西原來也不過這么幾行代碼,現(xiàn)在我們來仔細分析一下這些代碼哦。
form 這個標簽包含的部分叫做表單域,反正就是這塊地盤是它的,它做主,它罩著,有事沖他說。
然后 action 這個屬性是一個網(wǎng)址,是用來處理數(shù)據(jù)的網(wǎng)址,這個太高深,我們先不要理解它,反正就是我們把收集到的這些數(shù)據(jù)發(fā)給誰的意思。你在大街上做社會調(diào)查,別人給你把表填好了,你得把表拿回去給統(tǒng)計部門的人,讓他們研究去,嗯,這里就是說這個表要交給誰。
method 是提交的方式,分為兩種,一種是 get,一種是 post。
get 就是把數(shù)據(jù)放在網(wǎng)址里傳遞,下面我們會做演示。那么打個比方啊,你在外面做了調(diào)查,回來之后直接高喊一聲:統(tǒng)計部的王二(這是是要讓誰處理,就像 action 的網(wǎng)址)我把調(diào)查的情況跟你口頭說一下(跟著前邊招呼負責人的話就一起說了)。這種方法方便(張口就說啊),私密性差(邊上的同事都聽得到),可以傳遞的數(shù)據(jù)量?。ㄈf字的內(nèi)容你口頭報告一個試試);
post 就是用一些我現(xiàn)在跟你說不明白的辦法傳遞數(shù)據(jù)。但是打個比方你就能理解了:post 是啥意思?初中英語老師告訴我說是郵寄的意思,那我們就這么理解,你做完了調(diào)查,直接把調(diào)查結(jié)果寄給負責人。會有什么特點呢?肯定要比口頭匯報復雜一些,但是安全性高(相對的啊,快遞會不會在中間在做手腳是個問題,但是目前我們先不考慮這個,起碼同事沒法伸個耳朵就偷聽走了),可以傳遞的數(shù)據(jù)量大(調(diào)查的時候我看見一女孩,長得那叫一個正點,偷拍一張跟朋友分享,夾在數(shù)據(jù)報告里一起郵寄就可以了,你口頭匯報描述一個試試看,跟圖片完全不是一個感受了);
input 是表單項,他又很多類型(type),設(shè)置不同的類型(type)可以實現(xiàn)不同的功能。就好象都是象棋,車和炮就有不一樣的功能。
text 這個類型就是文本框,就是上面效果中那個可以輸入文字的地方,那叫作文本框,多講理,可不就是用來輸入文本的方框嘛~
submit 這個類型是提交,就是把收集到的信息交給處理人。換言之老板喊收工啦,把調(diào)查結(jié)果都交上來就可以下班啦,就這個意思。
name 是這個表單項收集到的數(shù)據(jù)的名稱。就是標記一下,這一欄寫的是姓名,那一欄寫的是年齡,嗯,就這個意思,但是要用英文。
value 就是這個表單項的值,在這里我們用他設(shè)置了提交按鈕上的文字,你可以修改它看看變化。
這些屬性講完了,我們來試用這個小小的搜索工具哦,在里面輸入 AAA 很好識別的一個字符串(就是一串字符,叫做字符串)。然后提交,看看頁面跳轉(zhuǎn)到哪里了?
然后我們仔細看看這個網(wǎng)址,是不是覺得似乎看明白了呢?http://www.baidu.com/s 是 action 的值,然后一個問號,然后是文本框的 name 值(wd)等于文本框的值(我們輸入的 AAA)。
原來寫個簡單的搜索就這么幾行代碼的事情,是不是有點想要用它做些什么了呢?
本章學習卡片:卡片 11
本書是收費的,不過交費憑自覺。價格定義為每人請我喝一杯咖啡(哪種品質(zhì)的咖啡隨意),支付寶賬號:
alay9999@163.com (劉源)
為了讓大家閱讀方便,本書將在如下站點發(fā)布,但最終內(nèi)容以主站為準:
未經(jīng)本人許可,禁止任何形式轉(zhuǎn)載。相關(guān)事宜請聯(lián)系: dms@zji.me