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標簽學習總結