表單用于向服務(wù)器傳輸數(shù)據(jù)
<form>標(biāo)簽用于把表單里的數(shù)據(jù)上傳到指定的位置。
form中常用的屬性及用途:
<pre>
action 確定表單上傳到的地址,值是URL。
methond 確定表單數(shù)據(jù)上傳的方式,有g(shù)et/post兩種方式。
name 給表單分類,不在瀏覽器上顯示。
</pre>
tips:form是塊級元素,前后有拆行。
form中包含的其他標(biāo)簽
1.<lable>標(biāo)簽用于對input元素進行標(biāo)注。
tips:<label> 標(biāo)簽的 for 屬性應(yīng)當(dāng)與相關(guān)元素的 id 屬性相同,當(dāng)id設(shè)置后單擊<lable>標(biāo)簽內(nèi)的文本,瀏覽器就會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上。
如text屬性中的示例中點擊姓名和點擊文本框都會直接使文本框進入輸入的狀態(tài)。
2.<input>標(biāo)簽用于搜集用戶信息。根據(jù)不同的type屬性值,輸入字段擁有很多種形式。
屬性值:
name 對input分類
<pre>
text 定義單行的輸入字段,用戶可在其中輸入文本。默認寬度為20個字符。
<label for="username">姓名:</label>
<input id="username" type="text" name="username" />
</pre>顯示效果:
username.PNG
<pre>
password 定義密碼字段。帶字段中的字符被掩碼。
<input id="password" type="password" name="password">
</pre>顯示效果:
password.PNG
<pre>
checkbox 定義復(fù)選按鈕。
<label>愛好:</label>
<input type="checkbox" name="hobby" value="dota">dota
<input type="checkbox" name="hobby" value="tour">旅游
<input type="checkbox" name="hobby" value="pet">寵物
</pre>顯示效果:
愛好.PNG
<pre>
radio 定義單選按鈕。
<label>性別:</label>
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女
</pre>顯示效果“”
性別.PNG
<pre>
file 定義輸入字段和“瀏覽”按鈕,供文件上傳。
image 定義圖像形式的提交按鈕。
submit 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器。
reset 定義重置按鈕。重置按鈕會清除表單中的所有數(shù)據(jù)。
button 定義可點擊按鈕(多數(shù)情況下,用于通過 JavaScript 啟動腳本)。
hidden 定義隱藏的輸入字段。(不在瀏覽器上顯示)
</pre>
3.option
potion需要套在select標(biāo)簽中使用,創(chuàng)建下拉列表框。
<pre>
<label>我的cars:</label>
<select name="mycar" id="mycar">
<option value="SAAB">薩博</option>
<option value="Volvo">沃爾沃</option>
</select>
</pre>顯示效果:
下拉列表.PNG