在普通的WEB頁面中插入表單是如下的：這里將創建一個比較完整的表單, 將<form>中的元素和屬性全部基本全部都展示出來。
首先在HTML的<body></body>標記中添加一個<form>表單。大理石構件來圖加工
然后再<form>表單中添加一系列的表單元素和屬性。這里在表單的標記中給增加了一些CSS的樣式，這樣讓朋友們感官上看上去頁面更炫酷一些。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="index.php" method="post" name="form1" enctype="multipart/form-data">
<table width="400" border="1" cellpadding="1" bgcolor="#999999">
<tr bgcolor="#FFCC33">
<td width="103" height="25" align="right">姓名：</td>
<td height="25">
<input name="user" type="text" id="user" size="20" maxlength="100">
</td>
</tr>
<tr bgcolor="#FFCC33">
<td height="25" align="right">性別：</td>
<td height="25" colspan="2" align="left">
<input name="sex" type="radio" value="男" checked>男
<input name="sex" type="radio" value="女" >女
</td>
</tr>
<tr bgcolor="#FFCC33">
<td width="103" height="25" align="right">密碼：</td>
<td width="289" height="25" colspan="2" align="left">
<input name="pwd" type="password" id="pwd" size="20" maxlength="100">
</td>
</tr>
<tr bgcolor="#FFCC33">
<td height="25" align="right">學歷：</td>
<td height="25" colspan="2" align="left">
<select name="select">
<option value="專科">專科</option>
<option value="本科" selected>本科</option>
<option value="高中">高中</option>
</select>
</td>
</tr>
<tr bgcolor="#FFCC33">
<td height="25" align="right">愛好：</td>
<td height="25" colspan="2" align="left">
<input name="fond[]" type="checkbox" id="fond[]" value="音樂">音樂
<input name="fond[]" type="checkbox" id="fond[]" value="體育">體育
<input name="fond[]" type="checkbox" id="fond[]" value="美術">美術
</td>
</tr>
<tr bgcolor="#FFCC33">
<td height="25" align="right">照片上傳：</td>
<td height="25" colspan="2">
<input name="image" type="file" id="image" size="20" maxlength="100">
</td>
</tr>
<tr bgcolor="#FFCC33">
<td height="25" align="right">個人簡介：</td>
<td height="25" colspan="2">
<textarea name="intro" cols="30" rows="10" id="intro"></textarea>
</td>
</tr>
<tr align="center" bgcolor="#FFCC33">
<td height="25" colspan="3">
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>
|
說明：該表單包括了常用表單元素：單行文本框、多行文本框、單選項（radio）、多選項（checkbox），以及多選菜單。
maxlength是與姓名，密碼文本框關聯的屬性，它限制用戶輸入密碼的最大長度為100個字符。
列表框是列表菜單，它的命名屬性下都有自己的值供選擇。selected是一個特定的屬性選擇元素，如果某個option附加有該屬性，在顯示時就把該項列為第一項顯示。
intro文本框中的內容，按照rows和cols顯示文字、行和列寬。
checked標簽是指單選項和多選項中的某個值，默認已經被選擇。
將該文件保存為index.php頁。
上面文件中的form表單使用的是POST方法傳遞數據，所以用戶提交的數據會保存到$_POST或$_REQUEST的超級全局數組中，我們根據$_POST數組中的值就可以處理提交的數據。在后面我們會詳細介紹獲取表單數據的方法，POST方法是其中之一，在method="post"中選擇。獲取表單數據時表單是應用中最基本的操作，所以請朋友們關注表單后面的課程介紹。
注意：由於該頁未使用PHP腳本，因此該Web頁屬於靜態頁，可以將其保存為 .html格式，然后直接使用瀏覽器打開該文件查看運行結果即可。
