表單
一、 表單的基本應(yīng)用
(一) 表單典型的應(yīng)用場(chǎng)景
1. 登錄、注冊(cè)
2. 網(wǎng)上訂單
3. 調(diào)查問(wèn)卷
4. 網(wǎng)上搜索
(二) 表單標(biāo)簽及表單屬性
1. 表單標(biāo)簽
在HTML中，使用<form>標(biāo)簽來(lái)實(shí)現(xiàn)表單的創(chuàng)建，該標(biāo)簽用于在網(wǎng)頁(yè)中創(chuàng)建表單區(qū)域，屬于一個(gè)容器標(biāo)簽，其他表單標(biāo)簽需要在它的范圍中才有效。
2. 表單的屬性
action
此屬性指示服務(wù)器上處理表彰輸出的程序。一般來(lái)說(shuō)，當(dāng)用戶單擊表單上的“提交”按鈕后，信息發(fā)送到Web服務(wù)器上，由action屬性所指定的程序處理。
語(yǔ)法：action=”URL”
如果action的屬性為空，則默認(rèn)表單提交到本頁(yè)。
method
此屬性告訴瀏覽器如何將數(shù)據(jù)發(fā)送給服務(wù)器，它指定服務(wù)器發(fā)送數(shù)據(jù)的方法（post還是get）.
如果是get，瀏覽器創(chuàng)建一個(gè)請(qǐng)求，該請(qǐng)求包含頁(yè)面URL、一個(gè)問(wèn)號(hào)和表單的值。瀏覽器會(huì)將該請(qǐng)求返回給URL指定的腳本，以進(jìn)行處理。
如果是post，表單上的數(shù)據(jù)會(huì)作為一個(gè)數(shù)據(jù)塊發(fā)送到腳本，而不使用請(qǐng)求字符串。
語(yǔ)法：method=get|post.
3. 案例演示：簡(jiǎn)單的表單提交
效果
[圖片上傳失敗...(image-eff024-1552720169013)]
核心代碼
<FORM name="form1" method="get" action="result.html">
<P>名字：
<INPUT name="name" type="text" class="input" id="fname">
</P>
<P>密碼：
<INPUT name="pass" type="password" class="input" id="pass">
</P>
<P>
<INPUT type="submit" name="Button" value="提交">
<INPUT type="reset" name="Reset" value="重填">
</P>
</FORM>
4. get|post提交方式的總結(jié)
post提交不會(huì)改變地址欄狀態(tài)，表單數(shù)據(jù)不會(huì)被顯示
get提交，地址欄狀態(tài)會(huì)發(fā)生變化，表單數(shù)據(jù)會(huì)在URL中顯示
所以POST比GET安全。
(三) 表單元素及其格式
1. 表單元素
在表單中添加表單元素，使用<input>標(biāo)簽
語(yǔ)法
<input type="text" name="fname" value="text">
屬性說(shuō)明
[圖片上傳失敗...(image-fda1ff-1552720169013)]
|
屬性
|
說(shuō)明
|
|
type
|
指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默認(rèn)為 text
|
|
name
|
指定表單元素的名稱。
|
|
value
|
元素的初始值。type 為 radio時(shí)必須指定一個(gè)值
|
|
size
|
指定表單元素的初始寬度。當(dāng) type 為 text 或 password時(shí)，表單元素的大小以字符為單位。對(duì)于其他類型，寬度以像素為單位
|
|
maxlength
|
type為text 或 password 時(shí)，輸入的最大字符數(shù)
|
|
checked
|
type為radio或checkbox時(shí)，指定按鈕是否是被選中
|
2. 文本框
描述
用于輸入單行文本信息，如用戶名輸入框等。
語(yǔ)法
<input type="text" name="userName" value="用戶名" size="30" maxlength="20" >
屬性說(shuō)明
[圖片上傳失敗...(image-31ee89-1552720169012)]
size與maxlength的區(qū)別，當(dāng)沒(méi)有設(shè)置maxlength時(shí)向文本框中輸入內(nèi)容沒(méi)有限制，當(dāng)設(shè)置maxlength時(shí)再向文本框中輸入值將會(huì)有字符數(shù)的限制。上面代碼顯示，文本顯示長(zhǎng)度為30，允許輸入的最多字符數(shù)為20.
即size是指文本框的長(zhǎng)度，maxlength是指輸入的數(shù)據(jù)長(zhǎng)度。
案例演示
[圖片上傳失敗...(image-eb1634-1552720169012)]
<form method="post" action="">
<P>名????字：
<input type="text" value="" name="fname">
</P>
<P>姓????氏：
<input type="text" name="lname" value="張" > </P>
<P>登錄名：
<input type="text" name="sname" size="30" maxlength="20">
</P>
</form>
3. 密碼框
描述
用戶希望輸入的數(shù)據(jù)被處理，以名被他人利用，如密碼。
語(yǔ)法
<input type="password " name="pass" size="20" >
屬性說(shuō)明
[圖片上傳失敗...(image-25d370-1552720169012)]
type取值為password時(shí)為密碼框，name屬性是必須的，其他屬性并不是必須的，實(shí)際開(kāi)發(fā)中通常不設(shè)置value初始值
案例演示：密碼
[圖片上傳失敗...(image-e91b4d-1552720169012)]
<form method="post" action="">
<P>用戶名：<input name="name" type="text" size="21"> </P>
<P>密???碼：
<input name="pass" type="password" size="22">
</P>
</form>
經(jīng)驗(yàn)
密碼框能保證輸入數(shù)據(jù)的安全嗎？
不能，密碼框僅僅使周圍的人看不見(jiàn)輸入的符號(hào)，它不能保證輸入數(shù)據(jù)安全。為了使數(shù)據(jù)安全，應(yīng)該加強(qiáng)人為管理，采用數(shù)據(jù)加密碼技術(shù)等。
4. 單選框
描述
單選按鈕用于一組相互排斥的值，組中的每個(gè)單選按鈕應(yīng)用具有相同的名稱，用戶一次只能選擇一個(gè)選項(xiàng)。
只有從組中選定的單選按鈕才會(huì)在提交的數(shù)據(jù)中提交對(duì)應(yīng)的數(shù)值
在使用單選按鈕時(shí)，需要一個(gè)顯式的value屬性值
語(yǔ)法
<input name="gen" type="radio" value="男" checked="checked" >男
<input name="gen" type="radio" value="女" >女
屬性說(shuō)明
[圖片上傳失敗...(image-e21484-1552720169011)]
type取值為radio時(shí)為單選按鈕，name和value屬性是必須的，其他屬性并不是必須的
同一組單選按鈕，name屬性值必須相同，才能在選中單選按鈕時(shí)達(dá)到互斥
希望在頁(yè)面加載時(shí)單選按鈕有一個(gè)默認(rèn)的選項(xiàng)，則必須使用checked屬性，同一組單選按鈕只能有一個(gè)默認(rèn)的checked屬性
案例演示：?jiǎn)芜x按鈕
[圖片上傳失敗...(image-96c6bb-1552720169011)]
<form method="post" action="">
性別：
<input name="gen" type="radio" class="input" value="男" checked="checked">男?
<input name="gen" type="radio" value="女" class="input">女
</form>
5. 復(fù)選框
描述
復(fù)選框允許用戶選擇多個(gè)選項(xiàng)。
語(yǔ)法
<input type="checkbox" name="interest" value="sports">運(yùn)動(dòng)
<input type="checkbox" name="interest" value="talk" checked="checked" >聊天
<input type="checkbox" name="interest" value="play">玩游戲
屬性說(shuō)明
[圖片上傳失敗...(image-f99cb1-1552720169010)]
type取值為checkbox時(shí)為復(fù)選框，name和value屬性是必須的，其他屬性并不是必須的。
同一組復(fù)選框，根據(jù)需要可設(shè)置name屬性值相同，也可不同
希望在頁(yè)面加載時(shí)有默認(rèn)選中的復(fù)選框，則必須使用checked屬性，同一組復(fù)選框中允許有多個(gè)復(fù)選框有默認(rèn)的checked屬性。
一旦用戶選中了某個(gè)復(fù)選框，在表單提交時(shí)，會(huì)將該復(fù)選框的name值和對(duì)應(yīng)的value值一起提交。
案例演示：復(fù)選框
[圖片上傳失敗...(image-7b8075-1552720169009)]
<form method="post" action="">
愛(ài)好：
<input type="checkbox" name="interest" value="sports" checked="checked">運(yùn)動(dòng)??
<input type="checkbox" name="interest" value="talk"> 聊天??
<input type="checkbox" name="interest" value="play"> 玩游戲
</form>
技巧
復(fù)選框的名稱要根據(jù)應(yīng)用來(lái)確定名稱是否相同。通常情況下，如果選項(xiàng)之間是并列關(guān)系，就需要設(shè)置為相同的名稱，以便能夠同時(shí)獲取。例如，興趣愛(ài)好，一個(gè)有多個(gè)興趣愛(ài)好，這樣篩選框設(shè)置相同名稱，以便在提交數(shù)據(jù)時(shí)能夠一次性得到所有選擇的興趣愛(ài)好選項(xiàng)。
否則，每個(gè)選項(xiàng)都需要單獨(dú)進(jìn)行讀取，從而降低了效果。
6. 列表框
描述
列表框主要是為了用戶快速、方便、正確地選擇一些選項(xiàng)，并且節(jié)省頁(yè)面空間
語(yǔ)法
<select name="列表名稱" size="行數(shù)">
<option value="選項(xiàng)的值" selected="selected">…</option >
<option value="選項(xiàng)的值">…</option >
</select>
<select>標(biāo)簽用戶顯示可供用戶選擇的下拉列表，每個(gè)選項(xiàng)由<option>來(lái)表示；
<select>標(biāo)簽必須包含至少一個(gè)<option>標(biāo)簽。
屬性說(shuō)明
[圖片上傳失敗...(image-bf5e27-1552720169009)]
name和value屬性是必須的，其他屬性并不是必須的。
size確定靜靜中可同時(shí)看到的行數(shù);
selected默認(rèn)選中，只能有一個(gè)選中項(xiàng)
案例演示：列表框
[圖片上傳失敗...(image-5337f-1552720169009)]
<form method="post" action="">
出生日期:
<input name="byear" value="yyyy" size="4" maxlength="4"> ?年
<select name="bmon" >
<option value="">[選擇月份]</OPTION>
<option value="1">一月</option>
<option value="2">二月</option>
<option value="3">三月</option>
<option value="4">四月</option>
<option value="5">五月</option>
<option value="6">六月</option>
<option value="7">七月</option>
<option value="8">八月</option>
<option value="9">九月</option>
<option value="10" selected="selected">十月</option>
<option value="11">十一月</option>
<option value="12">十二月</option>
</select> 月?
<input name="bday" value="dd" size="2" maxlength="2" > 日
</form>
7. 按鈕
描述
按鈕在表單中經(jīng)常用到，在HTML中按鈕分為3種，分別是普通按鈕（button）、提交按鈕（submit）和重置按鈕（reset）。
普通按鈕主要用來(lái)響應(yīng)onclick事件，提交按鈕用來(lái)提交表單信息，重置按鈕用來(lái)清除表單中已填信息。
語(yǔ)法
<input type=”button|reset|submit” name=”btn” value=”按鈕”>
name和value屬性是必須的，其他屬性并不是必須的。
案例演示
[圖片上傳失敗...(image-d6aca4-1552720169007)]
<form method="post" action="">
<P>用戶名：<input name="name" type="text"> </P>
<P>密????碼：<input name="pass" type="password"></P>
<P>
<input type="reset" name="butReset" value="reset按鈕">
<input type="submit" name="butSubmit" value="submit按鈕">
<input type="button" name="butButton" value="button按鈕" onclick="alert(this.value)">
</P>
</form>
圖片按鈕
<input type="image" src="images/login.gif" />
[圖片上傳失敗...(image-f1cbbc-1552720169006)]
<input type="image" src="images/login.gif" />
8. 多行文本域
描述
當(dāng)需要在網(wǎng)頁(yè)中輸入兩行或以上的文本時(shí)，前面學(xué)習(xí)的文本框及其他表單元素都不能滿足要求，這就應(yīng)該使用多行文本框，它使用的標(biāo)簽是<textarea>
語(yǔ)法
<textarea name="showText" cols="x" rows="y">文本內(nèi)容 </textarea >
語(yǔ)法說(shuō)明
[圖片上傳失敗...(image-17fa16-1552720169006)]
案例演示
[圖片上傳失敗...(image-550792-1552720169006)]
<form method="post" action="">
<H4>填寫(xiě)個(gè)人評(píng)價(jià) </H4>
<P>
<textarea name="textarea" cols="40" rows="6">
自信、活潑、善于思考...
</textarea>
</P>
</form>
9. 文件域
描述
文件域的作用是用于實(shí)現(xiàn)文件的選擇，在應(yīng)用時(shí)只需要把type屬性設(shè)置為”file”即可。
在實(shí)際操作中，文件域通常用于文件上傳的操作，如選擇需要上傳文本、圖片等。
語(yǔ)法
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" />
<input type="submit" name="upload" value="上傳" /></p>
</form>
語(yǔ)法說(shuō)明
(1) . type值為file
(2) . 在表單中使用文件域時(shí)，必須設(shè)置表單的“enctype”編碼屬性為“multipart/form-data”，表示將表單數(shù)據(jù)分為多部分提交
案例演示
[圖片上傳失敗...(image-e63916-1552720169004)]
<form action="" method="post" enctype="multipart/form-data">
<p><input type="file" name="files" /><br />
<input type="submit" name="upload" value="上傳" /></p>
</form>
(四) 課堂作業(yè)
1. 制作網(wǎng)易郵箱登錄頁(yè)面
訓(xùn)練要求
使用表格布局排版
制作網(wǎng)頁(yè)郵箱登錄頁(yè)面
效果圖
[圖片上傳失敗...(image-8ce19-1552720169004)]
(五) 課后作業(yè)
1. 阿里里巴巴用戶注冊(cè)頁(yè)面
需求說(shuō)明
(1) . 電子郵箱、登錄名、密碼最多能容納的字符數(shù)是32個(gè)字符，驗(yàn)證碼最多能容納5個(gè)字符。
(2) . 默認(rèn)情況下會(huì)員身份中的“買家”處于選中狀態(tài)。
(3) . 提交按鈕使用素材中提供的圖片代替。
效果圖
[圖片上傳失敗...(image-b83d62-1552720169004)]
