慕課網(wǎng): HTML+CSS基礎(chǔ)課程
網(wǎng)站怎樣與用戶進(jìn)行交互诬像？
答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端脖咐，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)断箫。
語法:
<form method="傳送方式" action="服務(wù)器文件">
講解：
- <form> ：<form>標(biāo)簽是成對出現(xiàn)的，以<form>開始澳淑，以</form>結(jié)束比原。
- action ：瀏覽者輸入的數(shù)據(jù)被傳送到的地方,比如一個(gè)PHP頁面(save.php)。
- method ： 數(shù)據(jù)傳送的方式（get/post）杠巡。
<form method="post" action="save.php">
<label for="username">用戶名:</label>
<input type="text" name="username" />
<label for="pass">密碼:</label>
<input type="password" name="pass" />
</form>
注意:
1量窘、所有表單控件（文本框、文本域忽孽、按鈕绑改、單選框谢床、復(fù)選框等）都必須放在 <form></form> 標(biāo)簽之間（否則用戶輸入的信息可提交不到服務(wù)器上哦！）厘线。
- <h4>1. 文本輸入框, 密碼輸入框
<input>標(biāo)簽</h4>
語法
<form>
<input type="text/password" name="名稱" value="文本" />
</form>
- type：
當(dāng)type="text"時(shí)识腿，輸入框?yàn)槲谋据斎肟?
當(dāng)type="password"時(shí), 輸入框?yàn)槊艽a輸入框。
- name：為文本框命名造壮，以備后臺(tái)程序ASP 渡讼、PHP使用。
- value：為文本輸入框設(shè)置默認(rèn)值耳璧。(一般起到提示作用)
舉例
<form>
姓名：
<input type="text" name="myName">
<br/>
密碼：
<input type="password" name="pass">
</form>
- <h4>2. 文本域成箫，支持多行文本輸入
<textarea>標(biāo)簽</h4>
語法
<textarea rows="行數(shù)" cols="列數(shù)">文本</textarea>
// rows 可以用 css中的height替代 , cols可以用css中的width替代.
- <textarea>標(biāo)簽是成對出現(xiàn)的，以<textarea>開始旨枯，以</textarea>結(jié)束蹬昌。
- cols ：多行輸入域的列數(shù)。
- rows ：多行輸入域的行數(shù)攀隔。
- 在<textarea></textarea>標(biāo)簽之間可以輸入默認(rèn)值皂贩。
舉例
<form method="post" action="save.php">
<label>聯(lián)系我們</label>
<textarea cols="50" rows="10" >在這里輸入內(nèi)容...</textarea>
</form>
- <h4>3. 使用單選框、復(fù)選框</h4>
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
- type:
當(dāng) type="radio" 時(shí)昆汹，控件為單選框
當(dāng) type="checkbox" 時(shí)明刷，控件為復(fù)選框
- value：提交數(shù)據(jù)到服務(wù)器的值（后臺(tái)程序PHP使用）
- name：為控件命名，以備后臺(tái)程序 ASP满粗、PHP 使用
- checked：當(dāng)設(shè)置 checked="checked" 時(shí)辈末，該選項(xiàng)被默認(rèn)選中
注意 : 同一組的單選按鈕，name 取值一定要一致映皆，比如上面例子為同一個(gè)名稱“radioLove”挤聘，這樣同一組的單選按鈕才可以起到單選的作用。
- <h4>4. 下拉選擇框</h4>
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅游">旅游</option>
<option value="運(yùn)動(dòng)">運(yùn)動(dòng)</option>
<option value="購物">購物</option>
</select>
</form>
可以進(jìn)行默認(rèn)選中和多選的操作
- 設(shè)置selected="selected"屬性劫扒，則該選項(xiàng)就被默認(rèn)選中檬洞。
下拉列表也可以進(jìn)行多選操作，在<select>標(biāo)簽中設(shè)置multiple="multiple"屬性沟饥，就可以實(shí)現(xiàn)多選功能添怔，在 windows 操作系統(tǒng)下，進(jìn)行多選時(shí)按下Ctrl鍵同時(shí)進(jìn)行單擊（在 Mac下使用 Command +單擊）贤旷，可以選擇多個(gè)選項(xiàng)广料。
-
<h4>5. 表單提交 重置按鈕</h4>
- 提交按鈕
<input type="submit" value="提交">
type：只有當(dāng)type值設(shè)置為submit時(shí)，按鈕才有提交作用
value: 按鈕顯示的文字
- 重置按鈕
<input type="reset" value="重置">
type：只有當(dāng)type值設(shè)置為reset時(shí)幼驶，按鈕才有重置作用
value: 按鈕顯示的文字
- <h4>6. label</h4>
label標(biāo)簽不會(huì)向用戶呈現(xiàn)任何特殊效果艾杏，它的作用是為鼠標(biāo)用戶改進(jìn)了可用性。如果你在 label 標(biāo)簽內(nèi)點(diǎn)擊文本盅藻，就會(huì)觸發(fā)此控件购桑。就是說畅铭，當(dāng)用戶單擊選中該label標(biāo)簽時(shí)，瀏覽器就會(huì)自動(dòng)將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上（就自動(dòng)選中和該label標(biāo)簽相關(guān)連的表單控件上）勃蜘。
語法 :
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
注意：標(biāo)簽的 for 屬性中的值應(yīng)當(dāng)與相關(guān)控件的 id 屬性值一定要相同
