表單是一個包含表單元素的區(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>