html後續補充之表單模塊

該做項目了,但發現自己的HTML表單掌握的並不是太理想,就又翻了翻書,根據書中的內容自己做了下總結,

第一部分:表單的類型劃分如下:

1.text屬性  用來定義文本信息,比較重要的屬性是name。

2.radio 單選按鈕,用來定義單選按鈕,例如性別的選擇等等,比較重要的屬性name(注意各個單選框屬性是相同的),value,爲了鑑別用戶選擇的是哪一個單選框而設置的值,換句話說就是傳入後臺的數據。

3.checkbox多選框,比較重要的屬性是名字name,因爲要傳遞多個值,所以要定義成數組的形式,value,傳入後臺的數值。

4.下拉菜單和前邊幾個不相同的是:這個是放在<select></select>中的<option>,比較重要的屬性:select裏的name屬性,option裏的value屬性。

5.提交按鈕    submit,比較重要的屬性:value屬性

6.重置按鈕    reset,比較重要的屬性:value屬性

8.文本行        textarea  ,比較重要的屬性rols寬,cols長

第二部分:

表格與菜單的關係及相關屬性

table 常用的屬性:

cellpadding:設置表格行間距

cellspacing:設置表格列間距

border:定義邊框

關於表格:

<td></td>屬性:

colspan:豎着佔幾個表格,跟數字

rolspan:橫着佔幾個表格,後跟數字

因爲表格有限定數據位置的作用,所以可以利用表格來進行佈局,具體請看3

第三部分

代碼:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
</head>
<body>
	<center>
		<h1>我的表單</h1>
		<hr/>
		<table border="0" cellpadding="10" cellspacing="10">
			<form action="test.php" method="post">
				<tr>
					<td>姓    名:</td>
					<td><input type="text" name="name"></td>
				</tr>
				<tr>
					<td>密碼輸入:</td>
					<td><input type="password" name="pwd"></td>
				</tr>
				<tr>
					<td>
						性    別:
					</td>
					<td>
						<input type="radio" name="sex" value="0">男
						<input type="radio" name="sex" value="1">女
					</td>
				</tr>
				<tr>
					<td>
						愛    好:
					</td>
					<td>
						<input type="checkbox" name="hobby[]" value="0">遊戲
						<input type="checkbox" name="hobby[]" value="1">看書
						<input type="checkbox" name="hobby[]" value="2">運動
					</td>
				</tr>
				<tr>
					<td>
						來    自:
					</td>
					<td>
						<select name="city">
							<option value="">--請選擇城市--</option>
							<option value="shanghai">上海</option>
							<option value="wuhan">湖北</option>
							<option value="henan">河南</option>
							<option value="hunan">湖南</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>個人簡介:</td>
					<td>
						<textarea rows="10" cols="30"></textarea>
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="reset" value="重置">
					</td>
				</tr>




			</form>
		
		</table>
	</center>

</body>
</html>

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章