html學習日記part08

　　用表單與用戶交互

　　<form></form>

　　文本輸入框、密碼輸入框

　　<form>

　　<input type="text/password" name="名稱" value="文本" />

　　</form>

1、type：

   當type="text"時，輸入框爲文本輸入框;

   當type="password"時, 輸入框爲密碼輸入框。

2、name：爲文本框命名，以備後臺程序ASP 、PHP使用。

3、value：爲文本輸入框設置默認值。(一般起到提示作用)

文本域，支持多行文本輸入

<textarea  rows="行數" cols="列數">文本</textarea>

1、<textarea>標籤是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標籤之間可以輸入默認值。

使用單選框、複選框，讓用戶選擇

<input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

1、type:

   當 type="radio" 時，控件爲單選框

   當 type="checkbox" 時，控件爲複選框

2、value：提交數據到服務器的值（後臺程序PHP使用）

3、name：爲控件命名，以備後臺程序 ASP、PHP 使用

4、checked：當設置 checked="checked" 時，該選項被默認選中

同一組的單選按鈕，name 取值一定要一致，比如上面例子爲同一個名稱“radioLove”，這樣同一組的單選按鈕纔可以起到單選的作用。

使用下拉列表框，節省空間

<select>

　　<option value="提交值">顯示值</option>

　　....

　　<option value="提交值" selected= "selected">顯示值</option>

</select>

selected="selected"：

設置selected="selected"屬性，則該選項就被默認選中。

　　在<select>標籤中設置multiple="multiple"屬性，就可以實現多選功能

 

使用提交按鈕，提交數據

<input   type="submit"   value="提交">

type：只有當type值設置爲submit時，按鈕纔有提交作用

value：按鈕上顯示的文字

使用重置按鈕，重置表單信息

<input type="reset" value="重置">

type：只有當type值設置爲reset時，按鈕纔有重置作用

value：按鈕上顯示的文字

 

form表單中的label標籤

label標籤不會向用戶呈現任何特殊效果，它的作用是爲鼠標用戶改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件上（就自動選中和該label標籤相關連的表單控件上）。

<label for="控件id名稱">

你對什麼運動感興趣：<br />
<label for="jog">慢跑</label>
<input type="checkbox" name="checkbox1" id="jog">
<br />
<label for="climb">爬山</label>
<input type="checkbox" name="checkbox2" id="climb">
<br />
<label for="basketball">籃球</label>
<input type="checkbox" name="checkbox3" id="basketball">
<br />