<form>表單的屬性和使用
- 編輯：admin -1.表單的作用 表單用于 顯示、收集 信息，并將信息 提交 給服務(wù)器 2.表單的元素 1、語(yǔ)法 form 允許出現(xiàn)表單控件 /form 2、屬性 1、action 定義表單被提交時(shí)發(fā)生的動(dòng)作 提交給服務(wù)器處理程序的地址 注意：通過(guò) 與服務(wù)器端人員交流 得到 action 的地址 默認(rèn)，提交給本頁(yè) 2、method 作用：定義表單提交數(shù)據(jù)時(shí)的方式 取值： 1、get (默認(rèn)值) 意義為：得到，獲取 場(chǎng)合：向服務(wù)器要數(shù)據(jù)時(shí)使用 特點(diǎn)： 1、明文提交,所提交的數(shù)據(jù)時(shí)可以顯示在地址
1.表單的作用
表單用于顯示、收集信息，并將信息提交給服務(wù)器
2.表單的元素
1、語(yǔ)法
<form>
允許出現(xiàn)表單控件
</form>
2、屬性
1、action
定義表單被提交時(shí)發(fā)生的動(dòng)作
提交給服務(wù)器處理程序的地址
注意：通過(guò) 與服務(wù)器端人員交流 得到 action 的地址
默認(rèn)，提交給本頁(yè)
2、method
作用：定義表單提交數(shù)據(jù)時(shí)的方式
取值：
1、get (默認(rèn)值)
意義為：得到，獲取
場(chǎng)合：向服務(wù)器要數(shù)據(jù)時(shí)使用
特點(diǎn)：
1、明文提交,所提交的數(shù)據(jù)時(shí)可以顯示在地址欄上的-安全性較低
2、提交數(shù)據(jù)有大小限制-最大為2KB
2、post
意義：郵寄，郵遞
場(chǎng)合：將數(shù)據(jù)提交給服務(wù)器處理時(shí)使用(有保密類(lèi)型數(shù)據(jù)時(shí))
特點(diǎn)：
1、隱式提交-所提交的內(nèi)容是不會(huì)顯示在地址欄上的，安全性較高
2、無(wú)大小限制
3、put
4、delete
5、...
3、enctype
作用：編碼類(lèi)型，即表單數(shù)據(jù)進(jìn)行編碼的方式
允許表單將什么樣的數(shù)據(jù)提交給服務(wù)器
取值：
1、application/x-www-form-urlencoded
默認(rèn)值
允許將 普通字符，特殊字符，都提交給服務(wù)器，不允許提交 文件
2、multipart/form-data
允許 將文件提交給服務(wù)器
3、text/plain
只允許提交普通字符。特殊字符，文件等都無(wú)法提交
4、name
定義 表單的名稱(chēng)
注意：如果有文件需要提交給服務(wù)器，method必須為POST，enctype必須為multipart/form-data
<form action=".." method="post" enctype="multipart/form-data" name="biaodan">
<input/>
</form>
3.表單控件
1、分類(lèi)
1、input 組元素
2、textarea 元素
3、select 和 option 選項(xiàng)框
4、其他元素
2、input 元素
1、語(yǔ)法
<input> 或 <input/>
2、屬性
1、type
根據(jù)不同的type屬性值，可以創(chuàng)建各種類(lèi)型的輸入控件，比如：文本框，密碼框，復(fù)選框，按鈕 等... ...
2、value
控件的值即要提交給服務(wù)器的數(shù)據(jù)
3、name
控件的名稱(chēng)，服務(wù)器要用
命名規(guī)范：匈牙利命名法
控件的縮寫(xiě)+功能名稱(chēng)
4、disabled
該屬性只要出現(xiàn)在標(biāo)簽中，表示的是 禁用該控件
3、input的具體控件
1、文本框與密碼框
文本框：明文顯示用戶(hù)輸入的數(shù)據(jù)
<input type="text">
密碼框：密文顯示用戶(hù)輸入的數(shù)據(jù)
<input type="password">
屬性
1、name
縮寫(xiě)：txt
ex:
1、創(chuàng)建一個(gè)文本框，表示 接受 用戶(hù)名稱(chēng)(Username)
<input type="text" name="txtUsername">
2、創(chuàng)建一個(gè)密碼框，表示 接受 用戶(hù)密碼(Userpwd)
<input type="password" name="txtUserpwd">
2、value
1、表示控件的值
2、表示控件的默認(rèn)值
3、maxlength
限制輸入的字符數(shù)
4、readonly
只讀-只能看，不能改
該屬性只要出現(xiàn)在標(biāo)記中，就是只讀的意思，不需要給值
readonly 與 disabled 的區(qū)別
1、readonly 只能看，不能改，但是可以被提交給服務(wù)器
2、disabled 只能看，不能改，但是不能提交給服務(wù)器
注意：對(duì)于input來(lái)講，如果不寫(xiě) type 或者 type值寫(xiě)錯(cuò)的時(shí)候，默認(rèn)都是文本框
2、單選按鈕和復(fù)選框
單選按鈕：type="radio"
復(fù)選框：type="checkbox"
屬性：
1、name
定義名稱(chēng)
radio縮寫(xiě)：rdo
checkbox縮寫(xiě)：chk
還可以對(duì)控件進(jìn)行分組,一組單選按鈕和復(fù)選框，名稱(chēng)必須相同
對(duì)于單選按鈕：一組中的單選按鈕，最多只能有一個(gè)被選中
2、checked
設(shè)置默認(rèn)被選中
3、按鈕
1、提交按鈕
功能固定化，負(fù)責(zé)將表中中的表單控件提交給服務(wù)器
<input type="submit">
2、重置按鈕
功能固定化，負(fù)責(zé)將所有表單控件的值恢復(fù)為初始值
<input type="reset">
3、普通按鈕
無(wú)功能，執(zhí)行客戶(hù)端的腳本(JS)
<input type="button">
屬性：
1、name
縮寫(xiě)：btn
2、value
按鈕上的顯示文本
4、隱藏域 和 文件選擇框
1、隱藏域
不希望被用戶(hù)看見(jiàn)，但是要提交給服務(wù)器的信息
<input type="hidden">
name ：txt+功能名稱(chēng)
value ：值
2、文件選擇框
上傳文件所用
<input type="file">
name : txt+功能名稱(chēng)
3、textarea - 多行文本域
作用：允許用戶(hù)錄入多行數(shù)據(jù)到表單控件中
語(yǔ)法：<textarea></textarea>
屬性：
1、name
縮寫(xiě)：txt+功能名稱(chēng)
2、readonly
只讀
3、cols
指定文本區(qū)域的列數(shù), 變相設(shè)置當(dāng)前元素寬度
4、rows
指定文本區(qū)域的行數(shù)，變相設(shè)置當(dāng)前元素高度
4、選項(xiàng)框
1、分類(lèi)
1、下拉選項(xiàng)框
2、滾動(dòng)列表
2、語(yǔ)法
1 、<select></select> 創(chuàng)建選項(xiàng)框
屬性：
1、name
縮寫(xiě)：sel+功能名稱(chēng)
2、size
取值 大于1的話，則為滾動(dòng)列表
否則就是下拉選項(xiàng)框
3、multiple
設(shè)置多選,該屬性出現(xiàn)在 <select>中，那么就允許多選(針對(duì)滾動(dòng)列表)
2、<option>顯示文本</option> 選項(xiàng)
屬性：
1、value
選項(xiàng)的值
2、selected
預(yù)選中
注意：如果不設(shè)置selected屬性的話，那么選項(xiàng)框中的第一項(xiàng)會(huì)默認(rèn)被選中。
5、其他元素
1、為控件分組
<fieldset></fieldset> : 為控件分組
<legend></legend> : 為分組指定一個(gè)標(biāo)題
2、<label> 元素
功能：關(guān)聯(lián) 文本 與表達(dá)元素的，點(diǎn)擊文本時(shí)，如同點(diǎn)擊表單元素一樣
語(yǔ)法：
<label>文本</label>
屬性：
for ：表示與該label相關(guān)聯(lián)的表單控件元素的ID值
<input id="man" name="sex" value="男"><label for="man">男</label></input>
4、其他常用標(biāo)記
1、浮動(dòng)框架
1、作用
可以在一個(gè)瀏覽器窗口中同時(shí)顯示多個(gè)頁(yè)面文檔
2、語(yǔ)法
<iframe>內(nèi)容</iframe>
內(nèi)容：當(dāng)瀏覽器不支持<iframe>元素時(shí)，將顯示該文本作為描述信息
屬性：
1、src
要引入頁(yè)面的URL
2、width
3、height
4、frameborder
浮動(dòng)框架的邊框，如果不想要，可以設(shè)置為 0
3、注意
該標(biāo)簽，主要針對(duì)的是 靜態(tài)頁(yè)面的引入
動(dòng)態(tài)頁(yè)面中 有專(zhuān)門(mén) 引入頁(yè)面的方式
2、摘要與細(xì)節(jié)
1、作用
允許用戶(hù)對(duì)某些信息進(jìn)行展開(kāi)和收縮
2、語(yǔ)法
<details></details> 用于定義細(xì)節(jié)
<summary></summary> 用于定義細(xì)節(jié)中的標(biāo)題
3、度量元素
1、作用
定義一個(gè)度量衡
2、語(yǔ)法
<meter>文本</meter>
屬性：
1、min ：定義度量范圍的最小值，默認(rèn)為0
2、max ：定義度量范圍的最大值，默認(rèn)為1，一般情況下，將max值設(shè)置為 100
3、value ：度量值，顯示在度量元素上的數(shù)值，默認(rèn)為0
4、時(shí)間元素
1、作用
用于關(guān)聯(lián)時(shí)間的不同表現(xiàn)形式
2、語(yǔ)法
<time>文本</time>
屬性：
datetime ：文本所對(duì)應(yīng)的 日期時(shí)間，如果日期和時(shí)間同時(shí)設(shè)置的話，日期和時(shí)間之間用“T”分割
5、高亮文本顯示
1、作用
以突出背景顏色的方式顯示文本
2、語(yǔ)法
<mark>文本</mark>
下面是案例代碼的效果圖，源文件已經(jīng)上傳到附件了，有需要的小伙伴可以自行下載
下面是案例代碼的效果圖，源文件已經(jīng)上傳到附件了，有需要的小伙伴可以自行下載
