HTML表單的用法

表單是一個包含表單元素的區(qū)域产镐,而表單元素是運(yùn)行用戶在表單中輸入信息的元素佩微。通過表單曹铃,用戶可以向服務(wù)器提交數(shù)據(jù),而服務(wù)器通過表單收集數(shù)據(jù)后給出相應(yīng)的Response财忽。
**1. 表單標(biāo)簽 **
HTML中表單標(biāo)簽是<form></form>倘核,是一個閉合標(biāo)簽,它有4個非常重要的屬性:

  • action:表單提交地址定罢;
  • method:表單提交方法(通常有g(shù)et和post之分)笤虫;
  • target:在何處打開action旁瘫;
  • enctype:編碼方式祖凫;
    其中編碼方式有3個選項,默認(rèn)為“application/x-www-form-urlencoded”酬凳,其余兩個是“text/plain”和“multipart/form-data”惠况。

2. GET和POST
兩者都是表單提交方法,但也有區(qū)別:
(1)GET會把表單提交的數(shù)據(jù)按key=value的形式與URL進(jìn)行組合拼接宁仔,因此可以在URL上看到提交的表單數(shù)據(jù)稠屠。而POST方法不會修改URL進(jìn)行組合拼接,因此不會在URL上看到提交的數(shù)據(jù)翎苫。
(2)由于GET在URL上的可見性权埠,導(dǎo)致了提交敏感數(shù)據(jù)(如:用戶密碼等)時使用GET方法會不安全,而POST方法沒有這種顧慮煎谍。
(3)URL拼接方式提交數(shù)據(jù)時對字符串大小有限制攘蔽,因此會限定GET方法提交的數(shù)據(jù)量,而POST方法理論上沒有限制呐粘。
(4)就使用場景而言满俗,如果需要向服務(wù)器取數(shù)據(jù)或安全性要求不高時可使用GET方法,而向服務(wù)器存數(shù)據(jù)或安全性要求較高時使用POST方法作岖。

3. 常用表單元素
表單元素都必須設(shè)置name值才能提交數(shù)據(jù)唆垃,name值相當(dāng)于提交數(shù)據(jù)的key值。
3.1 input元素
input元素因?qū)傩詔ype值的不同可以生成多選框痘儡、單選框辕万、文件上傳、文本框沉删、密碼框渐尿、隱藏域、按鈕等丑念。
3.1.1 type="checkbox"
生成多選框涡戳,name屬性值還能對多選框進(jìn)行分組,value屬性值為選項提交時的值脯倚。例:
<div>
<input type="checkbox" name="goods" value="rice">米
<input type="checkbox" name="goods" value="flour">面粉
</div>
3.1.2 type="radio"
生成單選框渔彰,name屬性值還能對單選框進(jìn)行分組嵌屎,value屬性值為選項提交時的值。例:
<div>
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
</div>
3.1.3 type="file"
生成上傳文件按鈕恍涂,設(shè)定accepet屬性限定上傳文件類型宝惰,例:
<input type="file" name="myFile" accept="image/jpeg">
3.1.4 type="text"
生成普通文本框,設(shè)置value屬性值為其設(shè)置默認(rèn)值再沧,設(shè)置placeholder屬性設(shè)置提示信息尼夺。例:
<input type="text" name="userName" value="who" placeholder="請輸入用戶名" >
3.1.5 type="password"
生成密碼文本框,設(shè)置placeholder屬性設(shè)置提示信息炒瘸。例:
<input type="password" name="password" placeholder="請輸入密碼" >
3.1.6 type="button"
生成一般按鈕淤堵,點擊該按鈕不會主動提交表單。例:
<input type="button" value="點我">
3.1.7 type="submit"
生成提交按鈕顷扩,點擊該按鈕主動提及表單拐邪。例:
<input type="submit" value="登錄">
3.1.8 type="reset"
生成重置表單按鈕。例:
<input type="reset" value="重置">

3.2 select option
select用于生成下拉框隘截,option為下拉框中的選項扎阶,兩者一般嵌套使用。例:
<select name="country">
<option value="us">美國</option>
<option value="chn">中國</option>
<option value="jpn">日本</option>
</select>

3.3 textarea
textarea生成多行文本框婶芭。由于該標(biāo)簽為閉合標(biāo)簽东臀,寫在標(biāo)簽內(nèi)的值即多行文本框的默認(rèn)值。例:
<textarea name="comment">我想吐槽</textarea>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末犀农,一起剝皮案震驚了整個濱河市惰赋,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌井赌,老刑警劉巖谤逼,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異仇穗,居然都是意外死亡流部,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進(jìn)店門纹坐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來枝冀,“玉大人,你說我怎么就攤上這事耘子」” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵谷誓,是天一觀的道長绒障。 經(jīng)常有香客問我,道長捍歪,這世上最難降的妖魔是什么户辱? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任鸵钝,我火速辦了婚禮,結(jié)果婚禮上庐镐,老公的妹妹穿的比我還像新娘恩商。我一直安慰自己,他們只是感情好必逆,可當(dāng)我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布怠堪。 她就那樣靜靜地躺著,像睡著了一般名眉。 火紅的嫁衣襯著肌膚如雪粟矿。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天璧针,我揣著相機(jī)與錄音嚷炉,去河邊找鬼。 笑死探橱,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的绘证。 我是一名探鬼主播隧膏,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼嚷那!你這毒婦竟也來了胞枕?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤魏宽,失蹤者是張志新(化名)和其女友劉穎腐泻,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體队询,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡派桩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了蚌斩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片铆惑。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖送膳,靈堂內(nèi)的尸體忽然破棺而出员魏,到底是詐尸還是另有隱情,我是刑警寧澤叠聋,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布撕阎,位于F島的核電站,受9級特大地震影響碌补,放射性物質(zhì)發(fā)生泄漏虏束。R本人自食惡果不足惜名斟,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望魄眉。 院中可真熱鬧砰盐,春花似錦、人聲如沸坑律。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽晃择。三九已至谒养,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間夹厌,已是汗流浹背稽揭。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留浪蹂,地道東北人抵栈。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像坤次,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子缰猴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,916評論 2 344

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

  • 一产艾、表單 1. 表單的作用 HTML 表單用于接收不同類型的用戶輸入,用戶提交表單時向服務(wù)器傳輸數(shù)據(jù)滑绒,從而實現(xiàn)用戶...
    zx9426閱讀 399評論 0 1
  • 1闷堡、關(guān)于form表單的基礎(chǔ) form表單:是一個包含表單元素的區(qū)域;作用疑故,用于包裹表單元素杠览。 表單元素:是允許用戶...
    tangmengyun閱讀 695評論 1 1
  • HTML 表單:輸入用戶信息的單子,收集填寫的信息給服務(wù)器后臺例: form:定義html表單焰扳,粗淺理解為包裹表單...
    我七閱讀 393評論 0 0
  • 在 HTML 中倦零,表單是由 標(biāo)記定界的區(qū)域,包含文本輸入框吨悍、按鈕扫茅、復(fù)選框和圖形用戶界面的其他功能部件。Web ...
    萊昂納德剛閱讀 464評論 0 0
  • 在這個互聯(lián)網(wǎng)時代,好東西是不會被淹沒的躏仇。 在公映11天后恋脚,《戰(zhàn)狼2》一舉超越《美人魚》成為中國電影票房總冠軍腺办,該時...
    小衛(wèi)侃談閱讀 309評論 1 1