HTML標簽學習總結
文本輸入框，密碼輸入框：
當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。
語法：
<form/>
<input type="text/password" name="名稱" value="文本"/>
</form>
1:type:
當type=text時：輸入框為文本輸入框
當type=password時：輸入框為密碼輸入框
2:name：為文本框命名，以備後臺程序ASP,PHP使用
3:value：為文本輸入框設置默認值(一般起到提示作用)
舉例：
<form/>
姓名:
<input type="text" name="myName"/>
<br/>
密碼:
<input type="password" name="pass"/>
</form>
文本域，支持多行輸入
當用戶在表單中需要輸入大段文字時，需要用到文本輸入域
語法：
<textarea rows="行數" cols="列數"> 文本</textarea>
1:<textarea>標簽是成對出現的,以<textarea>開頭,以</textarea>結尾
2:cols:多行輸入域的列數
3:rows：多行輸入域的行數
4:在<textarea>和</textarea>標簽之間可以輸入默認值
舉例：
<form method="post" action="save.php"> <label>xxxxx</label> <textarea cols="50" rows="50">XXXXXX<／textarea></form>
註意這兩個屬性可用css樣式的width和height來代替；使用width代替col，使用height代替row
使用單選框，復選框讓用戶選擇
在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區別是單選框中的選項用戶只能選擇一項，而復選框
語法：
<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”時，該選項被默認選中
舉例：
<form name="iForm" method="post" action="save.php">
你是否喜歡旅遊?<br/>
<input type="radio" name="radiolove" value="喜歡" checked="checked">喜歡
<input type="radio" name="radiolove" value="不喜歡"> 不喜歡
<input type="radio" name="radiolove" value="無所謂"> 無所謂
<br/> <br/>
你對哪些運動感興趣？ <br/>
<input type="checkbox" name="checkbox1" value="跑步"> 跑步
<input type="checkbox" name="checkbox2" value="打球" checked="checked"> 打球
<input type="checkbox" name="checkbox3" value="登山" checked="checked">登山
<input type="checkbox" name="checkbox4" value="健身" >健身
</form>
註意:同一組的單選按鈕，name 取值一定要一致，比如上面例子為同一個名稱“radioLove”，這樣同一組的單選按鈕才可以起到單選的作用。
使用下拉列表框，節省空間
下拉列表在網頁中也常會用到，它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼：
<form name="iForm>
<label> 愛好:</label>
<select>
<option value="讀書">讀書</option>
<option value="運動">運動</option>
<option value="音樂">音樂</option>
<option value="旅遊">旅遊</option>
<option value="購買" selected ="selected">購物</option>
<select/>
</form>
講解:
<option value="提交值">選項</option>
1:value
2:selected="selected":設置selected="selected"屬性，則該選項就被默認選中
使用下拉列表框進行多選
下拉列表也可以進行多選操作，在<select>標簽中設置multiple="multiple"屬性，就可以實現多選功能，在 widows 操作系統下，進行多選時按下Ctrl鍵同時進行單擊（在 Mac下使用 Command +單擊），可以選擇多個選項。如下代碼：
<form name="iForm">
<label>愛好:</label>
<select multiple="multiple">
<option value="讀書">讀書</option>
<option value="運動">運動</option>
<option value="音樂">音樂</option>
<option value="旅遊">旅遊</option>
<option value="購物">購物</option>
</select>
</form>
使用提交按鈕，提交數據
在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕
語法：
<input type="submit" value="提交">
type:只有當type值設置為submit時，提交按鈕才有提交作用‘
value:按鈕上顯示的文字
舉例:
<form method="post" action="save.php">
<label for="myname"> 姓名:</label>
<input type="text" value="" name="myname"/>
<input type="submit" value="提交" name="submitBtn"/>
</form>
使用重置按鈕，重置表單信息
當用戶需要重置表單信息到初始時的狀態時，比如用戶輸入“用戶名”後，發現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以
語法:
<input type="reset" value="重置">
type:只有當type值設置為reset時，按鈕才起作用
value:按鈕上顯示的文字
<form method="post" action="save.php">
<label for="myName">姓名:</label>
<input type="text" value="" name="myName"/>
<input type="reset" value="重置" name="resetBtn"/>
</form>
form表單中的label標簽
label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。
語法：
<label for="控件id名稱">
註意：標簽的for屬性中的值應當與相關控件的id屬性值一定要相同
舉例:
<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>
HTML標簽學習總結