Form表單

1. form表單有什么作用?有哪些常用的input 標(biāo)簽斜纪,分別有什么作用贫母?

form表單:

  • <form> 標(biāo)簽用于為用戶輸入創(chuàng)建 HTML 表單。表單能夠包含input 元素盒刚,比如文本字段腺劣、復(fù)選框、單選框因块、提交按鈕等等橘原。表單還可以包含menus、textarea涡上、fieldset趾断、 legend、label 元素吩愧。表單用于向服務(wù)器傳輸數(shù)據(jù)芋酌。form 元素是塊級元素,其前后會(huì)產(chǎn)生折行雁佳。

input標(biāo)簽:

  • button :代表 HTML 文檔中的一個(gè)按鈕脐帝;button
  • checkbox :代表一個(gè) HTML 表單中的 一個(gè)選擇框checkbox
  • color :是 HTML5 中的新對象,訪問顏色選擇器color
  • date :是 HTML5 中的新對象,訪問 Date 字段date
  • datatime :是 HTML5 中的新對象,訪問 Datetime 字段datatime
  • datetime local :對象是 HTML5 中的新對象,訪問 Local Datetime 字段datetime local
  • email :是 HTML5 中的新對象,訪問 Email 字段email
  • fileupload :該元素包含一個(gè)文本輸入字段,用來輸入文件名甘穿,還有一個(gè)按鈕腮恩,用來打開文件選擇對話框以便圖形化選擇文件。該元素的 value 屬性保存了用戶指定的文件的名稱温兼,但是當(dāng)包含一個(gè) file-upload 元素的表單被提交的時(shí)候秸滴,瀏覽器會(huì)向服務(wù)器發(fā)送選中的文件的內(nèi)容而不僅僅是發(fā)送文件名。為安全起見募判,file-upload 元素不允許 HTML 作者或 JavaScript 程序員指定一個(gè)默認(rèn)的文件名荡含。HTML value 屬性被忽略,并且對于此類元素來說届垫,value 屬性是只讀的释液,這意味著只有用戶可以輸入一個(gè)文件名。當(dāng)用戶選擇或編輯一個(gè)文件名装处,file-upload 元素觸發(fā) onchange 事件句柄误债。fileupload
  • hidden :代表一個(gè) HTML 表單中的某個(gè)隱藏輸入域,這種類型的輸入元素實(shí)際上是隱藏的浸船。這個(gè)不可見的表單元素的 value 屬性保存了一個(gè)要提交給 Web 服務(wù)器的任意字符串。如果想要提交并非用戶直接輸入的數(shù)據(jù)的話寝蹈,就是用這種類型的元素李命。常用于安全性校驗(yàn)。hidden
  • input image :是 HTML5 中的新對象;input image
  • month :是 HTML5 中的新對象,訪問 Month 字段month
  • number :是 HTML5 中的新對象,訪問 Number 字段number
  • password :代表 HTML 表單中的密碼字段,該文本輸入字段供用戶輸入某些敏感的數(shù)據(jù)箫老,比如密碼等封字。當(dāng)用戶輸入的時(shí)候,他的輸入是被掩蓋的(例如使用星號*)耍鬓,以防止旁邊的人從他背后看到輸入的內(nèi)容阔籽。不過需要注意的是,當(dāng)表單提交時(shí)牲蜀,輸入是用明文發(fā)送的笆制。與類型為 "text" 的元素類似,當(dāng)用戶改變顯示值時(shí)各薇,它會(huì)觸發(fā) onchange 事件句柄项贺。password
  • range :是 HTML5 中的新對象,訪問滑塊控件;range
  • radio :代表 HTML 表單中的單選按鈕,單選按鈕是表示一組互斥選項(xiàng)按鈕中的一個(gè)。當(dāng)一個(gè)按鈕被選中峭判,之前選中的按鈕就變?yōu)榉沁x中的开缎。當(dāng)單選按鈕被選中或不選中時(shí),該按鈕就會(huì)觸發(fā) onclick 事件句柄林螃。radio
  • reset :代表 HTML 表單中的一個(gè)重置按鈕,當(dāng)重置按鈕被點(diǎn)擊奕删,包含它的表單中所有輸入元素的值都重置為它們的默認(rèn)值。默認(rèn)值由 HTML value 屬性或 JavaScript 的 defaultValue 屬性指定疗认。重置按鈕在重置表單之前觸發(fā) onclick 句柄完残,并且這個(gè)句柄可以通過返回 fasle 來取消。reset
  • inputsearch :是 HTML5 中的新對象,訪問 Search 字段inputsearch
  • submit :代表 HTML 表單中的一個(gè)提交按鈕 (submit button),在表單提交之前横漏,觸發(fā) onclick 事件句柄谨设,并且一個(gè)句柄可以通過返回 fasle 來取消表單提交。submit
  • text :代表 HTML 表單中的文本輸入域,該元素可創(chuàng)建一個(gè)單行的文本輸入字段缎浇。當(dāng)用戶編輯顯示的文本并隨后把輸入焦點(diǎn)轉(zhuǎn)移到其他元素的時(shí)候扎拣,會(huì)觸發(fā) onchange 事件句柄。text
  • input time :是 HTML5 中的新對象,訪問 TIME 元素.input time
  • input url :HTML5 中的新對象,訪問 URL 字段.input url
  • week :是 HTML5 中的新對象,訪問 Input Week 字段week

2. post 和 get 方式的區(qū)別素跺?

兩種最常用的 HTTP 方法是:GET 和 POST二蓝。

GET
  • 從指定的資源請求數(shù)據(jù)
  • 請求可被緩存
  • 請求保留在瀏覽器歷史記錄中
  • 請求可被收藏為書簽
  • 請求不應(yīng)在處理敏感數(shù)據(jù)時(shí)使用
  • 請求有長度限制
  • 請求只應(yīng)當(dāng)用于取回?cái)?shù)據(jù)
POST
  • 向指定的資源提交要被處理的數(shù)據(jù)
  • 請求不會(huì)被緩存
  • 請求不會(huì)保留在瀏覽器歷史記錄中
  • 不能被收藏為書簽
  • 請求對數(shù)據(jù)長度沒有要求


    比較 GET 與 POST

3. 在input里,name 有什么作用指厌?

  • name 屬性規(guī)定 input 元素的名稱刊愚。
  • name 屬性用于對提交到服務(wù)器后的表單數(shù)據(jù)進(jìn)行標(biāo)識,或者在客戶端通過 JavaScript 引用表單數(shù)據(jù)踩验。
  • 只有設(shè)置了 name 屬性的表單元素才能在提交表單時(shí)傳遞它們的值鸥诽。
  • POST和GET的時(shí)候商玫,name和input中的值會(huì)形成的 鍵/值 對,服務(wù)器端的表單處理程序只有通過name才能獲取到相應(yīng)的用戶輸入衙传。
    <input type="text" name="username">
    String name = request.getParameter("username");

4. radio 如何 分組?

  • HTML 自動(dòng)產(chǎn)生Radio分組决帖,name設(shè)成一樣的就能分成一組啦;

5. placeholder 屬性有什么作用?

  • placeholder 屬性提供可描述輸入字段預(yù)期值的提示信息(hint)蓖捶。該提示會(huì)在輸入字段為空時(shí)顯示,并會(huì)在字段獲得焦點(diǎn)時(shí)消失扁远。placeholder 屬性適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password俊鱼。placeholder

6. type=hidden隱藏域有什么作用? 舉例說明

隱藏域在頁面中對于用戶是不可見的,在表單中插入隱藏域的目的在于收集或發(fā)送信息畅买,以利于被處理表單的程序所使用

<input type="hidden" name="field_name" value="value">

  • 隱藏域在頁面中對于用戶是不可見的并闲,在表單中插入隱藏域的目的在于收集或發(fā)送信息,以利于被處理表單的程序所使用谷羞。瀏覽者單擊發(fā)送按鈕發(fā)送表單的時(shí)候帝火,隱藏域的信息也被一起發(fā)送到服務(wù)器。
  • 有些時(shí)候我們要給用戶一信息湃缎,讓他在提交表單時(shí)提交上來以確定用戶身份犀填,如sessionkey,等等.當(dāng)然這些東西也能用cookie實(shí)現(xiàn)嗓违,但使用隱藏域就簡單的多了.而且不會(huì)有瀏覽器不支持九巡,用戶禁用cookie的煩惱。
  • 有些時(shí)候一個(gè)form里有多個(gè)提交按鈕蹂季,怎樣使程序能夠分清楚到底用戶是按那一個(gè)按鈕提交上來的呢冕广?我們就可以寫一個(gè)隱藏域,然后在每一個(gè)按鈕處加上onclick="document.form.command.value="xx""然后我們接到數(shù)據(jù)后先檢查command的值就會(huì)知道用戶是按的那個(gè)按鈕提交上來的偿洁。
  • 有時(shí)候一個(gè)網(wǎng)頁中有多個(gè)form撒汉,我們知道多個(gè)form是不能同時(shí)提交的,但有時(shí)這些form確實(shí)相互作用涕滋,我們就可以在form中添加隱藏域來使它們聯(lián)系起來睬辐。
  • javascript不支持全局變量,但有時(shí)我們必須用全局變量何吝,我們就可以把值先存在隱藏域里溉委,它的值就不會(huì)丟失了
  • 還有個(gè)例子,比如按一個(gè)按鈕彈出四個(gè)小窗口爱榕,當(dāng)點(diǎn)擊其中的一個(gè)小窗口時(shí)其他三個(gè)自動(dòng)關(guān)閉.可是IE不支持小窗口相互調(diào)用瓣喊,所以只有在父窗口寫個(gè)隱藏域,當(dāng)小窗口看到那個(gè)隱藏域的值是close時(shí)就自己關(guān)掉黔酥。

7. 練習(xí)

form表單

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末藻三,一起剝皮案震驚了整個(gè)濱河市洪橘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌棵帽,老刑警劉巖熄求,帶你破解...
    沈念sama閱讀 221,406評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異逗概,居然都是意外死亡弟晚,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,395評論 3 398
  • 文/潘曉璐 我一進(jìn)店門逾苫,熙熙樓的掌柜王于貴愁眉苦臉地迎上來卿城,“玉大人,你說我怎么就攤上這事铅搓∩海” “怎么了?”我有些...
    開封第一講書人閱讀 167,815評論 0 360
  • 文/不壞的土叔 我叫張陵星掰,是天一觀的道長多望。 經(jīng)常有香客問我,道長氢烘,這世上最難降的妖魔是什么怀偷? 我笑而不...
    開封第一講書人閱讀 59,537評論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮威始,結(jié)果婚禮上枢纠,老公的妹妹穿的比我還像新娘。我一直安慰自己黎棠,他們只是感情好晋渺,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,536評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著脓斩,像睡著了一般木西。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上随静,一...
    開封第一講書人閱讀 52,184評論 1 308
  • 那天八千,我揣著相機(jī)與錄音,去河邊找鬼燎猛。 笑死恋捆,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的重绷。 我是一名探鬼主播沸停,決...
    沈念sama閱讀 40,776評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼昭卓!你這毒婦竟也來了愤钾?” 一聲冷哼從身側(cè)響起瘟滨,我...
    開封第一講書人閱讀 39,668評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎能颁,沒想到半個(gè)月后杂瘸,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,212評論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡伙菊,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,299評論 3 340
  • 正文 我和宋清朗相戀三年败玉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片占业。...
    茶點(diǎn)故事閱讀 40,438評論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡绒怨,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出谦疾,到底是詐尸還是另有隱情,我是刑警寧澤犬金,帶...
    沈念sama閱讀 36,128評論 5 349
  • 正文 年R本政府宣布念恍,位于F島的核電站,受9級特大地震影響晚顷,放射性物質(zhì)發(fā)生泄漏峰伙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,807評論 3 333
  • 文/蒙蒙 一该默、第九天 我趴在偏房一處隱蔽的房頂上張望瞳氓。 院中可真熱鬧,春花似錦栓袖、人聲如沸匣摘。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,279評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽音榜。三九已至,卻和暖如春捧弃,著一層夾襖步出監(jiān)牢的瞬間赠叼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,395評論 1 272
  • 我被黑心中介騙來泰國打工违霞, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留嘴办,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,827評論 3 376
  • 正文 我出身青樓买鸽,卻偏偏與公主長得像涧郊,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子癞谒,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,446評論 2 359

推薦閱讀更多精彩內(nèi)容