該做項目了,但發現自己的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="提交">
<input type="reset" value="重置">
</td>
</tr>
</form>
</table>
</center>
</body>
</html>