HTML表單的簡單用法:
HTML表單用于搜集不同類型的用戶輸入伊履。<form>元素定義HTML表單。HTML表單包含表單元素平痰。表單元素指的是不同類型的input元素、復(fù)選框伍纫、單選按鈕宗雇、提交按鈕等等。
<input>元素是最重要的表單元素莹规。<input>元素有很多形態(tài)赔蒲,根據(jù)不同的type屬性,創(chuàng)建不同的對(duì)象良漱。
1. form表單有什么作用舞虱?有哪些常用的input 標(biāo)簽,分別有什么作用母市?
- 表單是一個(gè)包含表單元素的區(qū)域矾兜,允許用戶在表單中(文本域,下拉域患久,單選框椅寺,復(fù)選框等等)輸入信息的元素;用于搜集不同類型的用戶輸入蒋失,然后提交給網(wǎng)站后臺(tái)返帕。
- <input type='' name=''>
name:表單提交到后臺(tái)的key,后臺(tái)接收的信息為key-value對(duì)篙挽;
type荆萤,類型,常見type:
text/username:文本框铣卡,用于輸入文本,單行輸入
password:輸入內(nèi)容自動(dòng)變成原點(diǎn)链韭,用于密碼輸入
checkbox:復(fù)選框,允許用戶在一定數(shù)目的選擇中選取一個(gè)或多個(gè)選項(xiàng)煮落。
button:可點(diǎn)擊的按鈕梧油,但沒有任何行為,常用于在用戶點(diǎn)擊是啟動(dòng)JS程序州邢。
hidden:隱藏地段,對(duì)于用戶不可見褪子,通常儲(chǔ)存一個(gè)默認(rèn)值量淌,用于識(shí)別身份。
image:圖像形式的提交按鈕
radio:單選按鈕嫌褪,允許用戶選取給定數(shù)目的選擇中的一個(gè)選項(xiàng)呀枢。
reset:重置按鈕,會(huì)清除表單中的所有數(shù)據(jù)笼痛。
submit:提交按鈕裙秋,用于向服務(wù)器發(fā)送表單數(shù)據(jù)琅拌,發(fā)送到form元素的action屬性指定的頁面。
textarea:多行文本輸入域
file:文件上傳
select:下拉列表
2. post 和 get 方式的區(qū)別摘刑?
- get用于信息獲取进宝,會(huì)把要提交的數(shù)據(jù)拼裝成URL,提交的數(shù)據(jù)信息可見枷恕。一般用于提交少量數(shù)據(jù)党晋,瀏覽器限制最多提交1k。get提交的數(shù)據(jù)會(huì)被緩存徐块,被保存在瀏覽器的歷史記錄中不安全未玻。如果想在表單之外調(diào)用服務(wù)器端的應(yīng)用程序而且包括向其傳遞參數(shù)的過程,就要采用GET方法胡控,因?yàn)間et允許把表單這樣的參數(shù)包括進(jìn)來作為URL的一部分扳剿,還能有一個(gè)來自瀏覽器額外的傳輸過程。
- post用于向服務(wù)器傳送數(shù)據(jù)昼激,是可能修改服務(wù)器上的資源的請(qǐng)求庇绽。提交的數(shù)據(jù)不是URL,內(nèi)容不可見,可提交大量數(shù)據(jù)癣猾,數(shù)據(jù)大小受服務(wù)器限制敛劝,不受瀏覽器限制。
3. 在input里纷宇,name 有什么作用夸盟?
name 屬性規(guī)定input元素的名稱,只有設(shè)置了name屬性的表單元素才能在提交表單是被服務(wù)器接收像捶;input在checkbox上陕,radio類型中,name一致時(shí)代表選項(xiàng)為一組拓春。
4. radio 如何 分組?
通過name屬性分組释簿,所有name屬性相同的radio在使用時(shí)只有一個(gè)會(huì)被選中。即同一組單選按鈕硼莽,name取值一定要一致庶溶,才會(huì)起到單選的作用。
5. placeholder 屬性有什么作用?
提供可描述字段預(yù)期值的提示信息懂鸵,該提示會(huì)在輸入字段為空時(shí)顯示偏螺,并會(huì)在字段focus時(shí)消失。
6. type=hidden隱藏域有什么作用? 舉例說明
- 隱藏域在頁面中是不可見的匆光,用于收集或發(fā)送信息套像,以利于被處理表單的應(yīng)用所使用。在表單被提交的桑暢终息,隱藏域的信息也被一起發(fā)送到服務(wù)器夺巩。
- 隱藏域還可以用于確認(rèn)用戶身份贞让,如 sessionkey等。只有當(dāng)服務(wù)器接收到的hidden與預(yù)埋在頁面的信息一致時(shí)柳譬,才能成功提交表單數(shù)據(jù)喳张。
<input type=‘hidden’ name='hid' value='test'> 此時(shí)input元素用戶不可見,但提交表單時(shí)征绎,隱藏值已提交后臺(tái)
