表單元素
表單是什么昧碉?——表單不是表格埃脏。
用戶可以在其中提供一定的數(shù)據(jù)或信息或選項(xiàng)的一些html元素鸥跟。表單通常有一個(gè)“提交”按鈕丢郊,然后可以將這些數(shù)據(jù)據(jù)/信息/選項(xiàng)提供給服務(wù)器上的程序使用——數(shù)據(jù)處理。
——表單的核心是數(shù)據(jù)医咨。
表單標(biāo)簽的構(gòu)成和形式:
<form? name=”form1” action=”將本表單中的數(shù)據(jù)提交給的對(duì)象(是一個(gè)php文件名而已)”? method=”post”>
第一個(gè)表單項(xiàng)
第二個(gè)表單項(xiàng)
枫匾。。拟淮。干茉。。很泊。角虫。
</form>
到底有哪些表單項(xiàng)?
單行文本框:<input type=”text” name=”n1” />
其他屬性:
value:設(shè)定其中的初始文字
size:設(shè)置其輸入框的寬度(單位是“字符寬”)——其中能放置該數(shù)量的字符
maxlength:設(shè)置該輸入框最多能輸入的字符個(gè)數(shù)
readonly:這是一個(gè)“無值”屬性委造,表示“只讀”戳鹅,則寫法是:readonly=”readonly”
disable: 設(shè)置該輸入框“無效”,即數(shù)據(jù)無效昏兆。
密碼框:<input type=”password” name=”n2” />
其他屬性:
value:設(shè)定其中的初始文字
size:設(shè)置其輸入框的寬度(單位是“字符寬”)——其中能放置該數(shù)量的字符
maxlength:設(shè)置該輸入框最多能輸入的字符個(gè)數(shù)
單選項(xiàng):<input type=”radio” name=”n3” value=”某個(gè)值” />
說明:?jiǎn)芜x項(xiàng)通常必須有value值枫虏;
其他屬性:
checked: 表示該選項(xiàng)默認(rèn)是選中的狀態(tài)。也是一個(gè)“無值屬性”
name特別說明:一組的單選項(xiàng)要求name值必須相同爬虱。
多選項(xiàng):<input type=”checkbox” name=”n4” value=”某值” />
說明:多選項(xiàng)通常必須有value值隶债;
其他屬性:
checked: 表示該選項(xiàng)默認(rèn)是選中的狀態(tài)。也是一個(gè)“無值屬性”
提交按鈕:<input type=”submit” name=”n5” value=”提交文字” />
說明:點(diǎn)擊提交按鈕跑筝,則表單就會(huì)“被提交”死讹,即數(shù)據(jù)會(huì)傳入到表單的action所設(shè)定的文件中去。
圖片按鈕:<input type=”image” name=”n6” src=”圖片地址” />
說明:圖片按鈕的功能其實(shí)也是“提交”继蜡,但其顯示出來的效果是一張圖片——這樣有利于美化頁面回俐。
重置按鈕:<input type=”reset” name=”n7” value=”重置文字” />
說明:會(huì)將表單的所有用戶填寫或選擇的數(shù)據(jù)恢復(fù)到初始狀態(tài)
普通按鈕:<input type=”button” name=”n8” value=”文字” />
說明:對(duì)表單沒有影響,但可以從中產(chǎn)生“動(dòng)作”以實(shí)現(xiàn)其他要求(js程序)
文件域:<input type=”file” name=”n9” />
說明:可以讓用戶選擇本地的文件(并發(fā)送到服務(wù)器)——文件也是數(shù)據(jù)稀并。
隱藏域:<input type=”hidden” name=”n10” />
說明:界面上不可見仅颇,但是作為一份“隱藏的數(shù)據(jù)”提交給服務(wù)器——編程所需。
下拉選擇:使用select和option標(biāo)簽配合實(shí)現(xiàn)碘举。但要把此當(dāng)作“一個(gè)表單項(xiàng)”
<select name=”n11” multiple=” multiple” >
<option value=”1” >文字1</option>
<option value=”2” selected=”selected” >文字2</option>
<option value=”3” >文字3</option>
………………….
</select>
說明:
option標(biāo)簽上可以使用selected屬性忘瓦,表明該select元素的默認(rèn)選中的項(xiàng)(默認(rèn)是第一項(xiàng)被選中)。
select標(biāo)簽上可以使用multiple屬性,使該select元素可以“選擇多項(xiàng)”(即默認(rèn)只能選一個(gè))
多行選項(xiàng)(也叫列表選項(xiàng)):多行選項(xiàng)其實(shí)只是下拉選擇的一種“變形”——設(shè)置其size值大于等于就會(huì)成多行耕皮。
<select name=”n12” size=”4”>
<option value=”1” >文字1</option>
<option value=”2” >文字2</option>
<option value=”3” >文字3</option>
………………….
</select>
多行文本框:
<textarea name=”n13” rows=”行數(shù)”? cols=”列數(shù)”></textarea>
說明:
rows設(shè)定的行數(shù)是一個(gè)數(shù)字境蜕,表示該多行文本框可以顯示的文字的行數(shù)
cols設(shè)定的列數(shù)是一個(gè)數(shù)字,表示該多行文本框可以顯示的一行文字中個(gè)數(shù)
此標(biāo)簽沒有value屬性凌停。但其實(shí)際的“值”是放在此標(biāo)簽中間的所有內(nèi)容粱年。
注意:表單項(xiàng)都必須有name屬性,以表明其“名字”——服務(wù)器取其中的數(shù)據(jù)就是憑此名字罚拟。
將文字和選項(xiàng)綁為一體<label>.............................</label>