演示地址
http://xuanransoftware.com/phpStudy/0404/
圖片展示
課后總結(jié)
- 表單是網(wǎng)頁中最常見的與用戶進(jìn)行數(shù)據(jù)交互的元素
- 表單中用戶填寫的數(shù)據(jù)一般需要提交到后臺的php文件中進(jìn)行處理或保存在數(shù)據(jù)庫中
表單與控件元素
[ toc ]
- 表單分為表單元素與控件元素二部分
- 表單元素僅一個:
<form> - 表單控件元素,根據(jù)類型不同,有多個
1.1 常用屬性
| 序號 |
屬性 |
描述 |
| 1 |
action |
表單提交的 URL 地址(處理表單請求的腳本) |
| 2 |
method |
表單提交類型:GET/POST |
| 3 |
enctype |
設(shè)置表單提交數(shù)據(jù)的編碼方式 |
| 4 |
name |
表單唯一名稱,與 ID 同義 |
| 5 |
target |
打開請求 URL 的方式,如果_blank |
1.2 請求類型method
- web 請求方式有二種: 超鏈接與表單提交
- 超鏈接就是使用
<a>標(biāo)簽發(fā)起請求,其實(shí)就是GET請求 - 表單提交默認(rèn)就是
GET請求,但例用最多的是POST - 請求類型屬性
action的取值
| 序號 |
允許值 |
描述 |
| 1 |
GET |
默認(rèn)值,表單數(shù)據(jù)以請求參數(shù)形式通過 URL 提交, 數(shù)據(jù)量最大 2K |
| 2 |
POST |
表單數(shù)據(jù)放在請求體中發(fā)送,數(shù)據(jù)量更大也更安全 |
1.3 編碼方式enctype
| 序號 |
允許值 |
適用場景 |
描述 |
| 1 |
application/x-www-form-urlencoded |
接收value值 |
默認(rèn)值,使用 URL 編碼,GET/POST 均適合 |
| 2 |
multipart/form-data |
文件上傳 |
采用二進(jìn)制流處理,會把文件域中的內(nèi)容封裝到請求參數(shù)中,適合 |
| 3 |
text/plain |
電子郵件 |
如action="mailto:URL |
1.4 表單名稱name
| 序號 |
功能 |
描述 |
| 1 |
標(biāo)識表單元素 |
與id一樣,用來唯一標(biāo)識該表單元素 |
| 2 |
綁定表單元素 |
用于表單控件元素的 form 屬性,用來綁定所屬表單 |
| 3 |
訪問表單元素 |
快捷訪問內(nèi)部控件元素,如form.input.value |
1.5 打開方式target
| 序號 |
允許值 |
描述 |
| 1 |
_self |
默認(rèn)值,當(dāng)前窗口打開提交的 URL |
| 2 |
_blank |
新窗口打開提交的 URL |
| 3 |
_parent |
父窗口打開提交的 URL |
| 4 |
_top |
頂層窗口打開提交的 URL |
2.1 常用屬性
| 序號 |
屬性 |
描述 |
| 1 |
type |
控件類型,如文本框, 復(fù)選框… |
| 2 |
name |
請求參數(shù)的名稱,對應(yīng)于腳本處理的變量名 |
| 3 |
value |
請求參數(shù)的值,對應(yīng)于腳本處理的變量值,使用預(yù)定義值控件無效 |
| 4 |
form |
控件所屬表單 |
| 5 |
placeholder |
僅 限輸入框text和password,輸入框的提示信息 |
| 6 |
list |
僅 限輸入框text和password,下拉框智能提示 |
| 7 |
autocomplate |
僅 限輸入框text和password,自動完成(歷史記錄) |
| 8 |
maxlength |
僅 限輸入框text/password, 允許輸入最大字符數(shù)量 |
| 9 |
checked |
僅 限單選框radio, 復(fù)選框checkbox(布爾屬性) |
| 10 |
readonly |
元素只讀,但通過 JavaScript 可修改(布爾屬性) |
| 11 |
disabled |
元素禁用,(布爾屬性) |
| 12 |
autofocus |
自動獲取焦點(diǎn),一個表單僅 限一個控件 |
| 13 |
src |
僅 限圖像域images, 圖像 URL 地址 |
| 14 |
width |
僅 限圖像域images, 圖像寬度 |
| 15 |
height |
僅 限圖像域images, 圖像高度 |
2.2 type類型
| 序號 |
類型 |
描述 |
| 1 |
<input type="text"> |
單行文本框 (默認(rèn)值) |
| 2 |
<input type="password"> |
密碼輸入框 |
| 3 |
<input type="radio"> |
單選框 |
| 4 |
<input type="checkbox"> |
復(fù)選框 |
| 5 |
<input type="image"> |
圖像域/提交表單 |
| 6 |
<input type="file"> |
文件上傳域 |
| 7 |
<input type="hidden"> |
隱藏域 |
| 序號 |
類型 |
描述 |
| 1 |
<input type="email"> |
電子郵件 |
| 2 |
<input type="data"> |
日期 |
| 2 |
<input type="data"> |
日期 |
| 4 |
<input type="datetime-local"> |
本地日期時間 |
| 5 |
<input type="tel"> |
電話號碼 |
| 6 |
<input type="url"> |
URL 地址 |
| 7 |
<input type="number"> |
數(shù)值 |
| 8 |
<input type="range"> |
范圍拖動條 |
| 9 |
<input type="search"> |
搜索框/移動 |
| 10 |
<input type="color"> |
拾色器 |
2.3 常用事件屬性
| 序號 |
事件屬性 |
描述 |
| 1 |
onfocus |
獲取焦點(diǎn)時觸發(fā) |
| 2 |
onblur |
失去焦點(diǎn)時觸發(fā) |
| 3 |
onchange |
失去焦點(diǎn),且值發(fā)生變化時觸發(fā) |
| 4 |
oninput |
值發(fā)生變化(不等失去焦點(diǎn))時觸發(fā) |
| 5 |
onkeydown |
按下鍵盤時觸發(fā) |
| 6 |
onkeyup |
抬起鍵盤時觸發(fā) |
| 7 |
onclick |
鼠標(biāo)單擊時觸發(fā) |
| 8 |
onselect |
選擇內(nèi)容文本時觸發(fā) |
3. 控件標(biāo)簽元素<label>
<label>元素沒有name和value屬性,不會創(chuàng)建請求參數(shù)- 它存在的意義就是關(guān)聯(lián)控件,當(dāng)點(diǎn)擊它時將焦點(diǎn)自動落在關(guān)聯(lián)控件內(nèi)部
- 語法:
<label for="關(guān)聯(lián)控件的id屬性值">(也支持三大通用屬性) <label>有二種方式與控件元素進(jìn)行關(guān)聯(lián)/綁定
| 序號 |
關(guān)聯(lián)方式 |
示例代碼 |
| 1 |
顯式關(guān)聯(lián) |
<label for="email">Email:</label><input type="email" id="email"> |
| 1 |
隱式關(guān)聯(lián) |
<label>Email:</label><input type="email"></label> |
推薦使用顯式關(guān)聯(lián), 案例參考<input>示例
| 序號 |
<button> |
替代的<input> |
| 1 |
<button type="...">按鈕文本</button> |
<input type="..." value="按鈕文本"> |
| 2 |
<button><img src="..."></button> |
<input type="image" src="...">圖像域 |
4.2 常用屬性
| 序號 |
屬性 |
描述 |
| 1 |
type |
必須使用預(yù)定義的submit, button, reset之一 |
| 2 |
name |
按鈕的唯一名稱,與 ID 等效 |
| 3 |
value |
按鈕文本初始值,可通過 JavaScript 修改 |
| 4 |
disabled |
禁用按鈕 |
| 5 |
form |
按鈕所屬表單(此時按鈕type默認(rèn)類型為submit提交) |
| 6 |
formaction |
設(shè)置不同按鈕可將表單數(shù)據(jù)提交到不同的 URL 處理 |
| 7 |
form*** |
動態(tài)設(shè)置<form>屬性值,如formmethod="GET" |
5. 下拉列表元素<select>
- 下拉列表使用
<select> + <optgroup> + <option>組合元素實(shí)現(xiàn) - 參數(shù)名
name定義在<select>中,參數(shù)值value,定義在<option>中
5.1 <select>屬性
| 序號 |
屬性 |
描述 |
| 1 |
name |
請求參數(shù)名稱/變量名 |
| 2 |
multiple |
是否允許多選(布爾屬性) |
| 3 |
size |
允許同時顯示的列表項(xiàng) |
| 3 |
disabled |
是否禁用(布爾屬性) |
5.2 <optgroup>屬性
5.3 <option>屬性
| 序號 |
屬性 |
描述 |
| 1 |
value |
請求參數(shù)的值 |
| 2 |
label |
默認(rèn)選項(xiàng)文本值 |
| 3 |
selected |
是否選中(布爾屬性) |
| 3 |
disabled |
是否禁用(布爾屬性) |
5.4 <select>事件屬性
| 序號 |
事件屬性 |
描述 |
| 1 |
onchange |
當(dāng)下拉列表選項(xiàng)值發(fā)生變化時才會觸發(fā) |
| 2 |
onclick |
只要點(diǎn)擊就會觸發(fā)(選項(xiàng)值可以不改變) |
5.5 示例
6. 多行文本域元素<textarea>
6.1 常用屬性
| 序號 |
屬性 |
描述 |
| 1 |
cols |
文本域可視寬度 |
| 2 |
rows |
文本域可輸入的行數(shù) |
| 3 |
name |
文本域參數(shù)名稱 |
| 4 |
form |
綁定所屬表單元素 |
| 5 |
minlength |
允許輸入最小字符長度 |
| 6 |
maxlength |
允許輸入最大字符長度 |
| 7 |
maxlength |
允許輸入最大字符長度 |
| 8 |
placeholder |
提示信息占位符 |
| 9 |
wrap |
換行方式:hard/soft默認(rèn) |
| 10 |
disabled |
禁用(布爾屬性) |
| 11 |
autofocus |
自動獲取焦點(diǎn)(布爾屬性) |
| 12 |
autocomplete |
自動完成(布爾屬性) |
6.2 事件屬性
| 序號 |
事件 |
描述 |
| 1 |
onclick |
點(diǎn)擊時觸發(fā) |
| 2 |
onchange |
文本被修改時觸發(fā) |
| 3 |
onselect |
文本被選中時觸發(fā) |
提示: <textarea>是雙標(biāo)簽,沒有value屬性,標(biāo)簽內(nèi)部的文本就是參數(shù)值
7. 表單域分組元素<fieldset>
- 當(dāng)表單字段非常多時,分組管理很有必要,例如將必填項(xiàng)與選填項(xiàng)分開
- 它只有一個子元素
<legend>,設(shè)置分組標(biāo)題
7.1 常用屬性
| 序號 |
屬性 |
描述 |
| 1 |
name |
分組名稱 |
| 2 |
form |
分組所屬表單,默認(rèn)是最近的表單 |
| 3 |
disabled |
禁用分組(布爾屬性) |
name,form屬性僅供參考,提交參數(shù)仍依賴內(nèi)部控件中的form屬性
8.內(nèi)聯(lián)框架
- html5 中只保留了內(nèi)聯(lián)框架元素
<iframe> - 常用屬性
| 屬性 |
描述 |
src |
框架中加載的頁面 URL |
srcdoc |
直接賦值 html 代碼 |
name |
框架名稱,與<a target=""配合 |
scrolling |
是否顯示滾動條, yes/no/auto |
width |
框架寬度 |
height |
框架高度 |
frameborder |
是否顯示框架邊框 |
marginheight |
設(shè)置框架上下外邊距 |
marginwidth |
設(shè)置框架左右外邊距 |
批改老師：
天蓬老師
批改狀態(tài)：合格
老師批語：并不是放個鏈接, 就可以不在作業(yè)中放代碼了, 并不是每個訪客都會點(diǎn)開鏈接的
收藏
技術(shù)交流群
