表單元素是允許用戶在表單中(比如:文本域、下拉列表、單選框、復(fù)選框等等)輸入信息的元素。
表單是怎么工作的?
當(dāng)你在網(wǎng)頁把數(shù)據(jù)填入表單,并提交以后,瀏覽器會把表單里的所有數(shù)據(jù)打包好,發(fā)送給指定地址的服務(wù)器。
表單數(shù)據(jù)被服務(wù)器接收后,經(jīng)過某些腳本語言(比如c++,PHP,python等)作用后,生成新的XHTML網(wǎng)頁,被服務(wù)器返回給瀏覽器,瀏覽器接收后,在窗口呈現(xiàn)出來。
<form>標(biāo)簽里的屬性。
action屬性的值包括幾部分:①是服務(wù)器的URL地址。②是腳本文件所在的文件夾及文件名。method屬性定義表單數(shù)據(jù)被上傳到服務(wù)器的方式,一般是“POST“,還有一種是”GET”
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽(<input>)。<input> 是內(nèi)聯(lián)元素,不能自動還行,所以要用的<br> 元素進行換行。??
輸入類型是由類型屬性(type)定義的。大多數(shù)經(jīng)常被用到的輸入類型如下:
1,text input(文本輸入):這個適合比較短的文本輸入
type="text"表示表單內(nèi)輸入內(nèi)容區(qū)域是一個框框,可以輸入文本。你也可以加入別的屬性限制輸入框的寬度和輸入文字的最大長度。可以用maxlength="100"
2,submit input
type="submit"創(chuàng)建了一個按鈕,當(dāng)你點擊這個按鈕,就把表單的內(nèi)容上傳出去了
上圖用紅線圈出來的內(nèi)容就是value屬性的值”order now “。如果沒有value屬性,默認(rèn)為value="submit"
3,radio input
type="radio"也創(chuàng)建了按鈕,每個按鈕代表了一個選項。但是是單選。每個選項都要有一個input元素
每個按鈕的的name屬性的值相同,value屬性的值不同
4,checkbox input
type="checkbox"創(chuàng)建了選項框,每個框代表一個選項,可多選。
可以用Boolean屬性:checked,表示某選項默認(rèn)必須。
5,number input,date input,url input,trl input,email input, color input,range input,file input等
6,password input
對輸入的內(nèi)容加密
每個<input>元素都有不同的name屬性值
其他輸入標(biāo)簽
1,<textarea>標(biāo)簽:適合比較長的文本輸入。
開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容就是要輸入到表單文本里的內(nèi)容。不能用HTML控制用戶輸入的字?jǐn)?shù)
2,<select>標(biāo)簽
<select>標(biāo)簽創(chuàng)建了一個帶有選項的菜單,一個<option>元素代表一個選項。
<select>元素內(nèi)要有name屬性,option不用
關(guān)于表單里的name
表單里標(biāo)簽的name和value很重要,因為瀏覽器在打包表單數(shù)據(jù)的時候,是將每個表單元素的name和value屬性值打包起來,通過name值=value值的形式傳遞給服務(wù)器。
服務(wù)器接收到的數(shù)據(jù)是一系列的name=value對,接收到的每個name值都是唯一的.
name的命名是否有效,要取決于腳本語言。
value的值:標(biāo)簽內(nèi)有。元素內(nèi)如果沒有,那就是輸入表單的內(nèi)容
<label> 標(biāo)簽為 input 元素定義標(biāo)注(標(biāo)記)。
label 元素不會向用戶呈現(xiàn)任何特殊效果。不過,它為鼠標(biāo)用戶改進了可用性。如果在 label 元素內(nèi)點擊文本,就會觸發(fā)此控件。就是說,當(dāng)用戶選擇該標(biāo)簽時,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
<label>元素的位置不重要,只要<label> 標(biāo)簽的 for 屬性相關(guān)<input>元素的 id 屬性相同就行。
<fieldset>和<legend>標(biāo)簽
呈現(xiàn)效果
placeholder和required屬性
placeholder屬性提示用戶輸入文本的樣式,打了個樣。如果用戶沒有在表單輸入,這個屬性的值不會傳給服務(wù)器
required是Boolean屬性,表示為必填項,如果沒填,會出現(xiàn)要求輸入字段的提示。