Skip to content

Latest commit

 

History

History
67 lines (57 loc) · 2.14 KB

表單標籤.md

File metadata and controls

67 lines (57 loc) · 2.14 KB
Raw

表單標籤

form 標籤

  • 表單標籤為最常用的標籤之一，用於與服務器端交互。

  • input 標籤: 輸入標籤，接收用戶輸入信息。

  • type: 表單屬性 text: 可輸入明文內容。 password: 可輸入非明文內容。如: 密碼 radio: 單選框 checkbox: 複選框 file: 選擇本地檔案 image: 放置圖片，也有提交數據的功能。 hidden: 隱藏組件，數據不需要客戶端知道，但是可以將其提交至服務端。 button: 按鈕 reset: 重置表單狀態 submit: 提交

  • name: 鍵。 注意: 如名字相同，則可歸類於同一組。如:單選框在一組中只能選一個。

  • value: 賦值給鍵。 注意: 如果要給服務端提交數據，表單中的組件必須有 name 和 value 屬性。用於給服務端獲取數據。

  • checked: 可操作默認內容。

  • select標籤: 下拉菜單

  • option 標籤: 菜單選項 selected: 默認選項

  • textarea 標籤: 文本框

Example

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	<form>
		Text <input type="text" name="Text"><br>
		Password <input type="password" name="Password"><br>
		Sex <input type="radio" name="sex" value="Male">M <input type="radio" name="sex" checked="checked" value="Female">F<br>
		Tech <input type="checkbox" name="Java">Java
			 <input type="checkbox" name="C++">C++
		     <input type="checkbox" name="C">C<br>
		File <input type="file" name="file" value="File"><br>
		Picture <input type="image" src="Image\1.jpg" height="100" width="100"><br>
		Hidden icon <input type="hidden" name="key" value="Key"><br>
		Button <input type="button" value="Button" onclick="alert('Im a button')"><br>

		Country
		<select name="country">
			<option value="none">--Choose your country--</option>
			<option value="China" selected="selected">China</option>
			<option value="USA">USA</option>
			<option value="UK">UK</option>
		</select><br>

		<textarea name="text"></textarea><br>

		<input type="reset" value="Reset"> <input type="submit" value="Submit">
	</form>	

</body>
</html>