1. 程式人生 > >HTML表單控制元件的集合

HTML表單控制元件的集合

   


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>好好學習天天向上</title>
</head>
<body>
	使用者名稱:<input type="text" value ="使用者名稱"/><!--這是一個文字框--><br/>
	 密碼:<input type="password" maxlength="6"/> <!-- 這是一個密碼框 ctrl+/ maxlength密碼的最大長度 --><br />
	 性別: <input type="radio" name ="sex" />  女 <input type="radio" name ="sex" />  男 <input type="radio" name ="sex" checkd ="checked" />  人妖
	 <input type="radio" name ="sex1" />  未知<!-- 單選框 如果是一組通過相同的name值來實現 sex與sex1名不一樣,所以能選兩個--><br />
	 愛好:<input type ="checkbox" name="hobby" checkd ="checked" />足球 <input type ="checkbox" name="hobby" />籃球 <input type ="checkbox" name="hobby" />排球  <!-- 複選框 可以同時選多個 checkd ="checked"為預設--><br />
	 搜尋:<input type="button" value="搜尋啥">  <!-- 普通按鈕 --><br />
	 <input type="submit" value="提交表單"/> <!-- 提交按鈕 -->
	 <input type="reset" value="重置表單"/> <!-- 重置按鈕 --><br />
	 <input type="image" src="ta.jpg"/> <!-- 
	 影象按鈕 --><br />
	 上傳頭像:<input type="file" /> <!-- 檔案按鈕 -->
</body>
</html>

input控制元件:<input />為單標籤。type為最基本的屬性。

                      type:text(屬性值)  單行文字輸入框

                                  Password      密碼輸入框

                                  Radio            單選按鈕

                                  Checkbox      複選框

                                   Button          普通按鈕

                                   Submit         提交按鈕

                                   Reset           重置按鈕

                                   Image           影象形式的提交按鈕

                                   File               檔案域

                     Name:由使用者自定義   控制元件的名稱

                     Value:由使用者自定義  input控制元件中的預設文字值

                     Size:正整數       input控制元件中在頁面中的顯示寬度

                     Checked:checked     定義選擇控制元件預設被選中的項

                     Maxlength:正整數    控制允許輸入的最多字元數