02 HTML 表單標籤
By Kevin Song
- 02-01 < input>標籤
- 02-02 < select>標籤
- 02-03 表單格式化
< form>
< /form>
表單是最常用的標籤，用於與服務器端的交互
常用屬性
- action
- method
02-01 < input>標籤
< input type=”屬性值” />：輸入標籤，接受用戶輸入信息
type屬性的10個值
- text：文本框
- password：密碼框
- radio：單選框
- name：組名，同一組的只能選一個
- checked：默認選定
- checkbox：複選框
- reset：重置
- value：自定義按鈕名稱
- submit：提交
- value：自定義按鈕名稱
- file：選擇文件
- image：圖片超鏈接
- hidden：隱藏組件，數據不需要客戶端知道，但是可以將其提交到服務器端
- button：按鈕
- onclick：點擊觸發
如果要給服務器提交數據：表單中的組件必須有name和value屬性
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<form>
1. 輸入姓名：<input type="text" name="user" value="" /><br/>
2. 輸入密碼：<input type="password" name="pwd"/><br/>
3. 選擇性別：<input type="radio" name="gender" value="man"/>男<br/>
<input type="radio" name="gender" value="woman" checked="checked"/>女<br/>
4. 選擇技術：<input type="checkbox" name="tech" value="Java"/>Java<br/>
<input type="checkbox" name="tech" value="C++"/>C++<br/>
<input type="checkbox" name="tech" value="Python"/>Python<br/>
5. 選擇文件：<input type="file" name="file" value="" /><br/>
6. 圖片按鈕：<input type="image" src="11.jpg"><br/>
7. 隱藏組件：<input type="hidden" src="11.jpg"><br/>
8. 一個按鈕：<input type="button" value="按鈕" onclick="alert('愛你歐')"><br/>
<input type="reset" value="重置表單">
<input type="submit" value="提交表單">
</form>
</body>
</html>02-02 < select>標籤
下拉菜單
<select>
<option value="none">--選擇國家--</option>
<option value="USA">美國</option>
<option value="CN" selected="selected">中國</option>
<option value="KR">韓國</option>
</select>文本框
<textarea name="text"></textarea>02-03 表單格式化
<html>
<head>
<title>Kevin's Homepage</title>
</head>
<body>
<form action="http://www.baidu.com" method="get">
<table border="1" bordercolor="#00ffff">
<tr>
<thcolspan="2">註冊表單</th>
</tr>
<tr>
<td>用戶名稱</td>
<td><input type="text" name="user" value="" /></td>
</tr>
<tr>
<td>輸入密碼</td>
<td><input type="password" name="pwd"/></td>
</tr>
<tr>
<td>確認密碼</td>
<td><input type="password" name="repwd"/></td>
</tr>
<tr>
<td>選擇性別</td>
<td>
<input type="radio" name="gender" value="man" />男
<input type="radio" name="gender" value="woman" />女
</td>
</tr>
<tr>
<td>選擇技術</td>
<td>
<input type="checkbox" name="tech" value="Java"/>Java
<input type="checkbox" name="tech" value="C++"/>C++
<input type="checkbox" name="tech" value="Python"/>Python
</td>
</tr>
<tr>
<td>選擇國家</td>
<td>
<select name="country">
<option value="none">--選擇國家--</option>
<option value="USA">美國</option>
<option value="CN" selected="selected">中國</option>
<option value="KR">韓國</option>
</select>
</td>
</tr>
<tr>
<th colspan="2">
<input type="reset" value="重置表單">
<input type="submit" value="提交表單">
</th>
</tr>
</table>
</form>
</body>
</html>